[译] 使用 JS 框架创建渐进式 Web 应用程序（PWA）

内容简介：[译] 使用 JS 框架创建渐进式 Web 应用程序（PWA）

|   译者 :  京东金融-移动研发部-前端开发工程师 沈霍伊

在最近的谷歌开发者大会（Google I/O,）上，Addy Osmani（engineering manager，Google） 公开了一些奇妙的开发者资源，用于创建渐进式Web应用，并优先考虑js框架的性能。

这些资源离不开一个团队的努力，有很多人为此工作。对社区而言，这也是非常有价值和贡献的。很多开发者期望选用的框架拥有更好的性能，但是却没有时间和资源去为此努力。而这些新资源具有高性能和高评分（Lighthouse页面性能跑分  https://developers.google.com/web/tools/lighthouse/?hl=zh-cn ），以具备这种能力的框架为基础进行开发是极有价值的。开发者利用它们可以享受开发效率和工程效能，同时不必牺牲开发速度和人力。

亮点  

Addy Osmani创建了一个网站来研究和展示，他使用不同的PWA解决方案建立对应的模板，作为非常流行的TodoMVC网站的继任者，被称为HN PWA， https://hnpwa.com 这些，后来都通过了一些大公司的实践，即用PWA的方式重构每一个框架。纵观Addy Osmani介绍的众多案例研究，许多重要特性是建立于link rel=preload, requestIdleCallback(), and HTTP2 Server Push https://www.smashingmagazine.com/2017/04/guide-http2-server-push 等新技术/标准之上，这些都为建立更好的web体验而生。其中， PRPL pattern https://developers.google.com/web/fundamentals/performance/prpl-pattern 技术被多次提及，它是一种用于结构化和提供PWA的模式，该模式强调应用交付和启动的性能，

•   推送 - 为初始网址路由推送关键资源。

•   渲染 - 渲染初始路由。

•   预缓存 - 预缓存剩余路由。

•   延迟加载 - 延迟加载并按需创建剩余路由

本质就是通过这些手段，优先处理你希望首先使用的资源。许多性能突出的框架，都有在移动端5秒内（容忍阀值，如果页面需要花5秒时间去渲染展示，那么用户都会很快变得不耐烦。5秒是极端情况，比如弱网等）完成交互的能力，并且力求减少框架自身的开销，这样你就有更多时间在5秒内跑自已的程序。

React  

React宣称创建一个React APP时即将默认为PWA模式！这是一个巨大的进步。现在他们将运用离线缓存优先策略，动态导入分割代码，错误覆盖和定位等技术，将为你的应用程序争取1.5s的运行时间。更多详细进 https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html 。

Preact  

Preact现在已经支持命令行模式。正如在大会上宣称的，这是一个给人惊喜的进展，你值得拥有！项目传送门 https://github.com/developit/preact-cli ，至于其它牛掰的特性，你可以在readme中查找到。它的性能跑分非常的不错（一个DEMO，去看看 https://googlechrome.github.io/lighthouse/viewer/?gist=142af6838482417af741d966e7804346 ），同时还为你的应用程序争取到多达3s的运行时间。

如果你对它不太熟悉，不用着急，它是一个非常快捷，本身的bundle在gzip后大概只有3kb大小的React的替代框架，有着相同的API，包括组件和虚拟DOM等。虽然很像React，但是在设计时就限定了它只是一个很小的资源，所以，唯一需要注意的是，由于Preact强调轻量级，在react生态中的支持产品还没有达到天衣无缝的程度。 即便如此，Preact在性能上也是胜利者，也许有一天社区中的很多项目都会用到这一解决方案。

Vue  

Vue宣布了一个PWA版本，直接由Vue-cli提供，只需vue init pwa即可初始化。

它拥有众多不错的特性，比如，能够为你的程序在移动端争取到2s的空余时间，具备动态导入分割代码，离线缓存优先，js块预加载或预获取等能力。

如果你不熟悉Vue，可来这里看看 https://css-tricks.com/guides/vue/ 。我认为Vue是一款神奇的框架，它有能力击败lighthouse所有的测试，这实在是令人惊讶。这一版本的开发流程令其能够轻易创建一些美观且复杂的APP。

太多细节难以尽言，Addy Osmani是一个天才的讲演者，他甚至为演讲开发了一个视频游戏，不妨去看看他的整个演讲 https://www.youtube.com/watch?v=aCMbSyngXB4&feature=youtu.be ，你将因此受益。

作者：SARAH DRASNER 

原文链接： https://css-tricks.com/production-progressive-web-apps-javascript-frameworks/

以上所述就是小编给大家介绍的《[译] 使用 JS 框架创建渐进式 Web 应用程序（PWA）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 渐进式动画解决方案
• vuex 渐进式教程（一）
• 渐进式 Unbundled 开发工具探索之路
• React Fiber 渐进式组件遍历详解
• 大数据系统云原生渐进式演进最佳实践
• 大讲堂 | 渐进式神经网络结构搜索

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。