前端每周清单专注前端领域内容, 以对外文资料的搜集为主, 帮助开发者了解一周前端热点; 分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目欢迎关注前端之巅微信公众号 (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, 注明 前端之巅投稿
来源: https://segmentfault.com/a/1190000013172481