2.1

周报封面50.jpg

前端每周清单第50: AngularJS and Long Term Support, Web安全二三论,ReactClean 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版本,然后于201871日进入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的设计理念,然后比较了分别以MobXMobX 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布局中的盒尺寸: FlexboxCSS Grid的核心特性之一,就是能将内部的剩余可用空间分割给内部元素;作者在本文中分享了一些对于CSS布局中尺寸单位与计算的考虑。作者首先会给出一些规范的解读,然后深入讲解FlexboxCSS Grid中的尺寸计算规则。更多相关内容参考 Awesome CSS Reference

深度阅读

深度思考,升华开发智慧

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

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

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

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

开源项目

乐于分享,共推前端发展

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

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

  • Callbag: Callbag是用于保证轻量级的ObservablesIterablesJS回调标准,callbags-basic 则是对于Callbag标准的具体实现,我们可以阅读 André Staltz 编写的这篇文章来了解更多信息。

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

巅峰人生

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

前端之巅

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

前端之巅微信底图-5.jpg

下一页