作者:圖靈天宜 ? 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 將會幫你更容易,更快速的開發出界面美觀的移動應用?!?/p>
真如谷歌官方說的那么美好嗎?我們可以看到現在市面上的跨平臺開發方案有很多,比如 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 技術在內的很多技術,我們取其精華并勇敢地扔掉歷史包袱?!?/p>
背后的故事2:在去年一年中,我們聽到的 Flutter 聲音更多是源自客戶端開發者,但自 1.0 發布后,吸引到了來自前端同學越來越多的關注。這一點和嚶嚶在「2019 前端技術規劃該包含什么?」中 回答 提到的現象類似。但前端同學有沒有想過,Flutter 起源于移動端,現有 Flutter 雖然來自曾經 Chromium 團隊,但整體對客戶端開發的友好度是要高于前端開發的,畢竟有一個平臺層插件擺在那里,再看看 Flutter 即將推出的 HummingBird,乍一看是 Web 的福音,但這也只是為 Flutter to Web 提供了途徑,而非為前端提供了增強 Web 的可能。從某種意義上說,Web 的疆土正在逐漸縮小。這一次,我們是否真的要失業了呢?
注:關于 Google 工程師的一段話描述意譯自 Google 工程師在 Flutter 圓桌會上的相關言論,有出入。