报名参加CloudWeGo黑客松,奖金直推双丰收! 了解详情
写点什么

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:428064
用户头像

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

关注

评论

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

低代码四大典型使用场景,你都知道吗?

飞算JavaAI开发助手

"鸿蒙生态专家面对面"三月专场等你前来!

HarmonyOS开发者

使用价值三角方法来全方位分析产品

产品海豚湾

产品 产品经理 产品设计 产品运营 商业洞察

NodeJS 实战系列:模块设计与文件分类

光毅

JavaScript node.js

聊聊「订单」业务的设计与实现

Java 架构 订单管理 订单系统 订单

Toast的基本使用

芯动大师

android Adapter toast

PyTorch深度学习实战 | 基于ResNet的人脸关键点检测

TiAmo

深度学习 人脸识别 PyTorch

Nacos心跳机制实现快速上下线

做梦都在改BUG

Java Spring Cloud nacos 心跳机制

优秀软件工程师必备的五大技能,快看你还差什么?

飞算JavaAI开发助手

在追求卓越的路上,面对压力时,推荐你这二个做法。

叶小鍵

Next.js 实践:从 SSR 到 CSR 的优雅降级

Crazy Urus

React nextjs SSR

在 windows 上连接 wsl 和直接打开 ubantu 有什么区别?

玄兴梦影

wsl window

Go语言实现策略模式

蓬蒿

策略模式

vivo 短视频用户访问体验优化实践

vivo互联网技术

CDN HTTP 优化 DNS 实践

内部开发者门户是什么?

SEAL安全

微服务 企业号 3 月 PK 榜 内部开发者门户 信息碎片化

设计模式-策略模式

蓬蒿

设计模式 策略模式

百度生成式AI产品文心一言邀请测试,五大场景、五大能力革新生产力工具

飞桨PaddlePaddle

百度 飞桨 文心一言

MongoDB源码学习:执行创建Collection命令

云里有只猫

mongodb 源码解析

如何快速理解网络IO模型

Dinfan

Netty 事件循环 IO模型 Reactor多线程 网络io模型

深圳.NET线下技术沙龙倒计时一天

MASA技术团队

.net MASA

openGemini正式加入openEuler DB SIG,携手开展全方面技术创新

华为云开源

时序数据库

GPT-4炸圈--多模态大模型

江湖修行

人工智能 大模型 GPT ChatGPT GPT-4

DevData Talks 直播预告 | 微众银行的研发效能实践有哪些经验?

思码逸研发效能

研发效能 DevData Talks

Matlab常用图像处理命令108例(七)

timerring

图像处理

李彦宏文心一言发布会 highlight

B Impact

如何测试一个AI系统?

陈磊@Criss

AI 测试

使用 Athena (Presto) 分析本地 Oracle 数据库导出的数据

亚马逊云科技 (Amazon Web Services)

Capital

Echo_Wish

学习 进步 笔记 资源 本质

如何应用BI系统运营提效,一起看看瓴羊Quick BI的表现

对不起该用户已成仙‖

想到哪说到哪的AI

FN0

AIGC

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