6.3-Frontend

前端每周清单第17期：大前端技术生命周期模型；WWDC发布Safari 11；面向生产环境的前端性能优化

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

开发教程

步步为营，掌握基础技能

  • 《WebAssembly初体验：重构简单游戏引擎》：WebAssembly为我们提供了构建高性能的前端应用的途径，而本文则从零开始介绍如何使用C来覆写简单的JavaScript游戏引擎并且将其编译为WebAssembly。本文依次介绍了如何搭建基础的Emscription工具链、使用JavaScript引入wasm模块、覆写并且优化某个小型游戏引擎、两个引擎的性能评测等等部分。( http://blog.openbloc.fr/webassembly-first-steps/ )

  • 《使用Vue与NativeScript开发跨端应用》：目前标准的开发NativeScript应用的方式是使用朴素的JavaScript或者Angular，而本文介绍了如何结合使用Vue与NativeScript来开发跨终端应用。本文首先阐述了Vue.js相较于React或者Angular的优势，然后阐述了使用Vue语法来开发基础NativeScript应用的步骤。( https://www.nativescript.org/blog/a-new-vue-for-nativescript )

  • 《基于Firebase与Vue.js构建基于地理位置的聊天室》：本文介绍了基于Firebase与Vue.js构建某个基于地理位置搜索与配对的聊天室应用的过程，应用发布在这里，还是挺有意思的应用。本文除了介绍Vue.js项目的基础构建与语法之外，还介绍了所谓Geohash的知识与Firebase相关接口的使用。( https://parg.co/bLH )

  • 《Node.js 8中util.promisify介绍》：Node.js 8为我们提供了新的工具函数util.promisify()，它能够将某个基于回调的函数封装为基于Promise的函数。本文介绍了util.promisify()的基本使用，首先介绍了对于文件读取写入相关接口的封装使用，然后讨论了如何引入async语法，最后还介绍了自定义promisify函数的用法。

  • 《你应该掌握的关于Node.js子进程的知识》：Node.js最初以单进程单线程非阻塞方式提供了强大的性能表现，不过在目前多核时代下仅使用单进程已远远不能承载日益增长的应用压力。本文即介绍在Node.js中如何使用spawn()、exec()、execFile()、fork()等多进程相关模块的用法与各自的特点，依次介绍了使用spawn来创建实现了EventEmit接口的子进程、使用exec执行子命令、使用fork创建自带通信信道的子进程等。( https://parg.co/bLq )

工程实践

立足实践，提示实际水平

  • 《Figma利用WebAssembly降低三倍加载速度》：自WebAssembly推出之后，很多开发者都开始尝试在小型项目中实践WebAssembly，不过尚缺大型真实案例比较。而Figma因为其产品主要基于C++实现，可以方便地编译到WebAssembly中并且与原方案进行性能比较。本文中Figma介绍了它们在Firefox中使用WebAssembly之后带来的加载性能提升以及下载尺寸的优化，同时还提及了目前WebAssembly在实际项目使用中存在的一些问题与风险。( https://parg.co/biB )

  • 《利用React Apollo减少Redux代码量》：Redux为人诟病的一点就是需要大量的模板代码，而更多的代码往往也意味着更多的潜在错误与更高的维护代价。本文则介绍了如何利用Apollo来接管应用中的数据加载与呈现逻辑，从而减少Redux实现方案中加载数据生命周期中所需要的代码。( https://parg.co/bLA )

  • 《CSS局部作用域变量详解》：CSS自定义属性或者所谓的CSS变量，为我们带来了真正的、不同于SASS等预处理框架中使用的类占位符的动态变量。本文介绍了CSS变量的基本定义语法与使用，以及如何使用JavaScript来动态修改CSS变量值从而动态地进行界面重渲染，最后阐述了目前浏览器对于CSS变量的支持情况以及可以使用的兼容方式。( https://parg.co/bLS )

  • 《面向生产环境的前端性能优化清单》：在Web前端开发中，产品经理更多的会关注于寻找优秀的设计与内容，而开发者同样需要关注于如何进行前端性能优化。作者在本文中则分享了多年经验累积的性能优化清单，包括常见的资源优化、CSS优化中常用的工具、常用的性能检测工具等等。( https://parg.co/bLP )

  • 《渐进式图片渲染机制》：图片在网页中占据了重要的地位，合适的图片能够大幅提升用户体验，不过同样会占据大量的带宽；本文则着眼于如何综合利用懒加载与渐进式渲染等方式来优化带宽使用与用户体验。本文首先讨论了对于合适的图片格式的选择，然后介绍了常见的图片懒加载的技术，最后阐述了所谓渐进式编码与渐进式图片渲染的理念与实践。( https://parg.co/bLp )

深度阅读

深度思考，升华开发智慧

  • 《Mobdux：整合MobX与Redux中优秀的部分》：MobX与Redux为我们提供了截然相反地管理前端应用状态的方式，而本文则细致地分析对比了Redux与MobX的优缺点，并且从自己的实践经验角度出发提出了结合二者优点的mobdux框架。( https://parg.co/bLd )

  • 《不会做动画的前端不是好开发》：自从有了前端开发这个概念以来，这个岗位所做的事情都是围绕着人机交互来开展的，主要包括展示信息给用户看，然后获取用户的意图并做出响应。随着终端设备以及业务的快速发展，前端工程也越来越复杂，所以分工也进一步精细化，有侧重做工具化与模块化架构的，有侧重无线体验或者Web与Native融合方面的，也有侧重复杂的商家后台或者数据可视化的，甚至有部分公司把HTML+CSS与JS的工作也分开的，所以出现了不同前端工程师会有不一样的侧重点。而目前越来越多的业务线有越来越高的动画类需求，而在动画方面能紧跟技术趋势的优秀前端实在是比较难找，本文则希望让那些想在动画方面有些提升的朋友有所帮助。( https://parg.co/bL0 )

  • 《Flow与TypeScript》：本文主要对比了Flow与TypeScript这两个常用的JavaScript静态类型检测工具，首先介绍了在简单项目中如何使用TypeScript与Flow。然后对比了二者在类型覆盖率上的渐进对比，会发现使用Flow之后因为其较为严格的类型要求会相对较快地实现高覆盖，而TypeScript则相对较为松弛。( http://thejameskyle.com/adopting-flow-and-typescript.html )

  • 《JavaScript中类的私有域定义》：目前对于类中的私有域定义已经达到了Stage 2，本文即是详细介绍#private语法的使用以及设计理念。顾名思义，我们可以使用#privateFieldName方式来定义类中的私有域，该私有域仅允许该类的方法访问(包括静态方法)。本文还介绍了使用这种HashTag方式而不是其他语言中常见的private关键字来定义的考量。( http://thejameskyle.com/javascripts-new-private-class-fields.html )

  • 《CSS的现状》：毫无疑问我们正在见证着JavaScript社区与生态的极速变化，而与此同时可能很多人没有关注到CSS社区的进展，本文作者则是对于CSS的现状进行了综述并且提出了个人的观点。本文作者主要提出了五个论点：我们可以使用CSS Module来替代原有的BEM等命名方案、使用Flexbox来替代float、使用CSS Grid来替代第三方网格库、使用CSS内置的变量、计算函数等特性来替代SASS等预处理库，乃至于最终我们完全可以使用CSS-in-JS来替代CSS。本文具有极强的主观色彩，请批判性阅读。( https://parg.co/bLZ )

开源项目

乐于分享，共推前端发展

巅峰人生

前端之巅

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

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

上一页
下一页

最近更新于2023-04-16