...模块化现状;Node V8 与V6 真实性能对比;Nuxt.js SSR与权限验证...

作者 |王下邀月熊 编辑 |尾尾 由于微信不支持外链，故在相关内容后的提供了短链接，方便大家复制。查看本文带链接版请点击阅读原文。 新闻热点国内国外，前端最新动态

• 《Prettier 1.4.0发布》：Prettier 1.4.0版本中最令人期待的特性就是对于 TypeScript ，与 CSS、Less以及 SCSS等样式语言的支持。TypeScript是社区呼唤已久的特性，在该版本中我们可以直接使用 prettier格式化 ts或者 tsx为后缀的文件；除此之外，新版本还优化了对于编辑器嵌入的支持。( )
  
• 《Storybook 3.0发布》：Storybook 3.0版本带来了期待已久的 Webpack 2、create-react-native-app、Snapshot测试等一系列新特性，同时修复了不少的 Bug并且提升了整体性能。Storybook 3.0版本是对于 Storybook项目的代码组织与结构的极大调整检修，也是首个完整由社区驱动开发的版本。( )
  
• 《Meteor 1.5发布》：近日，Meteor宣布发布其 1.5版本，大幅优化了生成的 JavaScript包体尺寸，并且提升了页面加载速度。本文主要介绍了 Meteor的发展历史、代码分割与动态导入、包体分析工具、不变的模块缓存等内容。( )
  

开发教程步步为营，掌握基础技能

• 《Nuxt.js SSR与权限验证指南》：Nuxt.js是基于 Vue.js构建的服务端渲染框架，它允许开发者快速创建支持服务端渲染的应用；而本文则是介绍了利用 Nuxt.js搭建应用并且为其添加权限验证模块的步骤。( )
  
• 《理解高阶组件》：即使 React新手都应该听过所谓高阶组件或者容器组件的概念，而本文则是深入浅出地介绍了 React中高阶组件的概念与意义，并且以实例介绍具体的使用方式与适用场景。作者首先介绍了无状态组件与全局状态的概念，然后对比了所谓容器与展示型组件的使用场景，最后介绍了常见的高阶组件。( )
  
• 《N-API：下一代编写 Node.js原生模块的接口》：Node.js有着非常庞大而又生机勃勃的模块生态圈，这也是其一直保有活力与魅力的源泉。而现在的很多基于 C/C++编写的原生模块直接依赖于 V8或者 NAN接口，导致了它们缺乏稳定性的暴走，并且需要随着 Node.js版本的更迭而不断变化或者重编译。而 N-API则致力于解决这个问题，文本即是对于 N-API的基本语法与当前状态的介绍。( )
  
• 《面向 Web设计师与开发者的免费电子书合集》：本文介绍了十数本优秀的面向 Web设计师与开发者的免费的电子书，涵盖了 CSS&HTML基础、现代 JavaScript开发、Git、PHP等多个领域。( )
  
• 《在 Vue.js中使用过滤器》：过滤器是 Vue中常用的处理数据渲染结果的方式之一，我们首先需要明白过滤器并不是对于方法、推导值等的替代，毕竟它们并没有真实地转换数据，而只是对用户的可视结果进行了处理。自 Vue 2.0之后框架本身并无内置的过滤器，而本文则是介绍了基本的过滤器的使用语法以及几个经典的使用场景。( )
  

工程实践立足实践，提示实际水平

• 《Yarn与 npm5比较》：随着 Node.js 8.0.0一起发布的 npm 5.0.0不仅在性能上得到了极大提升，还通过引入类似于 yarn.lock的 package-lock.json文件来实现所谓可确定的包管理。本文则是介绍了所谓可确定的包管理的具体含义，以及 yarn与 npm5各自不同的实现方式与优缺性的比较。( )
  
• 《Node 8与 Node 6真实应用中性能比较》：Node 8宣称带来了极大的性能提升，而本文作者则记录了其基于 React的大型站点，从 Node 6升级到 Node 8前后的各项性能指标对比，从而量化的来反映 Node 8带来的性能优化。作者横向比较了服务端渲染耗时、基于 Jest的测试用例运行耗时、Webpack编译耗时、NPM安装耗时等几个方面，Node 8相较于 Node 6皆有更好的表现。( )
  
