你好,我是阿里巴巴前端技术专家狼叔,上一篇文章中,我与你分享了React/Vue/Angular三大框架标准化、应用层封装进入爆发期、PWA进入稳定期、小程序火爆等前端趋势,今天,我将继续跟你聊聊移动端局面、多端拉齐的必然性等内容,以及2019年不可忽视的TypeScript和WebAssembly这两大技术。

多端拉齐,并重用户体验

在AI时代,没有“端”的支持可以么?明显是不可以的。首先感谢苹果,将用户体验提升到了前无古人的位置。移动互联网兴起后,PC Web日渐没落。我个人非常欣赏玉伯,在当年无线 ALL IN 战略中,他还是选择留下来继续做 PC Web 的前端。不过,虽然很多公司的重点转向无线,但 PC 业务也一直没停,这是很多公司的现状,也是客观事实。那么,PC端这样的“老古董”的出路到底在哪里呢?

大家的战场已经不是点了,已经升级到打组合策略的阶段了。未来一定是多端拉齐,并重用户体验的。

今天的大前端,除了Web外,还包括各种端,比如移动端、OTT,甚至是一些新的物联网设备。我们有理由相信Chrome OS当年的远见:“给我一个浏览器,我就能给你一个世界。”如果说的苟且一点:“给我一个Webview,我就能给你一个世界。”

TypeScript

我之前就非常关注TypeScript,但迟迟未下定决心在团队内落地。今年1月份北京Node Party上组了个局,和几位嘉宾一起聊了一下,确认提效非常明显,落地难度也不大,大家一致认为2019年TypeScript将有非常大的增长。本身前端团队变大,规模化编程也必然依赖类型系统和面向对象的,从这点上看,TypeScript也是完胜的。

这里再简单介绍一下TypeScript,它是有类型定义的 JavaScript 的超集,包括 ES5、ES5+ 和其他一些诸如反射、泛型、类型定义、命名空间等特征的集合,为了大规模 JavaScript 应用开发而生。复杂软件需要用复杂的设计,面向对象就是一种很好的设计方式,使用 TypeScript 的一大好处就是 TypeScript 提供了业界认可的类( ES5+ 也支持)、泛型、封装、接口面向对象设计能力,以提升 JavaScript 的面向对象设计能力。市面上的框架也对TypeScript提供了非常好的支持。

1.React 对.tsx支持非常好,比如我在Midway controller里支持tsx写法,这是非常大胆的,对于后面react ssr来说是一个极大便利;
2.Vue 从v2.5.0之后对ts支持就非常好;
3.Node.js Web框架,尤其是Egg.js对ts支持非常好,当然还有更高级更专注的的Midway框架,Midway基于Egg生态,同时提供IoC等高级玩法;

在使用 Webpack 编译前端应用式,通过TypeScript-loader可以很轻松地将 TypeScript 引入到 Webpack 中。有了 TypeScript-loader,就可以一边使用 TypeScript 编写新代码,一边零碎地更新老代码。毕竟ts是js超集,你有空就改,非强制,特别包容。

WebAssembly

WebAssembly 是一种新的字节码格式,目前主流浏览器都已经支持 WebAssembly。 和 JS 需要解释执行不同的是,WebAssembly 字节码和底层机器码很相似,可以快速装载运行,因此性能相对于 JS 解释执行而言有了极大的提升。 也就是说 WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行, 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。这很像Java早年的Applet,能够让其他语言运行在浏览器里。Applet 是一种Java 程序,它可以运行在支持Java 的Web 浏览器内。因为它有完整的Java API支持,所以 Applet 是一个全功能的Java 应用程序。

有了WebAssembly,在浏览器上可以跑任何语言。从Coffee到TypeScript,到Babel,这些都是需要转译为js才能被执行的,而WebAssembly是在浏览器里嵌入vm,直接执行,不需要转译,执行效率自然高得多。

举个例子,AutoCAD软件是由美国欧特克有限公司(Autodesk)出品的一款自动计算机辅助设计软件,可以用于绘制二维制图和基本三维设计。使用它时,无需懂得编程,即可自动制图,因此它在全球被广泛应用于土木建筑、装饰装潢、工业制图、工程制图、电子工业、服装加工等诸多领域。

AutoCAD是由大量C++代码编写的软件,经历了非常多的技术变革,从桌面到移动端再到web。之前,InfoQ上有一个演讲,题目是《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》,即通过WebAssembly,让很多年代久远的C++代码在Web上可以运行,并且保证了执行效率。

本来,我以为WebAssembly离我们很远,但在2018年Google I/O大会亲眼见到AutoCad Web应用后,非常震撼,效果如下图所示。

能够让如此庞大的项目跑在Web端,真的是非常了不起。通过WebAssembly技术,既能复用之前的C++代码,又能完成Web化,这也许就是所谓的两全其美吧。

之前,全民直播的前端研发经理赵洋曾分享了WebAssembly在全民直播里对直播编解码方面的应用,效果也非常不错。

