> url: FE-Weekly-6

topicL 前端每周清单、前端、jQuery、Vue、PWA

• 前端每周清单第 6 期：Angular 4.0 学习资源，Egg.js 1.0 发布，六问 CTO 程序员如何成长 为 InfoQ 中文站特供稿件，首发地址为这里；如需转载，请与 InfoQ 中文站联系。从属于笔者的 Web 前端入门与工程实践，更多前端知识图谱与学习路线图参考泛前端知识图谱(Web/iOS/Android/RN) 。

前端每周清单第 6 期：Angular 4.0 学习资源，Egg.js 1.0 发布，六问 CTO 程序员如何成长

前端 前端每周清单

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

新闻热点

国内国外，前端最新动态

• 《Angular 4.0.0 发布》：今日 Angular 团队宣布发布 4.0.0 版本，该版本能够向后兼容绝大部分 2.x.x 应用。在 4.0.0 中，带来的主要改变包括应用更小并且速度更快、更新了视图引擎，减少了将近 60% 的生成代码、并且引入了动画库作为预置的核心库的一部分等 。( https://parg.co/bsw )

• 《Egg.js 1.0.0 正式发布》：Egg.js 是企业级 Node.js 框架沉淀自阿里各行各业不同领域最佳实践的插件，涵盖了常见的业务开发场景，稳定支撑了 15 和 16 年天猫双 11 大促，顶级流量压力。其秉持渐进式理念，极具伸缩性，既适合个人小项目快速开发，也适合企业级的团队开发协作。( https://zhuanlan.zhihu.com/p/25860846 )

• 《WebStorm 2017.1 增加对 Vue.js 的支持》：近日，JetBrains 发布了其最受欢迎的 WebStorm IDE 的 2017.1 版本，毫不例外地增加了对 Vue.js 的支持。WebStorm 现在会识别 .vue 文件并在模板中增加代码补全功能。当引用其他视图组件时，WebStorm 也将能够自动补全代码并自动增加 import 声明。( https://parg.co/bQU )

开发教程

步步为营，掌握基础技能

• 《CSS Grid 典型案例》：该网站提供了一系列基于 React 编写的 CSS Grid 布局的测试样例，是个不错的从实例中学习 CSS Grid 语法与使用的教程。( https://sii.im/playground/css-grid/#/ )

• 《Webpack 实践教程》：本系列教程着眼于介绍真实应用中 Webpack 的使用，包含了三个部分：构建基础前端项目与添加编译支持、减少包体体积与缓存、加速构建与提升开发工作流。( https://parg.co/bsL )

• 《面向“远古” Web 开发者的现代 JavaScript 教程》：本文主要是面向那些从 PHP、JSP、Rails 占据统治地位时开始进行 Web 技术的开发者进行常见的现代 JavaScript 基础概念的介绍。( https://parg.co/bsF )

• 《你应该知道的关于 Node.js 中模块导入的知识》：在 Node.js 开发中我们时刻都在于其模块机制打交道，而本文作者则深入浅出地介绍了 Node.js 中负责处理模块依赖的两个核心模块：require 与 module；并且介绍了不同的导入对象在 Node.js 中实际的递归处理流程以及最终在 module 中形成的元数据描述。( https://parg.co/bQl )

• 《Angular 4 学习资源》：随着 Angular 4 的正式发布，本文也收集了部分学习 Angular 4 的资源，包括特性总结、服务端渲染、响应式编程、样式指南等等多个部分。( https://parg.co/bQ0 )

  工程实践

立足实践，提示实际水平

• 《Dropbox：使用同域 Cookie 避免跨站攻击》：跨站请求伪造(CSRF)是常见的网络渗透攻击手段之一，攻击者会误导用户在攻击站点上对目标站点发起非法请求。本文是 Dropbox 工程师分享他们在实践中常用的防御经验分享，包括使用动态表单令牌、同域 Cookie 等等。(https://parg.co/bs5)

• 《跨浏览器插件模板》：随着 Firefox 也开始支持 WebExtensions，我们可以更加方便地编写跨浏览器插件，尽可能地复用代码。本仓库则提供了基础的插件模板，实现了一次编写，多处运行、热加载等多个便捷功能的预置。( https://parg.co/bsi )

• 《VS Code 使用贴士与技巧》: VSCode 是非常轻量易用的软件开发工具，其丰富的插件系统能够极大地满足开发需求。本文则是作者总结的一系列 VS Code 使用技巧的总结与介绍，譬如常用命令操作、文件管理、Git 集成、调试与任务运行等等。(https://parg.co/bsk)

• 《解密 JavaScript 异步编程》：JavaScript 中异步编程历经了多个大的迭代，从回调到 Promise 到生成器以及现在的 Async/Await；本文作者则是高屋建瓴地介绍了 JavaScript 异步编程的变迁历史以及简要的内部实现原理。( https://parg.co/bsz )

• 《Webpack CommonsChunkPlugin 与多入口公共代码提取》：在构建基于 Webpack 的前端工作流时，CommonsChunkPlugin 是常用的公共代码提取插件。而本文则是 Webpack 开发团队对于社区反馈的 CommonsChunkPlugin 使用过程中的一些误区与同步/异步公共代码块提取的实践进行总结与分析。( https://parg.co/bQb )

• 《构建可维护的大型 Angular 2 应用》：本文是来自 Versett 的工程师介绍其团队在基于 Angular 2 构建大型应用时的实践与总结。( https://parg.co/bQm )

• 《开发 React Native 与 Redux 应用一年来的错误总结》：本文作者总结了他在过去一年中 React Native 与 Redux 开发中遇到的错误的复盘与总结，譬如布局文件分割、Redux Store 设计、项目目录结构、表单验证等多个方面。( https://parg.co/bQS )

深度阅读

深度思考，升华开发智慧

• 《浅析 WebAssembly 缘何优于 Asm.js》：WebAssembly 是新的 Web 中可执行格式，逐现代浏览器纷纷地提供了对于 WebAssembly 的原生支持；本文则是对于 WebAssembly 相较于 asm.js 带来的性能提升背后的原理进行简要介绍。(https://parg.co/bsv)

• 《ES7 Async/Await 常见误区》：ECMAScript 6 引入的 Promise 大大简化了 JavaScript 中异步编程语法，而 ES7 引入的 Async 则使其更为优雅；本文作者对于实践中常见的对于 Async/Await 的语法误用案例进行了解析。( https://parg.co/bsW )

• 《React Conf 2017 盘点》：本文作者对于近日举办的 React Conf 2017 中的精彩演讲进行了盘点，包括 Redux 与 MobX 在状态管理领域的对比、ReactVR 等一系列优秀的基于 React 的扩展项目、代码格式化与样式组件、服务端渲染等等。( https://parg.co/bsg )

• 《百度 SSP 单页式应用性能优化实践》：针对首页和部分页面打开速度慢的问题，百度 SSP 前端团队对单页式应用性能进行了优化。本文介绍其中一个方案：基于 HTTP Chunk 的首屏数据渐进式预加载方案，该方案总体减少了单页应用 1.2s 的首屏呈现时间。同时对比其与同构渲染方案的异同。( https://parg.co/bQH )

• 《Composing Software》：本系列文章由 Eric Elliott 大神发布，着眼于介绍 JavaScript 函数式编程与大型软件项目中的可组织性技术的介绍，包括了函数式编程导论、高阶函数、Reduce、Functors & Categories 等几个部分，还在持续更新中。( https://parg.co/bQY )

• 《Redux 实践大讨论》：此篇是 Markerikson 在 Redux Issue 中发起的讨论，主要涉及 Redux 模板冗余、过度抽象、学习曲线过于曲折、太多的 Opinioned 最佳实践等问题。( https://github.com/reactjs/redux/issues/2295 )

开源项目

乐于分享，共推前端发展

• 《react-native-interactable》：react-native-interactable 是由 wix 发布的用于创建高性能用户交互效果的声明式接口。典型的用户场景包括滑动式卡片、抽屉菜单、伸缩式应用头、聊天头等。( https://github.com/wix/react-native-interactable )

• 《awesome-github-vue》：awesome-github-vue 是由 OpenDigg 整理并维护的 Vue 相关开源项目库集合。( https://github.com/opendigg/awesome-github-vue )

• 《react-overdrive》：非常简单易用的 React 应用转场动画实现库，能够在不同的页面间指定相同 ID 的元素，Overdrive 会自动为这两个元素之间添加转场动画。( https://github.com/berzniz/react-overdrive )

• 《Eagle.js》：Eagle.js 是基于 Vue.js 构建的创建 Web 中幻灯片的库，支持动画、主题、交互插件等常用功能。( https://github.com/zulko/eagle.js/ )

• 《react-perimeter》：react-perimeter 能够为目标元素创建隐藏的栅栏，当用户的鼠标移动到目标元素的指定范围内时会触发预设时间，譬如可以执行组件预加载等操作。( https://github.com/aweary/react-perimeter )

巅峰人生

• 《六问 CTO，程序员的个人、职业成长如何抉择？》：本文是声网 Agora.io CTO 陶思明对于程序员的自我成长、KPI 考核机制、技术管理与创业选择等相关问题进行的回答与分享。( https://parg.co/bQp)

前端之巅

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