前端每周清单：MobX状态管理, 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。