另外,许式伟在 ECUG Con 2018上也分享了一个 Topic,主题是《再谈 Go 语言在前端的应用前景》,Go的发展也遇到了瓶颈,专注后端开发是没办法让 Go 排到第一的,目前的一个方向是借助GopherJS,将Go代码编译为JS。这种实践是没问题的,和Kotlin类似,对于绝大部分 Go 用户也是非常好的。但问题在于,真正的前端不太可能换语言,目前连Babel、ts这种都折腾的心累,更何况切换到Go。“求别更新了,老子学不动了”,这是大部分前端工程师的心声。

从WebAssembly的现状来看,对于复杂计算耗时的部分采用其他语言实现,确实是比较好的一种方式。从趋势上看,WebAssembly让所有语言都能跑在浏览器上,浏览器上有了vm,浏览器不就是操作系统了吗?

Chrome的核心JavaScript引擎V8目前已包含了 Liftoff 这一新款 WebAssembly baseline 编译器。Liftoff 简单快速的代码生成器极大地提升了 WebAssembly 应用的启动速度。不过在桌面系统上,V8 依然会通过让 TurboFan 在后台重新编译代码的方式最终让代码运行性能达到峰值。目前,V8 v6.9 (Chrome 69) 中的 Liftoff 已经设置为默认工作状态,也可以显式地通过 --liftoff/–no-liftoff 或者 chrome://flags/#enable-webassembly-baseline 开关来控制。另外,Node.js v11采用的v8引擎的v7版本,对WebAssembly支持更好,虽然这没啥意义,但练手还是蛮好的。

移动端

Flutter 是 Google 推出的帮助开发者在 Android 和 iOS 两个平台,同时开发高质量原生应用的全新移动 UI 框架,和 React-native/Weex 一样支持热更新。Flutter使用Google自己家的Dart语言编写,刚好今年Dart 2也正式发布,不知道二者之间是否有关联。目前Dart主攻Flutter和Web两块,同时提供了 pub 包管理器,俨然是一门全新的语言,学习成本有些高。反观TypeScript就非常容易被接受,基于npm生态,兼容ES语法,因此,2019年对Dart我还是会持观望态度。

除了不喜欢Dart外,Flutter的其他方面都很好,在移动端现在强运营的背景下,支持热更新是必备能力。

关于Weex,一边骂一边用,很无奈的一种状态。Weex本身是好东西,捐给了Apache,目前在孵化中,会有一个不错的未来。但社区维护的非常差,问题issue不及时,文档不更新。如果公司没有架构组,还是比较难搞定的。

不过也有很多不错的案例,比如2018年优酷双十一活动就是使用Weex开发的,效果非常不错。通过自建的可视化活动搭建平台,能够非常高效的完成开发,结合App内的缓存,整体效果比H5好的多。

我对 Weex 的看法是,以前 Weex 只是解决H5渲染效率的问题,但如今强运营的背景,使得 Weex 承载了非常多的内容,比如动画、游戏甚至是图形图像处理等。可以看到,未来 Weex 还会战略性的增加。

总结一下,2018年大前端的现象:

1.前端三大框架已趋于平稳,标准化,向Web Components看齐。
2.应用层面开始进入过渡封装周边的阶段,很多细节都会埋在框架里。
3.PWA平稳发展,兼容4/5浏览器,workbox 3进一步简化开发,另外PWA桌面版已经开始兴起,未来会更多。
4.多端受到重视,不再只是all in mobile。
5.WebAssembly让更多语言可以运行在浏览器上,AutoCAD的web版是非常好的例子。
6.强运营背景下,移动端以前端开发为主,已成定局。Flutter局势暂不好说,还在观望中(主要是不喜欢Dart)。
7.TypeScript落地很好,包容性更好:React 对.tsx支持非常好,Vue 从v2.5.0之后对ts支持就非常好,Node.js(尤其是Egg.js、midway)对ts支持也非常好。
8.5G时代快来了,互联网的长期在线情况有可能会被打破。本地设备即客户端,可以大胆的想想。对前端来说,本地web服务,辅助日常开发,类似于je这样的模块会越来越多。

终上所述,未来浏览器会越来越重要,Web Os的概念正在慢慢落地。另外三大框架趋于稳定,写法上也越来越像,学习成本是降低的。但周边应用层面的封装还会是爆发式增长,更多复杂的细节会被包装到应用框架里,可能还有很多不一样的开发方式需要大家熟悉。

对于开发者而言,唯一不变的就是学习能力。掌握了学习能力就能够应对这些趋势变化,无论是在三大框架混战时代,还是后面周边封装时代都能很开心的“折腾”。哪怕有一天AI真的能够替人写代码,能应变的人自然也是不怕的。

关于大前端的现状和未来我就分享到这里,希望能对你有所帮助,而提到大前端,就不能忽视Node.js,它在大前端布局里的意义非常重大,接下来的两篇文章,我将会着重分享一些跟Node.js结合比较密切的点,如API演进、GraphQL、SSR等,欢迎继续关注,也欢迎留言与我多多交流。

作者简介

狼叔(网名i5ting),现为阿里巴巴前端技术专家,Node.js 技术布道者,Node全栈公众号运营者。曾就职于去哪儿、新浪、网秦,做过前端、后端、数据分析,是一名全栈技术的实践者,目前主要关注技术架构和团队梯队建设方向。即将出版《狼书》3卷。