• 《hyperapp》：hyperapp是仅 1KB大小的用于构建前端应用的 JavaScript库，它基于 Elm架构，支持声明式界面编程与函数式编程，允许使用 JSX声明界面并且灵活地分割与合并自定义的标签。hyperapp实现的简洁明了，是不错的可以阅读源码的轻量级框架。( )
  
• 《HTTP 2推送技术之难，真的远超我们想象》：在讨论页面加载性能问题时，我经常听到有人说“HTTP/2推送可以解决这问题”，但我对这个技术的了解不多，于是打算深入研究一下。 HTTP/2推送远比我最初想象中更复杂，也更底层，但最让我措手不及的地方在于，这种技术在不同浏览器上的表现竟然有这么大的差别，本来我还觉得这技术已经足够成熟，可以在生产环境中使用了。本文并不是那种认为“HTTP/2推送一无是处”的吐槽文。我觉得 HTTP/2推送真的很强大，以后还会更加完善，但并不算能解决所有问题的万灵药。。( )
  
• 《这 WebAssembly，是 Mozilla赢了》：Mozilla提出 1 asm.js与 Google Chrome提出的 PNaCI是都是致力于在浏览器中运行原生代码的技术方案。不过 PNaCI却存在着自绝于 JavaScript以及 HTML等问题，并且其他的浏览器厂商很难去支持 PNaCI标准。而 asm.js则以轻量级的对于标准 Web平台扩展的方式实现了这一目标，也就导致了最终 WebAssembly决定靠近 asm.js而不是 PNaCI。( )
  

深度阅读深度思考，升华开发智慧
《JavaScript模块化现状》：近日随着各大浏览器纷纷开始支持 ESM（ECMAScript Moduls），Node.js中也计划引入*.mjs作为 ESM的文件扩展名，关于 JavaScript模块化的未来发展也在社区引发了热切讨论。本文则是首先介绍了 ESM在浏览器、Webpack等构件工具以及 Node.js中未来的实现，然后讨论了个人对于 ESM未来发展以及对于程序开发本身的潜在影响。( )《数字化视频技术概述》：本文是面向所有有兴趣了解视频相关技术的同学的概述文章，希望以浅显易懂的文字，结合实例与可视化交互来一步一步地介绍视频处理相关的技术。目前主要内容包括了图片编码等基础名词与理论介绍、冗余移除、视频编码工作原理、在线视频流等相关内容。( )

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

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

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

开源项目乐于分享，共推前端发展

• 《vue-recyclerview》：vue-recyclerview是基于 DOM重用的能够处理大型列表项目的 Vue组件，它能够用于构建高性能瀑布式列表或者无限列表。( )
  
• 《Feather》：Feather是一系列简约而美丽的开源图标集合，提供了常见的用户交互提示、媒体控制、通信、定位、天气等图标。( )
  
• 《base65536》：Base65536是面向基于 UTF-32编码文本的优化的二进制编码格式，而 base65536则是首个支持该编码格式的模块。( )
  
• 《nile.js》：基于 Torrents与 WebRTC的端到端视频流播放技术实现工具。( )
  
• 《hacker-news-pwas》：基于不同的前端框架实现的符合 PWA应用特性的 Hacker News APP的合集，包括了常见的 React、Angular、Vue、Preact等多个版本，并且均在 Lighthouse评测中达到 90以上的评分。( )
  

巅峰人生《程序员怎么做 CEO？》：很多技术员都有当 CEO创建下一个 BAT的梦想，可是常常感觉无从下手。NimbleDroid 首席执行官，哥伦比亚大学教授杨峻峰在 QCon北京 2017讲述了他自己从“技术狂人”到 CEO的历程、经验和教训。
前端每周清单第 15期：Node.js v8.0发布；从 React迁移到 Vue；前端开发的未来
视野拓展InfoQ主办的移动和前端开发领域的精品大会【GMTC 2017】将于 6月 9～10日在北京举行，作为首届以“大前端”为主题的大会，GMTC涉及移动、前端、跨平台、AI应用等多个技术领域，帮助你方方面面提高技术水平。扫描下图二维码，前往官网了解详细信息！
前端之巅「前端之巅」是 InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。推荐分享或投稿请发邮件到 editors@cn.infoq.com，注明“前端之巅投稿”。