前端每周清单第 50 期: AngularJS and Long Term Support, Web 安全二三论，React 与 Clean Code

前端每周清单专一前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• TypeScript 2.7 发布: 本周，TypeScript 2.7 发布，本文则是对于该版本的特性进行总结描述：严格的类属性检测，Definite assignment assertions，更为方便的 ECMAScript 模块操做性，Symbol 与常量名属性，对于 --watch 模式的优化，以及对于数值、元组等数据类型的优化等。

• style-components 3.1.0 发布: 该版本引入了新的 CSS 注入机制，极大地优化了生产环境下客户端渲染的性能；同时还提供了流式服务端渲染的支持，保障了首字节返回的速度。styled-components v3.1.0 在生产环境下已经默认使用了 insertRule，一个可能不太为人所知的 API，却可以近十倍地提高初始化挂载效率，以及近二十倍地提高重渲染效率。

• AngularJS 稳定版本与 LTS 规划: 做为现代 Web 框架的先驱，AngularJS 已然是用于构建 Web 应用的稳定框架首选之一，而且为数百万的开发者所使用。不过长江后浪推前浪，AngularJS 的占比与社区活跃度也在逐步降低，其开发团队也计划发布最后一个重大的更新：1.7 版本，而后于 2018 年 7 月 1 日进入 Long Term Support 阶段。在该版本发布以后，开发团队并不会继续发布新的特性，而会着眼于进行重大的错误修复。

• V8 6.5 发布: 每六个星期，V8 团队就会建立新的分支做为发布通道，本文便是对新近发布的 6.5 版本进行简要介绍。该版本引入了对于 WebAssembly 代码的流编译机制，新的 WebAssembly API 提供了与 fetch 协同使用的抓取 WASM 源代码而且进行流式编译的功能。此外，该版本还一如既往地着眼于性能优化，不断拓宽 JavaScript 内建的优化路径，而且引入了新的 “deoptimization loop.” 机制来避免一些意外状况。

开发教程

步步为营，掌握基础技能

• Progressive Web Apps 介绍: Progressive Web Apps (PWA) 是移动 Web 应用开发中的新潮流之一，所谓的 PWA 即指那些使用了某些技术以保证用户体验与原生应用尽可能一直的网页。本文是对于 PWA 的入门介绍，主要讨论了 Progressive Web Apps 的竞品、Progressive Web Apps 的特性与优点等内容。更多相关内容参考 Awesome PWA Reference。

• 基于 MobX State Tree 的状态管理: MobX State Tree 是另外一个前端状态管理框架，其虽然内部使用了 MobX，却提供了大相径庭的设计模式与编程接口。MobX State Tree 设定好了数据的结构与更新方式，而 MobX 仅仅提供了基础的接口，MobX State Tree 还为咱们提供了类型支持与模型建立接口。本文做者首先讨论了 MobX State Tree 的设计理念，而后比较了分别以 MobX 与 MobX State Tree 实现相同功能的差别。更多相关资料参考 Awesome MobX Reference。

• 基于 Nuxt.js 的服务端渲染的 Vue 应用: 对于不少初学者而言，服务端渲染可能并非一件容易的事情，特别是在混杂了数据抓取、路由与权限控制等需求时。本文即深刻浅出地介绍了如何利用 Nuxt.js 来构建完整的 Vue.js 服务端渲染应用，做者依次介绍了为何须要服务端渲染、服务端渲染与 SEO、从零构建 Nuxt.js 项目、自定义布局、Webpack 与静态资源处理、隐式路由与代码分割、嵌套路由、中间件等内容。更多相关内容参考 Awesome Vue Reference。

工程实践

立足实践，提示实际水平

• 现代 Node.js 开发中的 JavaScript 代码风格: 性能问题一直是 JavaScript 中引人关注的部分，随着 JavaScript 引擎与运行时的不断优化，咱们也须要不断变革自身对于 JavaScript 优化方式的考量。本文做者抛出了本身的观点：随着 Node.js 能同时跑在 ChakraCore 引擎与 V8 引擎上，而且 V8 引擎也引入了新的 Turbofan 优化编译器，JavaScript 开发者应该更多地关注于写出惯用的、可读性高的、易于维护的代码，而不该该在花费过多的精力去编写编译器友好的代码。更多相关内容参考 Awesome Node.js Reference。

