《Google力推的那些前端技术,最近有何进展?》笔记

Google是一个伟大的公司,有很多伟大的产品。从Google一直不做桌面系统和对Chrome的大力发展来看,Google对前端事业是非常热衷的。

Angular

Angular、React、Vue是目前前端框架的三驾马车。我在16年9月写过一篇文章《温故而知新-AngularJS 1.x 小记》,当时还叫AngularJS,版本是1.X,那时已经很惊艳了,把前端解释性的脚本语言封装成了面向对象的编程模式,另外对HTML的元素维护提供了便利的方式方法。当时我负责的BPM产品,Process Builder的前端架构果断更新为了AngularJS。时隔两年多,Angular 6都已经发布了,如果我还有机会做前端产品的话,我应该还是会果断选择Angular。

Angular 6 添加了ng update和ng add这样的新功能,让你的应用程序保持最新的状态,帮助Angular开发者加快创新的步伐。渲染器Project Ivy也有很大的改进,它能使Angular调试更容易,以更快地速度编译和运行,它还可以与现有的应用程序一起使用,Angular团队还在小型Hello World应用程序做了演示,不使用的Angular功能将自动从应用的JavaScript bundle自动删除。

PWA

在移动的世界里,Application是重中之重,是构建移动生态的核心。那么构建Mobile App的方式的问题就来了。

  • Native App:既用iOS的原生语言OC、Swift或Android原生语言Java构建的App。
  • Web App:既使用前端框架和技术(Angular、React、Vue,HTML 5,CSS 3等)构建的,在移动设备上运行展现的App。
  • Native & Web App:原生语言和Web技术混搭构建的App。这类App还孕育出了像React Native这种使用前端语言解析为原生语言的框架。

以上三种类型各有利弊:

  • Native App给用户的体验是最好的,交互动画效果平滑,可以基于硬件的性能做优化等。但是研发周期比较长,并且因为iOS和Android应用的审核机制,导致版本更新周期比较长,修复完问题或有新需求增加后无法做到及时更系用户设备上的App。
  • Web App可以做到版本的热更新,研发周期短,Web端和移动端可共享研发资源。但是用户体验比较差,一些需要使用到硬件功能不好实现。
  • Native & Web App则致力于综合他们的优点,规避他们的缺点。

Progressive Web App(PWA)就是Google推出的提升Web App体验,给用户原生应用体验的框架。主要特点包括:

  • 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现。
  • 体验 - 快速响应,并且有平滑的动画响应用户的操作
  • 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面
    目前已支持Android,iOS 11.3以后版本,Safari,Chrome,MS Edge。

Service Worker

Service Worker是Chrome团队力推的一个Web API,它将开发人员从页面的生命周期中解放出来,运行于浏览器后台,可以控制打开作用范围下的所有页面请求,使Web应用程序能够脱机工作,打开了通向不需要网页或用户交互的功能的大门。目前,它们已包括如推送通知和后台同步等功能。将来,还会支持如定期同步或地理围栏等其他功能。

服务工作线程相关注意事项:

  • 它是一种 JavaScript 工作线程,无法直接访问 DOM。 服务工作线程通过响应 postMessage 接口发送的消息来与其控制的页面通信,页面可在必要时对 DOM 执行操作。
  • 服务工作线程是一种可编程网络代理,让您能够控制页面所发送网络请求的处理方式。
  • 它在不用时会被中止,并在下次有需要时重启,因此,您不能依赖于服务工作线程的 onfetch 和 onmessage 处理程序中的全局状态。如果存在您需要持续保存并在重启后加以重用的信息,服务工作线程可以访问 IndexedDB API。
  • 服务工作线程广泛地利用了 promise,因此如果您不熟悉 promise,则应停下阅读此内容,看一看 Promise 简介。

WebAssembly

WebAssembly是由主浏览器厂商组成的W3C社区团体制定的一个新的规范。是一个字节码技术的底层编程语言,是一种编译性语言,它能使网站能够运行用C或C ++等语言编写的高性能低级代码,为Web打开了新世界,今年3月,来自Autodesk的AutoCAD就采用了35年前的代码库,并用WebAssembly编译让其直接在浏览器中运行,这意味着,无论你的设备或操作系统如何,你都可以直接在浏览器中用CAD绘图。

同样是增强Web交互和承载内容的工具。

Polymer

Polymer 是Google主推的一个 JavaScript 库,它可帮助你创建自定义的可重用 HTML 元素,并使用它们来构建高性能、可维护的 App。它的目的就是使用可重用的、可组合的、可视的功能组件组装现代的移动 Web 应用程序。

AMP

Accelerated Mobile Pages(AMP)是Google带领开发的开源项目,目的是为提升移动设备对网站的访问速度。主要分为AMP HTML、AMP JS、AMP Cache三部分:

  • AMP HTML是描述网页所用的标记语言,相当于普通网页使用的HTML之亚种。AMP HTML在图像显示等方面使用与HTML不同的专用标签,另外还限制了HTML部分功能的使用。
  • AMP JS是一套JavaScript库,保证AMP HTML的正确和快速显示。除此之外,AMP JS还负责在只支持普通HTML的浏览器中担任桥梁,使其能正确支持AMP HTML的专用功能。AMP HTML中可以调用该函数库。
  • AMP Cache是缓存并传输AMP页面的CDN,进一步提高AMP网页的性能。用户在搜索引擎中点击AMP网页时,实际上访问的是优化后的缓存页面。Google的AMP Cache名为Google AMP Cache。

Lighthouse

Lighthouse是一个分析网络质量的工具,为你提供网站性能衡量指标和指导,它可以直接从Chrome DevTools内部进行访问,从命令行运行或与其他开发产品集成,仅在2018年,就有50万开发人员在他们的网站上运行Lighthouse。

总结

以上技术几乎是一套构建高性能高质量Web App的组合套装。Angular作为构建Web App的总框架,使用Polymer和AMP保证性能,使用PWA和Service Worker使Web App达到原生的体验,使用WebAssembly进一步增加Web App的交互和展示内容,最后使用Lighthouse对性能质量监控护航。

阅读文章:《Google力推的那些前端技术,最近有何进展?》

分享到: