前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与 V6 真实性能对比；Nuxt.js SSR 与权限验证指南

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

新闻热点

国内国外，前端最新动态

• 《Prettier 1.4.0 发布》：Prettier 1.4.0 版本中最令人期待的特性就是对于 TypeScript ，与 CSS、Less 以及 SCSS 等样式语言的支持。TypeScript 是社区呼唤已久的特性，在该版本中我们可以直接使用 prettier 格式化 ts 或者 tsx 为后缀的文件；除此之外，新版本还优化了对于编辑器嵌入的支持。( https://github.com/prettier/prettier/releases/tag/1.4.0  )

• 《Storybook 3.0 发布》：Storybook 3.0 版本带来了期待已久的 Webpack 2、create-react-native-app、Snapshot 测试等一系列新特性，同时修复了不少的 Bug 并且提升了整体性能。Storybook 3.0 版本是对于 Storybook 项目的代码组织与结构的极大调整检修，也是首个完整由社区驱动开  
  
  发的版本。(  https://parg.co/bi5  )

• 《Meteor 1.5 发布》：近日，Meteor 宣布发布其 1.5 版本，大幅优化了生成的 JavaScript 包体尺寸，并且提升了页面加载速度。本文主要介绍了 Meteor 的发展历史、代码分割与动态导入、包体分析工具、不变的模块缓存等内容。(  https://blog.meteor.com/announcing-meteor-1-5-b82be66571bb  )

开发教程

步步为营，掌握基础技能

• 《Nuxt.js SSR 与权限验证指南》：Nuxt.js 是基于 Vue.js 构建的服务端渲染框架，它允许开发者快速创建支持服务端渲染的应用；而本文则是介绍了利用 Nuxt.js 搭建应用并且为其添加权限验证模块的步骤。(  https://parg.co/bic  )

• 《理解高阶组件》：即使 React 新手都应该听过所谓高阶组件或者容器组件的概念，而本文则是深入浅出地介绍了 React 中高阶组件的概念与意义，并且以实例介绍具体的使用方式与适用场景。作者首先介绍了无状态组件与全局状态的概念，然后对比了所谓容器与展示型组件的使用场景，最后介绍了常见的高阶组件。(  https://parg.co/biZ  )

• 《N-API：下一代编写 Node.js 原生模块的接口》：Node.js 有着非常庞大而又生机勃勃的模块生态圈，这也是其一直保有活力与魅力的源泉。而现在的很多基于 C/C++ 编写的原生模块直接依赖于 V8 或者 NAN 接口，导致了它们缺乏稳定性的暴走，并且需要随着 Node.js 版本的更迭而不断变化或者重编译。而 N-API 则致力于解决这个问题，文本即是对于 N-API 的基本语法与当前状态的介绍。(  https://parg.co/bip  )

• 《面向 Web 设计师与开发者的免费电子书合集》：本文介绍了十数本优秀的面向 Web 设计师与开发者的免费的电子书，涵盖了 CSS&HTML 基础、现代 JavaScript 开发、Git、PHP 等多个领域。(  https://parg.co/bis  )

• 《在 Vue.js 中使用过滤器》：过滤器是 Vue 中常用的处理数据渲染结果的方式之一，我们首先需要明白过滤器并不是对于方法、推导值等的替代，毕竟它们并没有真实地转换数据，而只是对用户的可视结果进行了处理。自 Vue 2.0 之后框架本身并无内置的过滤器，而本文则是介绍了基本的过滤器的使用语法以及几个经典的使用场景。( https://css-tricks.com/using-filters-vue-js/  )

工程实践

立足实践，提示实际水平

• 《Yarn 与 npm5 比较》：随着 Node.js 8.0.0 一起发布的 npm 5.0.0 不仅在性能上得到了极大提升，还通过引入类似于 yarn.lock 的 package-lock.json 文件来实现所谓可确定的包管理。本文则是介绍了所谓可确定的包管理的具体含义，以及 yarn 与 npm5 各自不同的实现方式与优缺性的比较。(  https://parg.co/bir  )

• 《Node 8 与 Node 6 真实应用中性能比较》：Node 8 宣称带来了极大的性能提升，而本文作者则记录了其基于 React 的大型站点，从 Node 6 升级到 Node 8 前后的各项性能指标对比，从而量化的来反映 Node 8 带来的性能优化。作者横向比较了服务端渲染耗时、基于 Jest 的测试用例运行耗时、Webpack 编译耗时、NPM 安装耗时等几个方面，Node 8 相较于 Node 6 皆有更好的表现。(  https://parg.co/biu  )

• 《hyperapp》：hyperapp 是仅 1KB 大小的用于构建前端应用的 JavaScript 库，它基于 Elm 架构，支持声明式界面编程与函数式编程，允许使用 JSX 声明界面并且灵活地分割与合并自定义的标签。hyperapp 实现的简洁明了，是不错的可以阅读源码的轻量级框架。(  https://github.com/hyperapp/hyperapp  )

• 《HTTP 2 推送技术之难，真的远超我们想象》：在讨论页面加载性能问题时，我经常听到有人说“HTTP/2 推送可以解决这问题”，但我对这个技术的了解不多，于是打算深入研究一下。 HTTP/2 推送远比我最初想象中更复杂，也更底层，但最让我措手不及的地方在于，这种技术在不同浏览器上的表现竟然有这么大的差别，本来我还觉得这技术已经足够成熟，可以在生产环境中使用了。 本文并不是那种认为“HTTP/2 推送一无是处”的吐槽文。我觉得 HTTP/2 推送真的很强大，以后还会更加完善，但并不算能解决所有问题的万灵药。。(  https://parg.co/biR  )

• 《这 WebAssembly，是 Mozilla 赢了》：Mozilla 提出1 asm.js 与 Google Chrome 提出的 PNaCI 是都是致力于在浏览器中运行原生代码的技术方案。不过 PNaCI 却存在着自绝于 JavaScript 以及 HTML 等问题，并且其他的浏览器厂商很难去支持 PNaCI 标准。而 asm.js 则以轻量级的对于标准 Web 平台扩展的方式实现了这一目标，也就导致了最终 WebAssembly 决定靠近 asm.js 而不是 PNaCI。(  http://robert.ocallahan.org/2017/06/webassembly-mozilla-won.html  )

深度阅读

深度思考，升华开发智慧

• 《JavaScript 模块化现状》：近日随着各大浏览器纷纷开始支持 ESM（ECMAScript Moduls），Node.js 中也计划引入  *.mjs  作为 ESM 的文件扩展名，关于 JavaScript 模块化的未来发展也在社区引发了热切讨论。本文则是首先介绍了 ESM 在浏览器、Webpack 等构件工具以及 Node.js 中未来的实现，然后讨论了个人对于 ESM 未来发展以及对于程序开发本身的潜在影响。(  https://parg.co/bi0  )

• 《数字化视频技术概述》：本文是面向所有有兴趣了解视频相关技术的同学的概述文章，希望以浅显易懂的文字，结合实例与可视化交互来一步一步地介绍视频处理相关的技术。目前主要内容包括了图片编码等基础名词与理论介绍、冗余移除、视频编码工作原理、在线视频流等相关内容。( https://github.com/leandromoreira/digital_video_introduction  )

• 《我们为什么选择使用 React 生态》：本文是京东金融移动研发部工程师分享的它们对于前端框架、工具与方法的选择过程中的考虑。(  https://parg.co/biP  )

• 《写给 CSS 的情书》：世人诟病 CSS 久矣，而本文作者则对于 CSS 一见钟情且矢志不渝。本文是一篇不错的了解不同端开发中样式设置方式的文章，作者介绍了从 Java Applets 开始到 Android、iOS 应用开发中界面样式与主题设置的方式与技术，论证了 CSS 相较于这些方式具有更好的灵活性与便捷性。(  https://parg.co/biC  )

• 《现代软件开发中的常见过度技术化思维》：本文是 2016 年的一篇老文，不过读来也是感觉受益匪浅。本文讨论了软件开发中程序员常犯的过度技术化的思维方式，及其可能带来的不良结果，譬如轻视市场人员、过度重用业务逻辑代码、过度泛型化、过度依赖于质量检测工具等等。(  https://parg.co/bih  )

开源项目

乐于分享，共推前端发展

• 《vue-recyclerview》：vue-recyclerview 是基于 DOM 重用的能够处理大型列表项目的 Vue 组件，它能够用于构建高性能瀑布式列表或者无限列表。(  https://github.com/hilongjw/vue-recyclerview  )

• 《Feather》：Feather 是一系列简约而美丽的开源图标集合，提供了常见的用户交互提示、媒体控制、通信、定位、天气等图标。(  https://feathericons.com/  )

• 《base65536》：Base65536 是面向基于 UTF-32 编码文本的优化的二进制编码格式，而 base65536 则是首个支持该编码格式的模块。(  https://github.com/qntm/base65536  )

• 《nile.js》：基于 Torrents 与 WebRTC 的端到端视频流播放技术实现工具。( https://github.com/gitsummore/nile.js  )

• 《hacker-news-pwas》：基于不同的前端框架实现的符合 PWA 应用特性的 Hacker News APP 的合集，包括了常见的 React、Angular、Vue、Preact 等多个版本，并且均在 Lighthouse 评测中达到 90 以上的评分。( https://parg.co/biQ  )

巅峰人生

前端之巅

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

感谢韩婷对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。