> 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，注明“前端之巅投稿”。