译者:Yocy
在2014年的时候,我有幸被邀请到阿姆斯特丹前端会议去演讲(我衷心的推荐这个平台)。我当时试着去讨论关于web这个平台的走势——包括过去、现在和未来。
我曾经在 The Lumpy Web 中提到过现在 web 的状态,包括了不一致的功能支持以及由此而导致的开发人员的痛苦。关于我对web未来的看法,我简要的用""The headless web""来说。
我们当中的很多人熟知""Headless Browser""的概念,它具有浏览器的功能,但是用户并不能看见或者与其进行交互,并且对于大多数人来说,这些“无头”浏览器就好像不存在一样(译者注: 如PhantomJS)。对于开发者来说,我们经常用这种浏览器来进行用户交互的自动化测试。如果你进一步了解,你会发现许多现代的搜索引擎后面都有这样的无头浏览器, 它可以解释执行JavaScript, 这样你在自己电脑上用你喜爱的前端框架描述的内容仍然能被它渲染并且把数据添加到可搜索条目中。但是在我看来,无头浏览器给我们提供了更多的可能,实际上我认为他们会成为未来商业web服务的核心,我会在这篇文章中满怀希望的讲解这个理念。
我认为的“无头”web就是以前的网页,用户只需要在浏览器中和网页进行少量的交互。作为替代的是,用户体验到的仍然是用HTML表现的内容和JavaScript驱动的交互,但是你可能只访问某个页面一次就和其建立了长久的联系,虽然你可能再也不会直接访问这个页面。
我理解的这种概念是至少四种的类型的交互:
-
与提示窗口交互 —— 网页或应用应该创建一个小应用用于交互,这样用户体验像是直接与其互动,例如一张照片。没有必要用一整个页面来进行交互。我早期对于这种“无头”交互的看法是这是服务端开发者的工作。
-
按需下载,又名""物理网络""(译者注:此物理网络不是IoT,详见""The Physical web""),URLs被广播在你的周围,你可以按照你的需求通过像 schema.org 这样的标记集合提取所需的内容,然后与其进行交互。利用这种方法购买电影票胜过于你去一个特定的站点购买,它被直接整合到一系列的标记集合中。
-
嵌入内容——谷歌现在就是这种类型的例子,数据在一个页面中通过HTML或schema.org的方式被呈现出来,并且他提供给用户的形式可能和他在页面中本身表现的形式不一样。例如电影列表可能会被集合在一起,而且页面还会向其它站点申请有关排名和预览的数据。
-
原生混合内容——又名 ""WebView""。如果你花很多时间在Facebook和微信上面时,你会与web进行交互,但是你可能并不知道这一切的发生,如果你关注这方面的进展,你会发现越来越多的传统浏览器正在被这种原生应用取代。
这些证明了,对于没有浏览器的web,我们可以想到很多种应用方式,而且这是我有段时间曾经研究过的。
关于这个既有悲观方面的也有乐观的方面:
- 悲观的看法:它意味着web开发者和UI设计者的终结,最极端的可能是整个web的终结。
- ** 乐观的看法**:内容是开放的,随处都可以获取的,并且比以前任何时候都更好组织,web统一世界。
让我们把目光转移到2015年,那时候 Kennth Auchenberg 在 Coldfront Conf 2015和我谈论有关这种“无头web”(说起惭愧,当时我并没有直接回答这个问题)。 我转而用和各种元平台的兴起更直接联系的移动端web的未来来表述“无头web”.
我们的用户在屏幕上所看到的web是通过安装在iOS上的Safari和安卓上的Chrome浏览器来呈现的,这正是我们所担心的。我们的web每次只有通过浏览器才能获取和可利用,web开发人员担心有些事情正在发生改变。
我们正在创造的工具和内容在被消费的时候不再是通过传统的web浏览器。我看到这种方式出现在在一些新闻和社交和其它应用程序中。
- Apple News
- 谷歌的 AMP计划(我认为这不是我以前谈论的元平台)
- Facebook 上的 WebView 和即时类文章
- Chrome custom tabs
- 微信以及其它的移动社交应用所包含的平台
更加让人兴奋的是这些应用上的平台能够控制展现体验,它们可以将应用的功能和API接入到web中,我打算以后详细的接触这些。
桌上的赌注
我对模仿原生应用的 web 应用(Progressive Web Apps)概念越来越感到兴奋。它们允许我们去表现和组织web应用,使得web应用能够像我们期望的那样工作——在瞬间被访问加载并提供轻量的、擅长的服务。
Progress web 应用是一个关于现代 web 体验的桌面赌注, 为什么这么说呢?
我已经关注了 web 这个平台能够具有什么样的功能以及过去三四年间 web 发生了怎么样的巨大变化。
(译者注:这里原本有一张图片,但我就算接了 VPN 也没有打开)图片
但是我也曾表述过,原生应用不是死板的,并且有时候我们认为苹果每年更新一次系统、安卓大约六周更新一次系统是理所当然的(在我写这篇文章的时候)
(译者注:这里原本有一张图片,但我就算接了 VPN 也没有打开)图片
我认为这是对web潜在的威胁, 就像我们正在追赶的原生应用平台迭代。 特别的,谷歌安卓上的Google Play Services有一个 fitness layer in to Android,支持版本可以回退到 Android2.3 版本,而不用改变底层操作系统。
为什么我会开始谈论fitness? 是这样的,这个是一个比较高的抽象传感器API集合,这是我们web中没有的并且正是这突出了web和它的差距。
-
我们的可用的API不够成熟——例如, 传感器仍然是一个没有得到充分解决的问题,我们只能通过借助其他的web扩展(例如 Service Worker)来探索更多的原生功能。
-
我们的发展模式是分散的——在前端和后端我们都有许许多多的框架和库可以选择,这就使得去组织一种明智的发展路径变得困难,并且开发者建立一种新的基元变得困难。
跟随这种原生平台的发展很有趣,我打赌iOS平台很快就会开始逐渐进行大的更新——我认为它会在主屏幕上分类核心应用并且允许它们不用更随iOS系统的更新而更新
正是这种趋势使我担心,看看下面的我八个月前创建的一个表格
(译者注:这里原本有一张图片,但我就算连了 VPN 也没有打开)图片
注意到有什么不同了吗? web 获得了一些新的能力,但是原生应用也获得了更多的连接和即时加载(即时通讯应用), 我不是即时应用的粉丝,即使他们是2015年后推出了 App Streaming——又一个非常不好的实现,无论如何,重点是移动平台。
所有的平台都在SLICE上竞争
Web 正在追赶, Progressive Web Apps 和可扩展平台的概念正在给予我们更多的可能,这也正是我们需要追赶的, 但是我们需要去找出一个解决办法使我们优雅的保持我们的原则——开放性以及SLICE,我认为“无头web”会是这样一个帮助我们解决问题的模型。
假如所有的东西都被 web 控制了,但你又没有看到浏览器那会怎么样
这是一个很大的问题。作为这个行业的人,我们会很高兴用户再也不需要可见的浏览器吗,还是说我们会觉得浏览器是神圣不可侵犯的原则?
在我看来我原先的分类——通知窗口、物理网络、嵌入内容、原生混合——并没有很偏离web平台未来的走向。
服务端这个平台的一部分,允许我们实现上述部分的内容(至少在本地用户级别), 但是它就是真的被集中在本地用户级别。用户不得不去服务器上注册,但是一旦要做一个系统级综合时,可能要求能够快速的构建和部署我们想要的“无头”体验。就目前来时,提示界面仍然是通过UI来提供。
通知窗口
重要的是,这事已经发生了 在英国全民公投来临前, Guardian做了一项尝试,向订阅他们服务的人推送和更新新闻。随着时间推移,你应该适应这种方式,如果你想得到更多的信息,那么你就点击“通知”按钮,反之,你应该快速的取消通知功能。
我只有一张屏幕截图:(但是对于我来说这超越了我以前对于web模型的认知,这真是一种新奇的体验,重要的是,它只会短暂的存在,它被部署在一个简单URL链接上,一旦全民公投结束就会关闭。这种能力是 web 特有的,但是又具有原生应用的特点。原生应用永远不会这么做或者说没有必要这么做)
(译者注:这里原本有一张图片,但我就算连了 VPN 也没有打开)图片
我强烈推荐你读这篇文章the GDN Mobile Lab,它涵盖了许多不同和有趣的体验。
组合服务和嵌入内容
SLICE 中 ""C"" 是 ""composability""(可组合性),指的是可以让你的网站可以包含其他站点的功能和内容。以前这是 web 在web 2.0 时代击败原生桌面软件的诀窍。特别是通过IFRAME,JSONP 和 XMLHttpRequest 等技术建立的‘混血’网站,使得我们可以建立即时获取的、巨大价值的服务。
这是以前很长一段时间中原生应用所没有的,但是现在原生应用也在引入类似的功能。Google Now 就是这样一个例子, 它能够从开放的 web 上面和你本地的环境中获取数据。例如你周边的电影时刻表。
现在数据被包含和集合在了本地应用中,用户可以从中获取。无论如何,你感觉这并不像是把其它应用的逻辑直接植入到你的应用,反而像是原生移动应用代理或者控制其它应用软件(如果你已经安装)。这可能是""语义万维网""(semantic web)的目标, 但在我看来,我们的数据和功能在web站点和app各个平台上使用,并且我们很快就会实现这点。
AMP非常有趣, 它允许在 web 上创造和托管内容,由于这种方式是确定的并且经过验证的,在本地可以用 web 和原生结合的体验来承载内容。AMP的约束设计使得内容植入不需要 iframes这样的技术也能获得丰富的体验。
重点是我们的内容能够在浏览器外轻松、快速地渲染出来
我编造了原生应用上组合服务的谎言: WebViews 和 原生混合内容
我曾经说原生应用不会有能力去轻松快速的组织服务 但现在原生应用真的有了这种能力!每一个平台都用像 WebView 这种类似的方法在原生应用直接渲染 web 内容,虽然目前显得比较笨拙。
WebView 对于用户来说不是一件好事情。在Android这个平台下不会有很好的体验。webview里面的每一件事都是单线程的、可拦截的,并且开发者要去检查你在的应用中的每一个内容。Alex Russell说:“在 WebView 上把任意的内容加到 web 不是很好”
一个更好的解决方案是 Chrome Custom Tabs 和 SafariViewController,他们是具有各个浏览器的功能,能够给你提供浏览器一般的体验:cookie同步、 历史管理、支付、自动填充和安全性良好的沙盒。虽然在大多情况下, 浏览器的界面非常简洁,但还是有时候图标会多得想把浏览器抛弃,然后把相关呈现 web 内容的逻辑移植到 app 中来。
虽然我们已经有了两个有用的工具,网页或者叫 web app,它们只用来渲染绝对需要的内容,几乎不会带来额外的交互。
如果要我来创建例如 Facebook 和微信这样的应用,我永远不会抛弃 WebView, 因为它给了我一个能够自己控制的平台。因为我能管理、检查、操纵WebView 里面的内容,这意味着我可以直接由 web 顶层建立一个混合平台,并且要是我的平台能在世界上被大范围的应用,那么就可以轻松的在自己控制的范围内定制一些不同的元素和交互。如果这能够实现,那么将会构建我自己的一个平台。想象下支付这个例子,你能推断用户将要进行支付,转而就将你最好的体验提供给他。
基于服务端渲染的体验
我们已经有了这样的服务,即通过http协议从服务器上获取完整的HTML代码并试着从中提取出有价值的内容,搜索引擎、爬虫等都是长久以来基于此。但是这种方法已经不够好了,许许多多的站点载入和渲染内容全部都在JavaScript脚本中,这也需要能够被爬取并建立索引。
Bing 看起来好像正在做. Google 正在实现 (PageSpeed)
用浏览器作为一项服务是一个难得的机会。它允许我们去申明HTML,让开发者结合它去定义JavaScript程序执行并且对内容进行深度分析。
浏览器供应商也进入了这场游戏。Opera 和 UC 浏览器已经具有了这样的产品, 当用户正在访问某个服务器的时候,通过高度压缩页面的方式渲染 web 站点的内容,从而给用户节省大量的带宽。
作为一个发展的社区,我们应该吸取浏览器的精华去运行我们的 CI 和 web 页面, PageSpeed Insights 可能是我知道的第一个提供可以运行在服务端浏览器的服务,能够在服务端解析出真实世界用户看到的数据的样子。
这看起来有点像这么回事:任何你在Chrome扩展中能做的事情,你在服务端依然可以做。
如果要去理解存在我们周围的 web,我们需要运行一个无头浏览器,并且这里有几种选择:
我们已经建议过如果想要你的传统页面容易被理解,你应该使用语义化的 HTML 标签。语义化 HTML 标签使在我们页面中表现的文档结构能够被机器人轻易的理解,然后帮助我们的用户和结合微数据, Schema.org让我们在更高层次的语义上把数据描述为""对象"",我们创造除了惊人的 JSON 格式帮助开发者在 web 中编码这些集合数据。
不论错还是对,我们有了能够在页面中表现语义化的工具,我们没有创立什么激励措施让开发者在页面中拥抱语义化。我不确定这能不能完全实现或者可能会消退,因为人工智能将会帮助我们提取内容的意义。
-
Dom Distiller —— 帮助我们扫清页面中没用的内容,让我们沉浸在纯粹的内容中。
-
Metaphor —— 以统一的方式提取页面外的“共享”数据。
-
Mozilla Fathom —— 是一件特别有趣的事情,因为对于我来说,这是对语义化 HTML 能表达开发者意图的致命控诉,我们能写一些测试去找到在页面中用到的小片段。
Fathom 是一个能从 web 页面中提取有用信息的实验框架,主动识别像上一页、下一页、地址表单和其它内容的部分。这个东西本质上就是基于你制定的特定条件对 DOM 节点进行评估并从中提取出它们。一个 Prolog-inspired 类型系统和注释表达需要依赖评分和保持状态控制,它也给你扩展评估条件的自由,而不用直接修改。所以你可以把第三方优良插件也混合进来。
你可以已经注意到了,Distiller 和 Fathom 去掉了渲染的过程,我们说过的我们需要浏览器充分渲染的能力,所以这只是“无头”web 很小的一部分。
我们需要有能力在网页的数据上能够表现行为,不论这些行为能够在数据上被执行,还是我的服务器能够在你的数据上运行。
在我看来, web 的趋势可能会能够去扩展控制类似的事情,但是我也说过一个页面应该在某一部分数据上执行行为,并且你在其他应用程序中需要这些功能的时候能够委托请求执行,比如“修改这张图片”。但是如果你的功能只能在某个页面使用的话,想象下你能够在你的站点中直接安全的植入内容。 类似于APM就是对内容做这种事情,但是我目前还未找到为“行为”工作(我认为自定义标签 可能会有帮助)
在服务端运行一个浏览器允许我们更容易的去建立服务,像那种解析动态数据之类的,能够更好将我们自己的逻辑和页面逻辑(比如表单字段填写)分离开来, 并且我相信这会开放更多的功能能够高效的执行页面中的数据行为。
未来的机遇
渐进式的web apps 是桌面上的赌博。它们能让我们进入这样一个游戏,用户能够同时体验原生应用和优秀的Web体验。我们需要去像用户介绍这种体验是快速的、可靠的、强壮的、随处可获取的,并且要让用户期待这种体验。渐进式的Web apps 给了一个让我们从 web 顶层建立的平台。
服务端将会在未来的“无头”Web体验中扮演重要角色,表面上直接到达用户,实际上被HTML和JavaScript驱动和传递。这会给我一种新的产品,完整的建立在提示窗口交互以及未来其它平台被服务端集成一体的环境中。
“无头”浏览器将会使后端具有更强大的能力——聚合信息和将web页面作为一个整体从中提取有用信息,这些都是后端通过一个能够理解页面内容和逻辑的引擎来实现。
自定义元素结合""无头""浏览器带来可组合的web, 并且允许随处的、分散的运行我们的内容。原生的从web向Apps中植入微内容或者创造Micro Web View 或者直接在服务端某个地方解析内容。在和原生应用结合的时候我们丢掉了某些东西,并且我认为我们能够通过创建简单的数据和逻辑展现web强大的能力。自定义元素未来web可组合性的关键(我正在为这方面写点额外的东西)。最基本的,自定义标签能够允许我们定义HTML标签。这些标签通过一致的定义开发者联系功能能够被原生的元素和其它web实现代替。
要使下一代的远程服务能够被“无头”浏览器所驱动,我们需要确定衡量问题范围。过去我们用这些工具作为单独浏览器的实例去运行测试套件。 如果我们能够创建有关浏览器运行在云上的大规模和概括性的方案,那么我们将会有一个非常了不起的新平台在web上聚集大规模的数据
我对web的未来感到非常的兴奋,我所知道的一切就是它绝对不会是今天我们看到的这个样子,但我希望它能够被URLs和内容驱动,这样能够直接的可定位以及世界上的每个人都可以获取。我们需要一个直接由内容驱动的体验,这个内容能够被分配到每一个平台,我们的用户在哪里,那么我们的User Agent就会在哪里。
如果我们能够提供一个内容和内容上承载的功能是“无头”地可获取的世界,那么我们就走向了一个新的高度。