写点什么

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

  • 2018-05-24
  • 本文字数:1991 字

    阅读完需:约 7 分钟

看新闻很累?看技术新闻更累?试试下载 InfoQ 手机客户端,每天上下班路上听新闻,有趣还有料!

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 正式发布,添加了 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 ,这使得开发跨平台的 PWA 成为了可能。
  • 2 月,微软着手在 Windows 商店中增加 PWA,宣布渐进增强式 Web 应用将在 Win10 系统上线。
  • 2 月底,PC 端的 Chrome 正式支持 PWA,具体实现方式可参考本篇文章
  • 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

2018-05-24 14:427969
用户头像

发布了 83 篇内容, 共 48.8 次阅读, 收获喜欢 187 次。

关注

评论

发布
暂无评论
发现更多内容

视频下载软件Downie 4 for Mac

Mac相关知识分享

项目管理职业发展:需要掌握的能力

爱吃小舅的鱼

项目管理 管理项目 项目管理能力

如何利用9款工具提升开发需求管理效率

爱吃小舅的鱼

需求管理 需求管理工具 开发需求管理

8款需求管理工具,如何提升团队效率

爱吃小舅的鱼

需求管理 需求管理工具 需求管理软件

接龙工具(源码+文档+部署+讲解)

深圳亥时科技

振兴帮扶监测系统(源码+文档+部署+讲解)

深圳亥时科技

Photoshop CC 2019 for Mac中文直装版

Mac相关知识分享

鸿蒙开发案例:分贝仪

zhongcx

鸿蒙

强大的音乐制作软件Ableton Live 12 Suite for mac

Mac相关知识分享

crossover运行命令是什么,怎么用crossover运行exe程序

阿拉灯神丁

windows 命令行 CrossOver Mac下载 Mac电脑软件

鸿蒙适配一多搭建首页框架

龙儿筝

鸿蒙

鸿蒙开发案例:直尺

zhongcx

社区人员管理系统(源码+文档+部署+讲解)

深圳亥时科技

搭建一个pandabuy淘宝代购集运系统大概需要多少成本?

tbapi

Pandabuy 反向海淘系统

如何帮助公司应对快速变化的技术趋势

爱吃小舅的鱼

技术趋势 员工培训 技术变化

技术债务如何影响新功能开发的效率

爱吃小舅的鱼

技术债务 新功能开发

Microsoft Office 2019 for Mac正式版

Mac相关知识分享

XMind for mac (XMind思维导图)中文版

Mac相关知识分享

FaceTime成诈骗“帮凶”,苹果是怎么一步步丢掉“安全”光环的?

脑极体

AI

荒谬的中台逻辑

agnostic

中台战略

定时导出数据库数据并备份到gitee和邮箱

JYeontu

MySQL 数据库 前端 Node 数据备份

2024年文档管理系统排名:十大工具深度对比

爱吃小舅的鱼

文档管理 文档管理软件 文档管理工具

汽车虚拟仿真软件有哪些?行业软件大盘点!

3DCAT实时渲染

汽车三维可视化 汽车虚拟仿真 实时云交互

揭秘雅通自动化柴油发电机组中的''黑科技''

雅通机电

柴油发电机组 雅通机电

项目管理人员的职业规划:从新手到专家

爱吃小舅的鱼

项目管理 企业管理工具 管理项目

项目管理人员的职业规划与发展策略

爱吃小舅的鱼

项目管理 管理项目 敏捷工具

高并发编程/并行任务组件ForkJoinPool设计图分解(高手篇)

肖哥弹架构

Java 并发编程 高并发

高并发编程/并行任务组件ForkJoinPool工作窃取算法设计思路分析

肖哥弹架构

Java 并发编程 高并发

电子文档管理软件选购指南:9款产品深度对比

爱吃小舅的鱼

文档管理 文档管理工具 电子文档

企业必须知道的8款研发需求管理工具,提升效率的秘密

爱吃小舅的鱼

需求管理 需求管理工具 需求管理软件

《使用Gin框架构建分布式应用》阅读笔记:p393-p437

codists

golang gin 编程人 codists

Google力推的那些前端技术,最近有何进展?_Google_覃云_InfoQ精选文章