浅谈应用跨平台开发
名词解释
跨平台
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.
跨平台计算机产品或系统是可以跨多种类型的平台或操作环境工作的产品或系统。
跨平台开发
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.
跨平台开发是为多平台或软件环境开发软件产品或服务的实践。工程师和开发人员使用各种方法来实现一个应用程序或产品适配不同操作系统或环境。
跨平台移动开发
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.
跨平台移动开发涉及为多个移动操作系统支持的产品创建代码库。这通常与iOS和Android设备有关，但也可以包括其他操作系统。跨平台移动开发是指可在多个移动平台上使用的移动应用程序的开发。
为什么跨平台开发？
- 跨平台开发可以实现大量的代码复用。
- 跨平台开发可以不需要学习相关平台的语言。
跨平台开发方案
//www.greatytc.com/p/2df673d0987b
http://fex.baidu.com/blog/2015/05/cross-mobile/
- Web 流：也被称为 Hybrid 技术，它基于 Web 相关技术来实现界面及功能
- 代码转换流：将某个语言转成 Objective-C、Java 或 C#，然后使用不同平台下的官方工具来开发
- 编译流：将某个语言编译为二进制文件，生成动态库或打包成 apk/ipa/xap 文件
- 虚拟机流：通过将某个语言的虚拟机移植到不同平台上来运行
漫谈跨平台
Java 语言跨平台
一次编译，到处运行。——Java
说的是Java语言跨平台的特性。Java编译器将Java源程序编译成与平台无关的字节码文件(class文件)，然后由Java虚拟机（JVM）对字节码文件解释执行。该字节码与系统平台无关，是介于源代码和机器指令之间的一种状态。在后续执行时，采取解释机制将Java字节码解释成与系统平台对应的机器指令。
Java Virtual Machine（Java虚拟机）
运行在所有平台的浏览器
BS模块/CS模块为什么现在
html css JavaScript
前一段时间火热的红芯，浏览器可以说是元老级的角色了，浏览器可以在pc端(win、linux、mac)，移动端(andriod)
平台
Windows
MacOS
Web PC+手机适配
iOS
Android
微信端
桌面应用跨平台开发盘点
框架|介绍|技术方案|作品|开发语言|支持平台（领域）
--|--|--|--|--
Qt|Create fluid, high-performance and intuitive UIs, applications, and embedded devices – with the same code base for all platforms. 创建流畅的、高性能与直观的UI及嵌入式设备——不同平台只需一套代码。|编译流|作品汇总 GLP Systems、fman、LG电视等、Tableau商务智能分析软件、AMD绘图软件|C++|嵌入式设备、应用UI与软件、物联网、移动设备、汽车、自动化、机顶盒&智能电视、医疗|c++|Windows、Linux、MAC、Android、iOS、Windows Phone
Electron|Build cross-platform desktop apps with JavaScript, HTML, and CSS 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用|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
移动端应用跨平台开发盘点
框架|介绍|技术方案|作品|开发语言|支持平台（领域）
--|--|--|--|--
React Native|Build native mobile apps using JavaScript and React 使用JavaScript和React编写原生移动应用|编译流（简单的说？）|作品汇总 Facebook、Instagram、Pinterest、Uber、Baidu Mobile (手机百度)、JD（手机京东）、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上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。Flutter是一款移动应用程序SDK，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。|闲鱼|Android, iOS
Weex|A framework for building mobile cross-platform UI.|Android, iOS, H5
生命力强的跨平台框架需要具备的特点：
- 框架本身优越的性能、良好的兼容性
- 较低的学习成本
- 优秀清晰的文档，以及丰富的语言支持
ReactNative 工作原理
React Native应用启动时发生了什么。启动应用时有以下三个任务并行完成:
加载JavaScript打包文件，React Native的打包工具会像Webpack和Browserify一样把代码连同全部依赖打包成单个文件。
与此同时，React Native开始加载原生模块。一旦某个原生模块完成加载就在桥接层注册，桥接层确认该模块。此时整个应用便知道该模块已可用并能创建该模块的实例。
启动JavaScript虚拟机，提供JavaScript代码的执行环境。
Flutter 工作原理
Flutter的架构主要分成三层:Framework，Engine和Embedder。
Framework使用dart实现，包括Material Design风格的Widget,Cupertino(针对iOS)风格的Widgets，文本/图片/按钮等基础Widgets，渲染，动画，手势等。此部分的核心代码是:flutter仓库下的flutter package，以及sky_engine仓库下的io,async,ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package。
Engine使用C++实现，主要包括:Skia,Dart和Text。Skia是开源的二维图形库，提供了适用于多种软硬件平台的通用API。其已作为Google Chrome，Chrome OS，Android, Mozilla Firefox, Firefox OS等其他众多产品的图形引擎，支持平台还包括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设置,线程设置，以及插件等。从这里可以看出，Flutter的平台相关层很低，平台(如iOS)只是提供一个画布，剩余的所有渲染相关的逻辑都在Flutter内部，这就使得它具有了很好的跨端一致性。
Flutter看起来很有前途。它快速且高效，是Google即将推出的Fuchsia OS的默认UI框架。基本上，Flutter似乎有能力在可预见的将来成为有价值的React Native竞争对手。
ReactNative VS Flutter
现在主流的移动开发平台是Android和iOS，之前还有过windows phone，每个平台的开发技术都不太一样。大家都是针对每个平台开发应用。自然有人就会觉得这样效率低下，想进行跨平台开发。从最开始的Hybrid混合开发技术，到RN的桥接技术，到现在新兴的Flutter技术，跨平台开发技术一直在演进。以往最早的Hybrid开发，主要依赖于WebView。但是WebView是一个很重的控件，很容易产生内存问题，而且复杂的UI在WebView上显示的性能不好。react-native技术抛开了WebView，利用JavaScriptCore来做桥接，将js调用转为native调用，只牺牲了小部分性能获取的跨平台开发，这是一大进步。所以现在react-native很流行。
Flutter实现跨平台采用了更为彻底的方案。它既没有采用WebView也没有采用JavaScriptCore，而是自己实现了一套UI框架，然后直接系统更底层渲染系统上画UI。所以它采用的开发语言不是JS，而Dart。据称Dart语言可以编译成原生代码，直接跟原生通信。
Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas，以便定制的UI组件可以出现在设备的屏幕上，以及访问事件（触摸，定时器等）和服务（位置、相机等）。这是Flutter可以做到跨平台而且高效的关键。另外Flutter学习了RN的UI编程方式，引入了状态机，更新UI时只更新最小改变区域。
系统的UI框架可以取代，但是系统提供的一些服务是无法取代的。Flutter在跟系统service通信方式，采用的是一种类似插件式的方式，或者有点像远程过程调用RPC方式。这种方式据说也要比RN的桥接方式高效。
异同:
都实现了移动开发跨平台
界面的编写都很类型，采用响应式视图，维护了一个状态机，只更新改变的最小区域界面
都支持热重载hot reload，开发调试非常方便
调用系统的service仍然需要封装接口，仍然还是需要懂得native开发
RN采用JS语言开发，基于React，受众更多。Dart语言受众小
Flutter的UI框架性能貌似更高一些，但是直接丢弃了原生UI框架。而RN还是可以自己利用原生框架，两个各有好处。Flutter的兼容性高，RN可以利用原生已有的优秀UI
Flutter的第三方库还很少，RN发展的早，虽然也还不完善，但是比Flutter好
RN的界面布局更像网页布局，而Flutter的布局更像native布局
Flutter在跨平台这方面做得更彻底一些
Flutter的在调试模式和Release模式下性能差别很大。如果你调试时发现性能差，就最好试试release模式。
Flutter采用Dart语言开发不知道是好是坏。现在可是JS的天下，这是RN的优势之一，web开发人员很容易开发RN的界面，但是Flutter的一切都要从新学习。Dart语言我也还没习惯。
Flutter现在还处理Bata阶段，第三方库还很少。所以很多东西都需要自己开发和封装。RN经过了一段时间积累，好用的库还有不少。现在用Flutter来开发APP，感觉还是有点太早。
Flutter官方吹的很大，说它是革命性的，也有一定道理。但是我觉得RN对于熟悉web开发的人来说，是更好的选择。但是对于纯native开发的移动开发人员，直接学习Flutter会更好，Flutter也比较适合本来就是做native开发的人。
Flutter与React Native的比较
Flutter KO React Native?
FLUTTER与REACT NATIVE的比较矩阵
Flutter React Native
初始发行 2017年 2015年
UI组件 专有小工具 OS本地组件
原生的外观和感觉 ★★★☆☆ ★★★★★
速度 ★★★★★ ★★★★☆
到期 ★☆☆☆☆ ★★★★★
语言 Dart JavaScript
行业采用
★☆☆☆☆ ★★★★★
生产率 ★★★★★ ★★★★★
有状态的热重新加载 是 是
配置和设置
★★★★★ ★★★☆☆
工装 ★★★☆☆ ★★★★★
硬件特定的API ★★★★☆ ★★★★☆
生命周期管理 ★★★☆☆ ★★★★★
代码结构 ★★★★☆ ★★★★★
社区 ★★★★☆ ★★★★★
文档 ★★★★★ ★★★☆☆
我们的判断：REACT NATIVE在2018年获胜，但给FLUTTER一段时间
性能对比
流言终结者- Flutter和RN谁才是更好的跨端开发方案？
weex
Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发、云端部署到分发的整个链路。开发者首先可在本地像编写 web 页面一样编写一个 app 的界面，然后通过命令行工具将之编译成一段 JavaScript 代码，生成一个 Weex 的 JS bundle；同时，开发者可以将生成的 JS bundle 部署至云端，然后通过网络请求或预下发的方式加载至用户的移动应用客户端；在移动应用客户端里，Weex SDK 会准备好一个 JavaScript 执行环境，并且在用户打开一个 Weex 页面时在这个执行环境中执行相应的 JS bundle，并将执行过程中产生的各种命令发送到 native 端进行界面渲染、数据存储、网络通信、调用设备功能及用户交互响应等功能；同时，如果用户希望使用浏览器访问这个界面，那么他可以在浏览器里打开一个相同的 web 页面，这个页面和移动应用使用相同的页面源代码，但被编译成适合Web展示的JS Bundle，通过浏览器里的 JavaScript 引擎及 Weex SDK 运行起来的。
我们在 iOS 下选择了基于 JavaScriptCore 内核的iOS系统提供的 JSContext，在 Android 下也使用了 JavaScriptCore 内核的 JavaScript 引擎。经过长期优化与多种业务场景检验，JavaScriptCore 无论是从性能还是稳定性方面都为Weex提供了强有力的保障，同时也保证了双端 JavaScript 引擎的统一，更有利于开发者调试跨端的 JavaScript 错误。
小程序
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