• 来自 Google Cloud Platform 的十二个帐户管理与权限控制的最佳实践: 随着应用用户数与复杂度的增长，安全问题也变得日渐重要，而其中的帐户管理、权限控制与密码管理无疑是安全的重要组成基石。这些方面却每每容易被开发者忽视或者未能采起正确的措施，而 Google Cloud Platform(GCP) 一直致力于为用户提供帐户的建立、安全加固、管理等多中操做工具，本文便是其多年实践总结而来的最佳实践分享，以其帮助开发者打造安全、可扩展、高可用的用户权限认证系统。更多相关资料参考 Awesome WebSecurity Reference。

• 理解 CSS 布局中的盒尺寸: Flexbox 与 CSS Grid 的核心特性之一，就是能将内部的剩余可用空间分割给内部元素；做者在本文中分享了一些对于 CSS 布局中尺寸单位与计算的考虑。做者首先会给出一些规范的解读，而后深刻讲解 Flexbox 与 CSS Grid 中的尺寸计算规则。更多相关内容参考 Awesome CSS Reference。

深度阅读

深度思考，升华开发智慧

• 架构师之路: 将来的职业规划几乎是每位开发者会考虑的事情，在职业生涯上咱们也会有不少的选择，本系列则是讨论如何成为一位架构师。本系列包含了以下的文章：如何成为架构师，架构师的利害相关，架构师的类型，架构师的特性等，更多相关内容能够参考 Awesome SoftwareArchitecture Reference

• Web 前端中的加强现实（AR）开发技术: 加强现实（如下简称 AR）浪潮正滚滚而来，Web 浏览器做为人们最唾手可得的人机交互终端，正在大力发展 AR 技术。不少 Web 前端工程师也在寻求职业转型，因而本文做者 GeekPlux 把近半年的相关调研结果在此汇结成文。本文力求把目前前端方向的 AR 技术都罗列一遍，细节不赘述，只作归纳和科普，主要关注实现方式与关键技术。更多相关内容参考 Awesome AR Reference。

• 如何避免攻击者从网站中窃取信用卡帐户与密码: 本文做者曾撰文介绍本身是如何经过上传分发恶意代码来搜集用户的敏感信息。本文中，做者则从加固的角度给出了保护用户敏感信息的多个建议：并不须要刻意的避免第三方代码，能够将敏感信息放在独立的 HTML 文件中，而且将该文件经过 iframe 中加载，同时以静态文件服务器的方式从不一样的域名中访问该文件。更多相关资料参考 Awesome WebSecurity Reference。

• React 中 Clean Code 的实践: 来自 Bara 的开发者在遵循 Clean Code 的前提下重构了他们的代码库，以提高代码的可读性与可维护性。本文便是做者对于这次重构过程的心得分享，其在末尾亦给出了一些我的的思考：分解组件与函数，保证每一个组件或者函数的单层抽象；使用更易于理解的命名等。更多 React 相关资料参考 Awesome React Reference。

开源项目

乐于分享，共推前端发展

• Kap: Kap 是使用 Web 技术构建的开源屏幕录制工具，目前仅有 macOS 版本。

• Polka: Polka 是轻量级、高性能的 Express.js 替代框架；尽管 Express.js 的性能已然不错，Polka 仍然青出于蓝而胜于蓝，在不少的细节上作到了优化。一言以蔽之，Polka 是内置了路由、中间件以及子应用的原生 HTTP 服务器。

• Callbag: Callbag 是用于保证轻量级的 Observables 与 Iterables 的 JS 回调标准，callbags-basic 则是对于 Callbag 标准的具体实现，咱们能够阅读 André Staltz 编写的这篇文章来了解更多信息。

• Unstated: Unstated 是另外一个状态管理框架，其并未引入新的模式，而是基于 React 组件与 Context 的内置设计构建。Unstated 包含了三个部分，Container 是相似于 React.Component 的简单类，可是会包含一些状态相关的操做；Subscribe，容许传入 Container 实例，而且将其传递到子组件中，Provider 则是做为根节点来存储全部的实例。

巅峰人生

• 2017 年，Mozilla 为 Web 作了哪些事情？: 2017 对于 Mozilla 来讲是很是重要的一年。咱们发布了历史上最快的 Firefox，从新构建了 DevTools 开发者工具，见证了四个主流浏览器对 WebAssembly 的支持，启动了开源的虚拟现实和语音识别平台。咱们的开发者关系团队也参与了全球 60 多场路演，见证了 MDN Web Docs 网站读者数量几乎增长了一倍。本文便是对 Mozilla 2017 工做的总结与盘点。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com，注明 “ 前端之巅投稿 ”。