前端每周清单：jQuery 3.2发布，滴滴采用Vue 2.0重构Web App、饿了么 PWA 实践经验分享
VicMWK
8年前
<p><a href="/misc/goto?guid=4959742649163466275" rel="nofollow,noindex">前端每周清单：jQuery 3.2发布，滴滴采用Vue 2.0重构Web App、饿了么 PWA 实践经验分享</a> 为InfoQ中文站特供稿件，首发地址为 这里 ；从属于笔者的 <a href="/misc/goto?guid=4959732850200495319" rel="nofollow,noindex">Web 前端入门与工程实践</a> 。</p> <p>前端每周清单：前端每周清单：jQuery 3.2发布，滴滴采用Vue 2.0重构Web App、饿了么 PWA 实践经验分享</p> <h2>新闻热点</h2> <p>前端领域最新动态</p> <ul> <li> <p><a href="/misc/goto?guid=4959742649291678006" rel="nofollow,noindex">《非死book 发布 Create React Native App》</a> ：类似于 Create-React-App，Create React Native App 能够为开发者快速创建零配置的 React Native 项目，并且与基于 Expo 构建了完整的可以屏蔽底层原生代码细节的 React Native 项目，使得开发者可以快速尝试上手 React Native 项目 。同时，开发者也可以使用 npm run eject 命令将项目切换到全配置状态，以方便自行添加原生组件。 ( <a href="/misc/goto?guid=4959742649291678006" rel="nofollow,noindex">http://6me.us/29r</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742649380061341" rel="nofollow,noindex">《2017 React 大会成功举办》</a> ：2017 年 React Conf 于 3 月 13 日、14 日成功举办，会上来自世界各地的开发者就 React Fiber、Flow、Performance、React Native 等多个主题发表了演说与讨论，推荐选择自己喜欢的演讲视频观看。( <a href="/misc/goto?guid=4959742649380061341" rel="nofollow,noindex">http://conf.reactjs.org/lives...</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742649476849370" rel="nofollow,noindex">《jQuery 3.2.0 发布》</a> ：jQuery 3.2.0 中包含了一系列的错误修复、性能提升以及部分弃用 API 的彻底移除 。重大的更新包括添加了对于自定义 CSS 属性操作的支持，彻底移除了 isArray、nodeName 等方法以及修复了 .width() 等部分方法中的问题。( <a href="/misc/goto?guid=4959742649476849370" rel="nofollow,noindex">http://6me.us/BN8</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742649562608685" rel="nofollow,noindex">《Sketch 宣布开源其文件格式》</a> ：随着近日发布的 Sketch 43 版本，Sketch 宣布开源其文件格式，这也意味着未来可能会有人基于该格式开发 Windows 版本应用或者简单的 Sketch 文件浏览器。鉴于其文件格式为 JSON，我们也可以畅想未来会出现自动构建的 Web Service。( <a href="/misc/goto?guid=4959742649562608685" rel="nofollow,noindex">http://6me.us/DyAYEC</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742649659965494" rel="nofollow,noindex">《Chromium 即将支持 APNG》</a> ：该 Commit 会为 Chromium 添加 APNG 格式的支持，该格式可以逐步替换现存的 Gif 格式 。( <a href="/misc/goto?guid=4959742649659965494" rel="nofollow,noindex">https://parg.co/bO9</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742649749270287" rel="nofollow,noindex">《Kotlin 1.1新增协程、类型别名特性，提升了对JavaScript的支持》</a> ：Kotlin的新版本引入了多项新的语言特性（其中最值得注意的就是协程），同时还提升了对其JavaScript目标环境的支持。( <a href="/misc/goto?guid=4959742649749270287" rel="nofollow,noindex">http://www.infoq.com/cn/news/...</a> )</p> </li> </ul> <h2>开发教程</h2> <p>步步为营，掌握基础技能</p> <ul> <li> <p><a href="/misc/goto?guid=4959742649839346354" rel="nofollow,noindex">《Flexbox 语法清单》</a> ：该网页提供了交互式的 CSS Flexbox 教程，详细介绍了 Flexbox 的使用语法与经典案例。( <a href="/misc/goto?guid=4959742649839346354" rel="nofollow,noindex">http://yoksel.github.io/flex-...</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742649932938169" rel="nofollow,noindex">《Sketch：React Native 的 Playground 》</a> ：随着 Create React Native App 的发布，Expo 发布了能够在线编辑 React Native 应用的工具 Sketch。开发者可以在 Web 上直接编辑 React Native 应用代码，或者拖拽方式加入组件，然后通过 Expo 客户端完成本地预览。( <a href="/misc/goto?guid=4959742649932938169" rel="nofollow,noindex">http://6me.us/aGFX</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650024119172" rel="nofollow,noindex">《编写 JavaScript 框架：客户端路由》</a> ：本文是编写 JavaScript 框架系列的最后一篇，主要着眼于讨论如何实现 JavaScript 客户端路由及其与服务端路由的区别。( <a href="/misc/goto?guid=4959742650024119172" rel="nofollow,noindex">https://parg.co/bOL</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650125440332" rel="nofollow,noindex">《30 天学习 30 个 VR 项目》</a> ：本系列作者介绍了从 0 到 1 如何开发 30 个常见的 VR 项目，从最基础的图片浏览、视频播放，到交互性动画等等 。( <a href="/misc/goto?guid=4959742650125440332" rel="nofollow,noindex">https://risonsimon.com/days-i...</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650218516361" rel="nofollow,noindex">《CORS 详细指南》</a> ：本文是对于浏览器中跨域访问协议 CORS 进行详细介绍，并且以完整的代码交互示例演示 CORS 协议的效果与使用方法。( <a href="/misc/goto?guid=4959742650218516361" rel="nofollow,noindex">https://parg.co/bOF</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650310930012" rel="nofollow,noindex">《Angular的模块间通信》</a> ：模块是Angular的构建单元，Angular应用程序的所有可视化元素也是由模块构建的。当我们把模块拆散成更小的模块时，我们就要确保它们可以把数据传来传去。到那时候，恰当地模块间通信机制就成了我们应用程序的基础，可以让所有的数据都保持同步状态。( <a href="/misc/goto?guid=4959742650310930012" rel="nofollow,noindex">https://parg.co/bOD</a> )</p> </li> </ul> <h2>工程实践</h2> <p>立足实践，提示实际水平</p> <ul> <li> <p><a href="/misc/goto?guid=4959742650404692118" rel="nofollow,noindex">《前端代码测试概述》</a> ：作者在本系列文章中介绍了前端代码测试的相关概念与实践技巧，包括了单元测试、集成测试、端到端测试等多个方面。( <a href="/misc/goto?guid=4959742650404692118" rel="nofollow,noindex">http://6me.us/posk</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650497889032" rel="nofollow,noindex">《以组件为中心的 React 懒加载》</a> ：React Loadable 是以组件为中心的懒加载框架，其基于 Webpack 2 提供的 import 提供的异步代码分割与加载功能进行了一系列的封装。( <a href="/misc/goto?guid=4959742650497889032" rel="nofollow,noindex">http://6me.us/mNHi</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650591859747" rel="nofollow,noindex">《另一种 CSS 压缩思路》</a> ：本文作者提出了一种新的 CSS 压缩思路，有可能会损坏原有的 CSS 文件，不过其压缩比率相较于现有的通用 CSS 压缩策略会更为优秀。( <a href="/misc/goto?guid=4959742650591859747" rel="nofollow,noindex">https://luisant.ca/remynifier</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650682872120" rel="nofollow,noindex">《来自 Vixlet 的 React 优化策略》</a> ：在过去的数年中，来自 Vixlet 的前端开发团队一直使用 React 与 Redux 的开发架构，本文即是该团队分享其在开发过程中发现的 React 优化策略的介绍。( <a href="/misc/goto?guid=4959742650682872120" rel="nofollow,noindex">http://6me.us/dx5</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650777522967" rel="nofollow,noindex">《PWA 在饿了么的实践经验》</a> ：本篇旨在和大家分享「饿了么 M 站」（ <a href="/misc/goto?guid=4959742650870374527" rel="nofollow,noindex">https://h5.ele.me/msite/</a> ）在 PWA 改造中的实践经验。涉及到的方面有：PWA 线上部署的准备工作、多页应用的 prerender 优化、实践过程中踩到的（和推进解决的）坑。( <a href="/misc/goto?guid=4959742650777522967" rel="nofollow,noindex">https://parg.co/bO7</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742650960718572" rel="nofollow,noindex">《滴滴 webapp 5.0 Vue 2.0 重构经验分享》</a> ：滴滴的 webapp 是运行在微信、支付宝、手 Q 以及其它第三方渠道的打车软件。借着产品层面的功能和视觉升级，我们用 Vue 2.0 对它进行了一次技术重构；本文即是本次重构中的经验分享。( <a href="/misc/goto?guid=4959742650960718572" rel="nofollow,noindex">https://github.com/DDFE/DDFE-...</a> )</p> </li> </ul> <h2>深度阅读</h2> <p>深度思考，升华开发智慧</p> <ul> <li> <p><a href="/misc/goto?guid=4959742651048614255" rel="nofollow,noindex">《2017 成为专业 Web 开发者的学习路线图》</a> ：作者在此文中以图表的方式展现了 2017 年中如果想成为专业的 Web 开发者，应该在 Web 前端、服务端以及 DevOps 领域所需要学习到的技术栈以及进阶路线图。( <a href="/misc/goto?guid=4959742651048614255" rel="nofollow,noindex">http://6me.us/W0k</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742651148586777" rel="nofollow,noindex">《关于 JWE 安全漏洞的讨论》</a> ：JSON Web Token 是基于 JSON 的访问令牌创建标准（RFC 7519），本文则是介绍了 JWE 面对的 Invalid Curve Attack 原理以及受影响的开源库等内容。( <a href="/misc/goto?guid=4959742651148586777" rel="nofollow,noindex">http://6me.us/D0iKp</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742651240202865" rel="nofollow,noindex">《wasm_lua》</a> ：wasm_lua 提供了能够运行于 WASM 环境下的 Lua 虚拟机，未来基于 Lua 构建前端框架也是个可行的选择 。( <a href="/misc/goto?guid=4959742651240202865" rel="nofollow,noindex">https://github.com/vvanders/w...</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742651338804694" rel="nofollow,noindex">《U.S. Web 设计标准》</a> ：近日 U.S. 官方网站的样式与视觉设计指南 1.0.0 版本发布，包含了大量的 Bug 修复与反馈修正。( <a href="/misc/goto?guid=4959742651338804694" rel="nofollow,noindex">https://parg.co/bO1</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742651434498143" rel="nofollow,noindex">《Preact 内部原理探秘》</a> ：Preact 是提供了类似于 React API 不过速度更快、包体更小的 React 替代包，本系列文章是 Preact 的开发者介绍其内部工作原理 。( <a href="/misc/goto?guid=4959742651434498143" rel="nofollow,noindex">https://parg.co/bOj</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742651539018821" rel="nofollow,noindex">《扩展JS应用在架构性取舍上应关注八点要素》</a> ：如果想要构建可扩展的软件，可以从很多角度来思考软件架构。但是如果每个角度都去考虑，根本不可能做出想要的软件。这就是为什么需要从架构的角度对设计进行取舍：取我们最需要的，舍次要的。。( <a href="/misc/goto?guid=4959742651539018821" rel="nofollow,noindex">https://parg.co/bOn</a> )</p> </li> </ul> <h2>开源项目</h2> <p>乐于分享，共推前端发展</p> <ul> <li> <p><a href="/misc/goto?guid=4959741848015890077" rel="nofollow,noindex">《手淘发布 Atlas》</a> ：手机淘宝安卓客户端容器化框架 Atlas 正式宣布开源。Atlas由阿里巴巴移动团队自研，以容器化思路解决大规模团队协作问题，实现并行开发、快速迭代和动态部署，适用于Android 4.x以上系统版本的大小型App开发。 ( <a href="/misc/goto?guid=4959742651667750374" rel="nofollow,noindex">https://github.com/alibaba/at...</a></p> </li> <li> <p><a href="/misc/goto?guid=4959742651775041215" rel="nofollow,noindex">《Animista》</a> ：Animista 是开箱即用的 CSS 动画库，其作者还发布了非常易用的在线预览与选择站点，适合于设计人员选择合适的动画效果。( <a href="/misc/goto?guid=4959742651775041215" rel="nofollow,noindex">http://animista.net/</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742651885178653" rel="nofollow,noindex">《Quokka.js》</a> ：Quokka 能够帮助我们在常用的编辑器（譬如 VSCode）中快速建立原型试验场，包括了行内错误提示、代码测试与覆盖率提示、富文本输出格式化等等。( <a href="/misc/goto?guid=4959742651885178653" rel="nofollow,noindex">https://quokkajs.com/</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742651981191391" rel="nofollow,noindex">《Guetzli》</a> ：Google 宣布开源新的 JPEG 编码器 Guetzli，与现有的压缩编码工具相比，其能够减少近 35% 的文件尺寸而依然保持图片质量。( <a href="/misc/goto?guid=4959742651981191391" rel="nofollow,noindex">http://6me.us/AM7a</a> )</p> </li> <li> <p><a href="/misc/goto?guid=4959742652098910911" rel="nofollow,noindex">《wasm-loader》</a> ：wasm-loader 是能够用于 Webpack 的 WASM 二进制模块导入工具，其能够允许你在 JavaScript 代码中导入 wasm 格式文件并且将二进制文件打包成为 JS Bundle 的一部分 。( <a href="/misc/goto?guid=4959742652098910911" rel="nofollow,noindex">https://github.com/ballercat/...</a> )</p> </li> </ul> <h2> </h2> <p> </p> <p>来自：https://segmentfault.com/a/1190000008765773</p> <p> </p>