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

2019阿里云全部产品优惠券(好东东,强烈推荐)
领取地址 https://promotion.aliyun.com/ntms/yunparter/invite.html

推荐:[转]学习使用 Agavi 框架构建可伸缩的 Web 应用程序

[ Vikram Vaswani, 创始人, Melonfire 2009 年 8 月 27 日 这是分为 5 部分的系列文章的第 1 部分。该系列是为对开源、灵活并且可伸缩的 Agavi 框架感兴趣的 PHP 开发

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

在最近的谷歌开发者大会(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 。

推荐:HTML5移动Web应用程序的JavaScript 框架

[Sencha Touch 2是一个高性能的HTML5移动框架,一个端到端的设计,开发和部署HTML5应用平台的基石。它让你轻松开发移动Web应用程序,并且功能可以与iPhone,Android和Black

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/

推荐:使用 Mavo 快速开发 Web 应用程序简介,第 1 部分: 开源 Web 应用程序框架 Mavo 入门

[使用 Mavo 快速开发 Web 应用程序简介,第 1 部分 开源 Web 应用程序框架 Mavo 入门 了解 Mavo 属性和表达式 Uche Ogbuji 2018 年 2 月 28 日发布 系列内容: 此内容是该

相关推荐