作者:图灵天宜 • 2019月07月17日
移动开发历史回顾
当下的移动互联网仿佛给我们营造一种假象—— Android 和 iOS 已经存在许多年。而回首过往,才发现 Android 刚和我们度过第一个十年。十年前我们更多的讨论桌面应用与 Web,十年后我们专注在一个小屏幕,享受移动应用给我们带来的多彩世界。
移动应用(即我们日常所说的「原生」应用程序),通常是指某一移动平台所特有的应用程序。通过使用特定平台所支持的开发工具和语言进行开发,你可以直接调用系统提供的一些 SDK API。当下流行的移动操作系统中,我们使用 Java 或 Kotlin 调用 Android SDK 开发 Android 应用,或通过 Objective-C 或 Swift 调用 iOS SDK 开发可以上架 App Store 的应用。凡事没有银弹,移动开发也是如此。简要来看,原生应用开发具有以下优势:
1. 可获取平台全部开放功能,比如摄像头,蓝牙等;
2. 用户访问应用的感受通常是速度快、性能高、体验好的;
而其缺点也很明显,主要有:
1. 为特定平台开发,综合成本高,不同平台维护需要人力成本;
2. 动态化能力弱,大多数情况下,新功能更新只能发版;
说到动态化,一次编码便可运行在任何平台的 Web 让我们记忆深刻。而针对移动端存在的这些问题,为了在提高体验的同时赋予应用动态化能力,诞生了一批又一批的跨平台移动开发解决方案。根据实现方式的不同,我将它划分为三个时代:
1. 青铜时代。在该时代的框架主要采用 Webview 容器(广义)进行内容渲染,并借助原生代码预置用以暴露给 JavaScript 调用的一部分系统能力,而这类协议则为我们通常说的 JavaScript Bridge;这个时代的框架在 Web 与 Native 间还有比较明显的界限,大家各司其职(UI 渲染与系统功能调用);
2. 白银时代。在这个阶段我们仍然用 JavaScript 开发,但绘制已经交由 Native 接管,展现在用户面前的 UI 借助的是 JavaScript VM 的解析与 Native Widgets 的组合展示;
3. 黄金时代。不同于前一个时代,由于 Native Widgets 在 UI 上的「不尽如人意」,这个时代对方案起了一个新概念——自绘引擎,通过它在底层的绘制实现上来抹平不同平台上界面开发的差异,UI 上真正做到了「每一个像素点可控」。虽然涉及到平台层时还是需要原生开发介入实现相应插件,但这已是三种跨平台移动开发方案中最灵活的一种了。
web前端开发问题
我们常说 Web 最终将一统天下,也常听见 Web 在离我们远去的声音。但至今在终端 UI 上也没有迎来一个完美的解决方案,这是因为在不同阶段、不同实现上,都存在很多现实问题。让我们再回顾一下这三个时代:
1. 青铜时代:采用 Webview 渲染的方案虽然成本低、部署迅速,但仍难以 cover 富交互的用户界面与复杂手势的快速响应;
2. 白银时代:利用 JavaScript 调用 Native 代码操作 UI 的方案虽然解决了不少渲染问题,但是跨平台 Native Widgets 的差异仍然是个问题,这使得我们在 UI 上要做一些「妥协」,而存在于 JavaScript 与 Native 间的通信成本在一些场景下仍会使这种方案成为「累赘」;
3. 黄金时代:直接使用底层 API 进行绘制在执行效率上大步迈进,看似已经是终极解决方案,但大家是否想过,为什么被世人「不堪」的 Web 存在这么多年,不但没有消亡反而愈发繁荣,以至于我们常说「任何能用 JavaScript 实现的应用,最终都必将用 JavaScript 实现」;
注:「累赘」问题可详见 Flutter 中文网关于移动开发技术一章的 介绍 。
其他还有一些问题值得思考,比如:
- 在今天,针对每个移动平台单独开发一套代码,成本是否太高?
- 自绘引擎在操控 UI 上已经足够自由,但当初这种解决方案为什么没有火起来?
- 快速开发与部署、多端可访问的 Web 开发模式,在当下以及未来是否还会持续过去的增长势头?
在 17 年的谷歌 I/O 大会上,Google 推出了 Flutter,一款新的用于创建移动应用的开源库。在 2018 年初世界移动大会上发布了 Flutter 的第一个 Beta 版本,5 月的 I/O 大会上更新到了 Beta 3 版本,向正式版又迈进了一步。一时间业内对这个框架的关注度越来越高。
Flutter 是什么?
Flutter 是能够帮助用户创建拥有漂亮 UI 界面的跨平台移动应用解决方案。从而摆脱过去那种千篇一律的 App,Flutter 的界面设计与 web 应用类似,因此,你能够从 Flutter 上找到像使用 HTML/CSS 那样熟悉的感觉。
“谷歌官方说:Flutter 将会帮你更容易,更快速的开发出界面美观的移动应用。”
真如谷歌官方说的那么美好吗?我们可以看到现在市面上的跨平台开发方案有很多,比如 Xamarin,PhoneGap,Ionic,React Native 等等,这些方案互有利弊,很难选择。那么 Flutter 的出现的又有什么不同呢?对比这些方案有哪些优势?GMTC 全球大前端技术大会请来了 Google Flutter 团队高级工程师于潇,请他来谈谈 Flutter 的特点。
- Flutter 的诞生是为了帮助用户开发出精美的原生应用,作为框架中革命性的一点,Flutter 是如何实现 UI 组件的?
- Flutter 作为一项新技术目前还处于市场应用的初级阶段,作为这项技术的研究者您是怎么看待 Flutter 的未来的呢,会成为下一个风口吗?
- 作为一个资深的移动开发从业者,应该也经历过不少风雨,踩过不少坑。作为过来人能不能给我们年轻的软件开发者们在移动开发方面一些建议或者分享一下未来趋势呢?
- 我们看到市面上其实跨平台框架种类很多,您觉得 Google 这次推出的 Flutter 的优势在哪里?
- 个人经历中我们看到,近年来都是从事不同移动平台的软件开发工作。每个平台开发都要重新学习语言和技术,这样会带来开发成本增加,后期接着来的是维护成本的增加。
最后总结:我觉得可以总结成下面五句话:
1. RECAP / 在移动端跨平台开发方案的历史更迭中,我们从 Webview 加 Bridge 到 React Native 再到如今吸引大家目光的 Flutter,终端 UI 技术是否真的迎来了终极解决方案我们不得而知,但通过简单回顾了这条历史长河上出现过的几场光辉,希望借他们的发展身影能给从事前端的大家带去一些跳出业务代码的全局思考;
2. WHAT / Flutter 是什么:Google’s Portable UI Toolkit。它起源于移动端,但目光远不止眼前的苟且。
3. HOW / Flutter 有四个特点,分别是 Fast, beautiful, productive 以及 open。这些能力源于其背后 Dart、skia 和更多技术的支持,了解这些有助于帮助我们更清楚一个完整的 UI 系统由哪几个部分构成,以使我们对上层建筑有更立体的感受。
4. WHY / 为什么选择 Flutter,我在分享中介绍了不少原因,有系统设计的分析,有开放的学习态度,也有面向未来的 Mobile and beyond.
5. END / 如果你对 Flutter 感兴趣请不要忘记对 Google I/O 保持关注。对身边的新技术时刻保持好奇,做一个快乐的 Geek!
大浪淘沙,下一个十年我们又将身在何方?希望我的分享能让你有所收获。文中有误的地方欢迎评论指出,关于 Flutter 的更多内容欢迎一起讨论。谢谢。
背后的故事1:很多前端工程师在最初听到 Flutter 时都充满疑惑,为什么 Flutter 选用了 Dart,而不是使用 Web 技术或者是 JavaScript 语言来实现 Flutter 框架。其实 Flutter 中有不少内容便是吸收自 Web 社区,比如 tree shaking 和 hot reload。但 Flutter 另一个鲜为人知的故事是团队中大部分成员都具有 Web (Chromium) 背景。如果你看过 Flutter Live,应该知道 Flutter 与 Dart 团队的人数并不多,大致就头像墙中列出的那些,在最初设计上,他们也曾反复考虑 Web 技术,而在语言选型上也考虑过 JavaScript。应该不会有人比他们更了解 JavaScript 与 Web 了吧,但你看看这些开发过 Chromium 的人最后还是放弃了 JavaScript,我们有理由相信他们是经过深思熟虑后做出的决定。按照 Google 工程师的话来说就是「我们关注包括 Web 技术在内的很多技术,我们取其精华并勇敢地扔掉历史包袱。」
背后的故事2:在去年一年中,我们听到的 Flutter 声音更多是源自客户端开发者,但自 1.0 发布后,吸引到了来自前端同学越来越多的关注。这一点和嘤嘤在「2019 前端技术规划该包含什么?」中 回答 提到的现象类似。但前端同学有没有想过,Flutter 起源于移动端,现有 Flutter 虽然来自曾经 Chromium 团队,但整体对客户端开发的友好度是要高于前端开发的,毕竟有一个平台层插件摆在那里,再看看 Flutter 即将推出的 HummingBird,乍一看是 Web 的福音,但这也只是为 Flutter to Web 提供了途径,而非为前端提供了增强 Web 的可能。从某种意义上说,Web 的疆土正在逐渐缩小。这一次,我们是否真的要失业了呢?
注:关于 Google 工程师的一段话描述意译自 Google 工程师在 Flutter 圆桌会上的相关言论,有出入。