淺談應(yīng)用跨平臺開發(fā)
名詞解釋
跨平臺
A cross-platform computer product or system is a product or system that can work across multiple types of platforms or operating environments. Different kinds of cross-platform systems include both hardware and software systems, as well as systems that involve separate builds for each platform, as well as other broader systems that are designed to work the same way across multiple platforms.
Cross platform is also known as multiplatform or platform independent.
跨平臺計算機(jī)產(chǎn)品或系統(tǒng)是可以跨多種類型的平臺或操作環(huán)境工作的產(chǎn)品或系統(tǒng)。
跨平臺開發(fā)
Cross-platform development is the practice of developing software products or services for multiple platforms or software environments. Engineers and developers use various methods to accommodate different operating systems or environments for one application or product.
跨平臺開發(fā)是為多平臺或軟件環(huán)境開發(fā)軟件產(chǎn)品或服務(wù)的實踐。工程師和開發(fā)人員使用各種方法來實現(xiàn)一個應(yīng)用程序或產(chǎn)品適配不同操作系統(tǒng)或環(huán)境惋戏。
跨平臺移動開發(fā)
Cross-platform mobile development involves creating a codebase for products that are to be supported on multiple mobile operating systems. This most commonly relates to iOS and Android devices, but can include other operating systems as well.
跨平臺移動開發(fā)涉及為多個移動操作系統(tǒng)支持的產(chǎn)品創(chuàng)建代碼庫慌随。這通常與iOS和Android設(shè)備有關(guān)，但也可以包括其他操作系統(tǒng)焰坪。跨平臺移動開發(fā)是指可在多個移動平臺上使用的移動應(yīng)用程序的開發(fā)趣倾。
為什么跨平臺開發(fā)？
- 跨平臺開發(fā)可以實現(xiàn)大量的代碼復(fù)用某饰。
- 跨平臺開發(fā)可以不需要學(xué)習(xí)相關(guān)平臺的語言儒恋。
跨平臺開發(fā)方案
http://www.reibang.com/p/2df673d0987b
http://fex.baidu.com/blog/2015/05/cross-mobile/
- Web 流：也被稱為 Hybrid 技術(shù)，它基于 Web 相關(guān)技術(shù)來實現(xiàn)界面及功能
- 代碼轉(zhuǎn)換流：將某個語言轉(zhuǎn)成 Objective-C黔漂、Java 或 C#诫尽，然后使用不同平臺下的官方工具來開發(fā)
- 編譯流：將某個語言編譯為二進(jìn)制文件，生成動態(tài)庫或打包成 apk/ipa/xap 文件
- 虛擬機(jī)流：通過將某個語言的虛擬機(jī)移植到不同平臺上來運(yùn)行
漫談跨平臺
Java 語言跨平臺
一次編譯炬守，到處運(yùn)行牧嫉。——Java
說的是Java語言跨平臺的特性。Java編譯器將Java源程序編譯成與平臺無關(guān)的字節(jié)碼文件(class文件)酣藻，然后由Java虛擬機(jī)（JVM）對字節(jié)碼文件解釋執(zhí)行曹洽。該字節(jié)碼與系統(tǒng)平臺無關(guān)，是介于源代碼和機(jī)器指令之間的一種狀態(tài)辽剧。在后續(xù)執(zhí)行時送淆，采取解釋機(jī)制將Java字節(jié)碼解釋成與系統(tǒng)平臺對應(yīng)的機(jī)器指令。
Java Virtual Machine（Java虛擬機(jī)）
運(yùn)行在所有平臺的瀏覽器
BS模塊/CS模塊為什么現(xiàn)在
html css JavaScript
前一段時間火熱的紅芯怕轿，瀏覽器可以說是元老級的角色了偷崩，瀏覽器可以在pc端(win、linux撤卢、mac)环凿，移動端(andriod)
平臺
Windows
MacOS
Web PC+手機(jī)適配
iOS
Android
微信端
桌面應(yīng)用跨平臺開發(fā)盤點
框架|介紹|技術(shù)方案|作品|開發(fā)語言|支持平臺（領(lǐng)域）
--|--|--|--|--
Qt|Create fluid, high-performance and intuitive UIs, applications, and embedded devices – with the same code base for all platforms. 創(chuàng)建流暢的梧兼、高性能與直觀的UI及嵌入式設(shè)備——不同平臺只需一套代碼放吩。|編譯流|作品匯總 GLP Systems、fman羽杰、LG電視等渡紫、Tableau商務(wù)智能分析軟件、AMD繪圖軟件|C++|嵌入式設(shè)備考赛、應(yīng)用UI與軟件惕澎、物聯(lián)網(wǎng)、移動設(shè)備颜骤、汽車唧喉、自動化、機(jī)頂盒&智能電視忍抽、醫(yī)療|c++|Windows八孝、Linux、MAC鸠项、Android干跛、iOS、Windows Phone
Electron|Build cross-platform desktop apps with JavaScript, HTML, and CSS 使用 JavaScript, HTML 和 CSS 構(gòu)建跨平臺的桌面應(yīng)用|JavaScript, HTML, CSS|作品匯總 Visual Studio Code祟绊、Atom楼入、Github Desktop|Web流|Mac, Windows, Linux
NW.js
(node-webkit)|Call all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.|Web流||JavaScript, HTML, CSS|Mac, Windows, Linux
移動端應(yīng)用跨平臺開發(fā)盤點
框架|介紹|技術(shù)方案|作品|開發(fā)語言|支持平臺（領(lǐng)域）
--|--|--|--|--
React Native|Build native mobile apps using JavaScript and React 使用JavaScript和React編寫原生移動應(yīng)用|編譯流（簡單的說？）|作品匯總 Facebook牧抽、Instagram嘉熊、Pinterest、Uber扬舒、Baidu Mobile (手機(jī)百度)阐肤、JD（手機(jī)京東）、Tencent QQ呼巴、Skype等|JavaScript|Android, iOS
Flutter|Flutter makes it easy and fast to build beautiful mobile apps.Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.Flutter是谷歌的移動UI框架泽腮，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面御蒲。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界诊赊，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用厚满，并且Flutter是完全免費(fèi)、開源的碧磅。Flutter是一款移動應(yīng)用程序SDK碘箍，一份代碼可以同時生成iOS和Android兩個高性能、高保真的應(yīng)用程序鲸郊。|閑魚|Android, iOS
Weex|A framework for building mobile cross-platform UI.|Android, iOS, H5
生命力強(qiáng)的跨平臺框架需要具備的特點：
- 框架本身優(yōu)越的性能丰榴、良好的兼容性
- 較低的學(xué)習(xí)成本
- 優(yōu)秀清晰的文檔，以及豐富的語言支持
ReactNative 工作原理
React Native應(yīng)用啟動時發(fā)生了什么秆撮。啟動應(yīng)用時有以下三個任務(wù)并行完成:
加載JavaScript打包文件四濒，React Native的打包工具會像Webpack和Browserify一樣把代碼連同全部依賴打包成單個文件。
與此同時职辨，React Native開始加載原生模塊盗蟆。一旦某個原生模塊完成加載就在橋接層注冊，橋接層確認(rèn)該模塊舒裤。此時整個應(yīng)用便知道該模塊已可用并能創(chuàng)建該模塊的實例喳资。
啟動JavaScript虛擬機(jī)，提供JavaScript代碼的執(zhí)行環(huán)境腾供。
Flutter 工作原理
Flutter的架構(gòu)主要分成三層:Framework仆邓，Engine和Embedder。
Framework使用dart實現(xiàn)伴鳖，包括Material Design風(fēng)格的Widget,Cupertino(針對iOS)風(fēng)格的Widgets节值，文本/圖片/按鈕等基礎(chǔ)Widgets，渲染黎侈，動畫察署，手勢等。此部分的核心代碼是:flutter倉庫下的flutter package峻汉，以及sky_engine倉庫下的io,async,ui(dart:ui庫提供了Flutter框架和引擎之間的接口)等package贴汪。
Engine使用C++實現(xiàn)，主要包括:Skia,Dart和Text休吠。Skia是開源的二維圖形庫扳埂，提供了適用于多種軟硬件平臺的通用API。其已作為Google Chrome瘤礁，Chrome OS阳懂，Android, Mozilla Firefox, Firefox OS等其他眾多產(chǎn)品的圖形引擎，支持平臺還包括Windows7+,macOS 10.10.5+,iOS8+,Android4.1+,Ubuntu14.04+等。Dart部分主要包括:Dart Runtime岩调，Garbage Collection(GC)巷燥，如果是Debug模式的話，還包括JIT(Just In Time)支持号枕。Release和Profile模式下缰揪，是AOT(Ahead Of Time)編譯成了原生的arm代碼，并不存在JIT部分葱淳。Text即文本渲染钝腺，其渲染層次如下:衍生自minikin的libtxt庫(用于字體選擇，分隔行)赞厕。HartBuzz用于字形選擇和成型艳狐。Skia作為渲染/GPU后端，在Android和Fuchsia上使用FreeType渲染皿桑，在iOS上使用CoreGraphics來渲染字體毫目。
Embedder是一個嵌入層，即把Flutter嵌入到各個平臺上去唁毒，這里做的主要工作包括渲染Surface設(shè)置,線程設(shè)置蒜茴，以及插件等星爪。從這里可以看出浆西，F(xiàn)lutter的平臺相關(guān)層很低，平臺(如iOS)只是提供一個畫布顽腾，剩余的所有渲染相關(guān)的邏輯都在Flutter內(nèi)部近零，這就使得它具有了很好的跨端一致性。
Flutter看起來很有前途抄肖。它快速且高效久信，是Google即將推出的Fuchsia OS的默認(rèn)UI框架±炷Γ基本上裙士，F(xiàn)lutter似乎有能力在可預(yù)見的將來成為有價值的React Native競爭對手。
ReactNative VS Flutter
現(xiàn)在主流的移動開發(fā)平臺是Android和iOS管毙，之前還有過windows phone腿椎，每個平臺的開發(fā)技術(shù)都不太一樣。大家都是針對每個平臺開發(fā)應(yīng)用夭咬。自然有人就會覺得這樣效率低下啃炸，想進(jìn)行跨平臺開發(fā)。從最開始的Hybrid混合開發(fā)技術(shù)卓舵，到RN的橋接技術(shù)南用，到現(xiàn)在新興的Flutter技術(shù)，跨平臺開發(fā)技術(shù)一直在演進(jìn)。以往最早的Hybrid開發(fā)裹虫，主要依賴于WebView肿嘲。但是WebView是一個很重的控件，很容易產(chǎn)生內(nèi)存問題筑公，而且復(fù)雜的UI在WebView上顯示的性能不好睦刃。react-native技術(shù)拋開了WebView，利用JavaScriptCore來做橋接十酣，將js調(diào)用轉(zhuǎn)為native調(diào)用涩拙，只犧牲了小部分性能獲取的跨平臺開發(fā)，這是一大進(jìn)步耸采。所以現(xiàn)在react-native很流行兴泥。
Flutter實現(xiàn)跨平臺采用了更為徹底的方案。它既沒有采用WebView也沒有采用JavaScriptCore虾宇，而是自己實現(xiàn)了一套UI框架搓彻，然后直接系統(tǒng)更底層渲染系統(tǒng)上畫UI。所以它采用的開發(fā)語言不是JS嘱朽，而Dart旭贬。據(jù)稱Dart語言可以編譯成原生代碼，直接跟原生通信搪泳。
Flutter將UI組件和渲染器從平臺移動到應(yīng)用程序中稀轨，這使得它們可以自定義和可擴(kuò)展。Flutter唯一要求系統(tǒng)提供的是canvas岸军，以便定制的UI組件可以出現(xiàn)在設(shè)備的屏幕上奋刽，以及訪問事件（觸摸，定時器等）和服務(wù)（位置艰赞、相機(jī)等）佣谐。這是Flutter可以做到跨平臺而且高效的關(guān)鍵。另外Flutter學(xué)習(xí)了RN的UI編程方式方妖，引入了狀態(tài)機(jī)狭魂，更新UI時只更新最小改變區(qū)域。
系統(tǒng)的UI框架可以取代党觅，但是系統(tǒng)提供的一些服務(wù)是無法取代的雌澄。Flutter在跟系統(tǒng)service通信方式，采用的是一種類似插件式的方式仔役，或者有點像遠(yuǎn)程過程調(diào)用RPC方式掷伙。這種方式據(jù)說也要比RN的橋接方式高效。
異同:
都實現(xiàn)了移動開發(fā)跨平臺
界面的編寫都很類型又兵，采用響應(yīng)式視圖任柜，維護(hù)了一個狀態(tài)機(jī)卒废，只更新改變的最小區(qū)域界面
都支持熱重載hot reload，開發(fā)調(diào)試非常方便
調(diào)用系統(tǒng)的service仍然需要封裝接口宙地，仍然還是需要懂得native開發(fā)
RN采用JS語言開發(fā)摔认，基于React，受眾更多宅粥。Dart語言受眾小
Flutter的UI框架性能貌似更高一些参袱，但是直接丟棄了原生UI框架。而RN還是可以自己利用原生框架秽梅，兩個各有好處抹蚀。Flutter的兼容性高，RN可以利用原生已有的優(yōu)秀UI
Flutter的第三方庫還很少企垦，RN發(fā)展的早环壤，雖然也還不完善，但是比Flutter好
RN的界面布局更像網(wǎng)頁布局钞诡，而Flutter的布局更像native布局
Flutter在跨平臺這方面做得更徹底一些
Flutter的在調(diào)試模式和Release模式下性能差別很大郑现。如果你調(diào)試時發(fā)現(xiàn)性能差，就最好試試release模式荧降。
Flutter采用Dart語言開發(fā)不知道是好是壞〗芋铮現(xiàn)在可是JS的天下，這是RN的優(yōu)勢之一朵诫，web開發(fā)人員很容易開發(fā)RN的界面辛友，但是Flutter的一切都要從新學(xué)習(xí)。Dart語言我也還沒習(xí)慣拗窃。
Flutter現(xiàn)在還處理Bata階段瞎领，第三方庫還很少。所以很多東西都需要自己開發(fā)和封裝随夸。RN經(jīng)過了一段時間積累，好用的庫還有不少≌鸱牛現(xiàn)在用Flutter來開發(fā)APP宾毒，感覺還是有點太早。
Flutter官方吹的很大殿遂，說它是革命性的诈铛，也有一定道理。但是我覺得RN對于熟悉web開發(fā)的人來說墨礁，是更好的選擇幢竹。但是對于純native開發(fā)的移動開發(fā)人員，直接學(xué)習(xí)Flutter會更好恩静，F(xiàn)lutter也比較適合本來就是做native開發(fā)的人焕毫。
Flutter與React Native的比較
Flutter KO React Native?
FLUTTER與REACT NATIVE的比較矩陣
Flutter React Native
初始發(fā)行 2017年 2015年
UI組件 專有小工具 OS本地組件
原生的外觀和感覺 ★★★☆☆ ★★★★★
速度 ★★★★★ ★★★★☆
到期 ★☆☆☆☆ ★★★★★
語言 Dart JavaScript
行業(yè)采用
★☆☆☆☆ ★★★★★
生產(chǎn)率 ★★★★★ ★★★★★
有狀態(tài)的熱重新加載 是 是
配置和設(shè)置
★★★★★ ★★★☆☆
工裝 ★★★☆☆ ★★★★★
硬件特定的API ★★★★☆ ★★★★☆
生命周期管理 ★★★☆☆ ★★★★★
代碼結(jié)構(gòu) ★★★★☆ ★★★★★
社區(qū) ★★★★☆ ★★★★★
文檔 ★★★★★ ★★★☆☆
我們的判斷：REACT NATIVE在2018年獲勝蹲坷，但給FLUTTER一段時間
性能對比
流言終結(jié)者- Flutter和RN誰才是更好的跨端開發(fā)方案？
weex
Weex 表面上是一個客戶端技術(shù)邑飒，但實際上它串聯(lián)起了從本地開發(fā)循签、云端部署到分發(fā)的整個鏈路。開發(fā)者首先可在本地像編寫 web 頁面一樣編寫一個 app 的界面疙咸，然后通過命令行工具將之編譯成一段 JavaScript 代碼县匠，生成一個 Weex 的 JS bundle；同時撒轮，開發(fā)者可以將生成的 JS bundle 部署至云端乞旦，然后通過網(wǎng)絡(luò)請求或預(yù)下發(fā)的方式加載至用戶的移動應(yīng)用客戶端；在移動應(yīng)用客戶端里题山，Weex SDK 會準(zhǔn)備好一個 JavaScript 執(zhí)行環(huán)境杆查，并且在用戶打開一個 Weex 頁面時在這個執(zhí)行環(huán)境中執(zhí)行相應(yīng)的 JS bundle，并將執(zhí)行過程中產(chǎn)生的各種命令發(fā)送到 native 端進(jìn)行界面渲染臀蛛、數(shù)據(jù)存儲亲桦、網(wǎng)絡(luò)通信、調(diào)用設(shè)備功能及用戶交互響應(yīng)等功能浊仆；同時客峭，如果用戶希望使用瀏覽器訪問這個界面，那么他可以在瀏覽器里打開一個相同的 web 頁面抡柿，這個頁面和移動應(yīng)用使用相同的頁面源代碼音念，但被編譯成適合Web展示的JS Bundle，通過瀏覽器里的 JavaScript 引擎及 Weex SDK 運(yùn)行起來的绵咱。
我們在 iOS 下選擇了基于 JavaScriptCore 內(nèi)核的iOS系統(tǒng)提供的 JSContext空幻，在 Android 下也使用了 JavaScriptCore 內(nèi)核的 JavaScript 引擎。經(jīng)過長期優(yōu)化與多種業(yè)務(wù)場景檢驗囱稽，JavaScriptCore 無論是從性能還是穩(wěn)定性方面都為Weex提供了強(qiáng)有力的保障郊尝，同時也保證了雙端 JavaScript 引擎的統(tǒng)一，更有利于開發(fā)者調(diào)試跨端的 JavaScript 錯誤战惊。
小程序
微信小程序是一種全新的連接用戶與服務(wù)的方式流昏，它可以在微信內(nèi)被便捷地獲取和傳播，同時具有出色的使用體驗吞获。
