6.2-Frontend

前端每周清单第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 )

开源项目

乐于分享，共推前端发展

巅峰人生

前端之巅

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

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

上一页
下一页

最近更新于2023-04-16