阿里云前端周刊 - 第 37 期

摘要：

## 推荐 ### 1. Node.js 的可扩展应用模式：CQRS, ES, Onion https://medium.com/@domagojk/patterns-for-designing-flexible-architecture-in-node-js-cqrs-es-onion-7eb10bbefe17 本文介绍如何使用 CQRS 与 Event Sourcing

推荐

1. Node.js 的可扩展应用模式：CQRS, ES, Onion

medium.com/@domagojk/p…

本文介绍如何使用 CQRS 与 Event Sourcing 模式来开发 Node.js 应用，使用 Onion 架构来组织这些模式，并且使用 TypeScript 来进行静态类型校验。本文首先讨论了何谓灵活架构：业务逻辑与实现分离、独立于数据库，框架，服务等等；然后介绍了 Event Sourcing 与 CQRS 的含义，以及它们是如何组织在洋葱圈模型中的，最后以典型的认证逻辑为例讨论了如何实现 CQRS 模式。

2. 2017 JavaScript 发展回顾

medium.freecodecamp.org/a-look-back…

在 2017 年 JS 状态调查结果出炉之前，Sacha Greif 先和几位专家聊了聊他们对于 2017 年 JavaScript 发展的看法与回顾，并整理成了这篇文章。本文从测试工具、构建工具、状态管理、全栈架构等几个不同的方面进行了讨论，对 2017 年中令人印象深刻的技术进行了分享；除此之外，A recap of front-end development in 2017 也是一篇不错的总结，

3. 卡通图解 JavaScript 引擎

codeburst.io/understandi…

本系列文章着眼于从运行机制的角度来介绍 JavaScript，首篇文章介绍了 Callback Queue、Event Loop 等异步执行相关的概念，本文则是从引擎的角度，以漫画的方式来介绍 JavaScript 的编译、解析与执行的过程。上周的清单中我们推荐了 V8 引擎的推测优化，本文则是提纲挈领地介绍 JIT 编译器的原理，给读者一个宏观的概念展示；

更多

1. Airbnb 列表页的 React 性能问题浅析

medium.com/airbnb-engi…

Airbnb 已经使用 React Router 与 Hypernova 将核心订购流程转化为了服务端渲染的单页应用，本文则是介绍其如何将列表详情页进行单页应用话改造，并且综合提高其性能。本文首先讨论了如何进行性能评测，这篇文章也介绍了如何使用 Chrome DevTools 来调试 React 的性能问题；然后介绍了其在初始化渲染、滚动优化、点击反馈、输入输出方面的优化技巧

2. IMG 的变迁：非 GIF 的动图实现

calendar.perfplanet.com/2017/animat…

图片是现代网页应用中不可或缺的部分，GIFs 是动图实现的选择之一，但其质量与性能一直差强人意；如果直接使用 video 标签，又是无法发挥 preloaded 的作用，还必须分段请求。在 Safari Technology Preview 中，允许开发者使用mp4的形式来实现简单的动图需求，相较于原本的 GIF 的解决方案能带来将近二十倍的性能提升，并且支持 CSS 方式背景播放，其体积也有大幅度的降低。

3. TensorFlow Lite 支持 Core ML

developers.googleblog.com/2017/12/ann…

TensorFlow Lite 是面向移动设备与嵌入式设备的轻量级 TensorFlow 版本，近日其宣布开始支持 Core ML，通过工具能够将 TensorFlow 模型转化为 .mlmode 这样的 Core ML 模型格式。Core ML 是 iOS 内置的机器学习框架，这意味着 iOS 开发者能够在 Core ML 上部署 TensorFlow 模块，也是 TensorFlow Lite 在跨平台支持上的重要一步；另一方面，Apple 也开源了自定义机器学习模型框架 Turi Create，来帮助开发者快速开发机器学习模块并且集成到 iOS 应用中。

4. 使用 Rust 开发基于 WebAssembly 的游戏

aochagavia.github.io/blog/rocket…

数周前，Alex Crichton 的 PR 使得 Rust 能够直接被编译为 WebAssembly 格式，本文作者也尝试将基于 Rust 与 Piston 编写的桌面游戏 Rocket， 转化为能够在浏览器中运行的 WebAssembly 格式的应用。作者使用 JavaScript 来处理用户的输入输出，并且进行界面渲染，使用 Rust 来处理游戏逻辑；作者依次介绍了自己在迁移过程中碰到的多个 Link 错误以及处理方案，然后讨论了 Rust 与 JavaScript 如何相互调用，以进行画面渲染与接收用户输入输出等内容。

5. Angular 5.1 发布

blog.angular.io/angular-5-1…

本文介绍了 Angular 5.1.0, Angular CLI 1.6 以及 Angular Material 的首个稳定版本的特性变化。Angular 5.1.0 中包含了多个小的特性变化与错误修复，此次系列更新主要包括了 Angular Material & CDK 稳定版发布、CLI 工具支持 Service Worker、对于 Universal 以及 AppShell 支持的提升、装饰器错误信息优化、支持 TypeScript 2.5 等等。

6. Ant Design 3.0 发布

medium.com/ant-design/…

Ant Design 是面向企业级桌面应用的设计方案与实现，在 2.0 版本发布的 14 个月之后，3.0 版本正式发布，包含了来自 200 多位贡献者的超过 4000 次提交。Ant Design 3.0 版本中引入了新的色彩系统，其受到天空的启发，包含了薄暮、日出、拂晓蓝等一系列优美的色彩搭配；该版本还引入了新的组件设计，包括了对于大量组件的复写，完全支持 React 16 与 ES Module，并且优化了对于 TypeScript 的支持。