Google I/O 2018 已于上周落下帷幕, 普通民众看的是新产品, 开发者们关注的是新技术. 透过这次大会, 我们不难发现, Google 已经从 mobile first 转向 AI first,AI 之后, 就是移动和前端技术了, 移动无非是 Android P 和 Flutter 等, 前端涵盖的技术从 web 框架到 Web 工具, 包括 Angular,PWA,polymer,AMP 等, 下面让我来为大家捋一捋 Google 力推的这些前端技术最近都有哪些进展.
Angular
Angular 是前端三大框架之一, 它与 React,vue 的 "争斗" 一直都没有停止过, 经过 Angular 团队和开发者们的努力, Angular 已经建立了拥有上百万开发者规模的社区和生态系统. 在今年 I/O 大会开始的前几天, Angular 6 正式发布 https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247488834&idx=1&sn=7032a6aee78a15f04207726a271133f1&chksm=f951a001ce262917d9dc8e96cc7b50ae355956737d6c0e3285d5d32b4891b3345c65190ffa9b&scene=21#wechat_redirect , 添加了 ng update 和 ng add 这样的新功能, 让你的应用程序保持最新的状态, 帮助 Angular 开发者加快创新的步伐.
Angular 渲染器 Project Ivy 也有很大的改进, 它能使 Angular 调试更容易, 以更快地速度编译和运行, 它还可以与现有的应用程序一起使用, Angular 团队还在小型 Hello World 应用程序做了演示, 不使用的 Angular 功能将自动从应用的 JavaScript bundle 自动删除.
PWA
PWA 应该是这两年前端最火的技术之一了吧. Google 声称世界各地各行业在在 PWA 的构建上都获得了很大的成功, 星巴克在推出 PWA 网站后, 日活跃用户数量增加了 2 倍, 他们对广告网站进行测试, 发现当一个网站切换到 PWA 时, 平均转化率提高了 20%.
PWA 近期动态:
早期的 PWA 主要专注于移动设备, 但是由于平台限制, iOS 无法支持, 但是今年年初, 终于迎来了好消息, 苹果宣布 iOS 11.3 将迎来 PWA https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247488120&idx=1&sn=c4e8411b9752b708a2ca6728fe5ab190&chksm=f951a73bce262e2db548337879f1e6c1af39ad6d19a96ee475819de3585d7db1b66303770e24&scene=21#wechat_redirect , 这使得开发跨平台的 PWA 成为了可能.
2 月, 微软着手在 Windows 商店中增加 PWA, 宣布渐进增强式 Web 应用将在 Win10 系统上线.
2 月底, PC 端的 Chrome 正式支持 PWA, 具体实现方式可参考 本篇文章 https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485449&idx=1&sn=af3c79f7ebd3ed32c809dccfdab28e4e&chksm=f951bd4ace26345cd6fc7c6f805e9df8b2ef713191c7fbc80d5060bce54e61170b3e79be6b19&scene=21#wechat_redirect .
I/O 大会上, Google 宣布今年 6 月, Chrome 67 将支持 PWA"安装" 到桌面上, 同时保留在浏览器中查询的功能, 如在页面中查找, 共享网址, Google Cast 支持等, 下图为 Spotify 部署桌面 PWA 后的部分体验.
Service Worker
Service Worker 是近年来 Web 最大的改进之一, 它是 Chrome 团队力推的一个 Web API, 它将开发人员从页面的生命周期中解放出来, 运行于浏览器后台, 可以控制打开作用范围下的所有页面请求, 使 Web 应用程序能够脱机工作.
今年三月, 苹果宣布 iOS 和 MacOS 上的 Safari 11.1 支持 Service Worker,4 月底, 微软也宣布 Microsoft Edge 也将支持 Service Worker, 这意味着现在所有的主流浏览器都支持 Service Worker 了.
为了使用过程更简便, Service Worker 开发团队创建了 Workbox 库, 它能将许多常用的, 强大的 service worker 模式封装到易于使用的 API 中.
- Workbox:
- https://developers.google.com/web/tools/workbox/
- WebAssembly
WebAssembly 使网站能够运行用 C 或 C ++ 等语言编写的高性能低级代码, 为 Web 打开了新世界, 今年 3 月, 来自 Autodesk 的 AutoCAD 就采用了 35 年前的代码库, 并用 WebAssembly 编译让其直接在浏览器中运行, 这意味着, 无论你的设备或操作系统如何, 你都可以直接在浏览器中用 CAD 绘图.
Polymer
Polymer 是 Google 主推的一个 JavaScript 库, 它可帮助你创建自定义的可重用 html 元素, 并使用它们来构建高性能, 可维护的 App.
在 I/O 大会上, Google 推出了 Polymer 3.0,Polymer 3.0 致力于将 Web 组件的生态系统从 HUML Imports 转移到 ES Modules, 包管理系统将支持 npm, 这使你更容易将基于 Polymer 的 web 组件和你喜欢的工具, 框架协同使用.
AMP
AMP 是 Google 推出的一种为静态内容构建 Web 页面, 提供可靠和快速渲染, 加快页面加载速度的 Web 组件库. 目前为止, 来自 4600 万个域名的网页已经超过 60 亿个, 他们在 Google 搜索的平均加载速度不超过 1 秒.
由于移动内容消费正在往全屏, 简练的排版风格转变, 为了满足内容发布商的需求, APM 团队日前宣布开发了 AMP stories, 它是一套为 mobile-first storytelling 开发的 Web 组, 它支持原生视频和图像, 具有丰富的视觉效果, 可通过动画和可点击的交互方式来讲故事, 这对于突发事件的新闻报道具有重要作用, 因为有时候图片能更直观和快速地向读者表达意思.
Lighthouse
Lighthouse 是一个分析网络质量的工具, 为你提供网站性能衡量指标和指导, 它可以直接从 Chrome DevTools 内部进行访问, 从命令行运行或与其他开发产品集成, 仅在 2018 年, 就有 50 万开发人员在他们的网站上运行 Lighthouse.
本月初, Lighthouse 3.0 发布, 最新的版本对网站的审核速度会更快, 具有全新的报告界面, 更多更新内容, 可进入 Lighthouse 官网查看.
链接:
https://developers.google.com/web/updates/2018/05/lighthouse3
参考链接
https://blog.chromium.org/2018/05/the-state-of-web-at-google-io-2018.html
来源: https://juejin.im/entry/5afeab196fb9a07ab458e0cb