【翻譯】Fuse 與 React Native 或者 NativeScript 比有什麼區別？

原文：https://medium.com/@fusetools/how-fuse-differs-from-react-native-and-nativescript-525344f02aaf

如今有不少不一樣的框架和工具能夠用來構建移動應用，咱們獲得最廣泛的一個問題就是：Fuse 和 XXX 有什麼區別？

有的時候，這就是 Hybrid 應用和原生應用的區別，或者是建立一個原型和建立一個完整應用的區別（Fuse 實際上能夠幫你無縫地從一個原型到完成一個完整應用），但一般咱們須要更近一步說明。

我趨向於討論 Fuse 背後的理念和視角。比起挖掘技術細節，咱們更會去關注 Fuse 更高的目標以及它是如何幫助用戶的。

這包括：

• Fuse 是供設計師 & 開發者使用的。 咱們但願幫助這兩組人，讓他們更好的在一塊兒協做，而不是自顧自地作他們擅長的事。

• 更新更好的工做流。 使用 Fuse 工做會更高效和有趣。

• 靈活性，有你想要的功能，並足以幫你完成你的創做。Fuse 不像是一個玩具或者沙盒。

• 專一前端 & 用戶體驗。 Fuse 構建的應用從視覺和感受上都比其餘工具更好。

不過所謂 _理念_，僅在它有了明確的結果後纔是有用的，對於開發來講更甚。

這也是爲何我但願更近地去看 Fuse 的一些功能，並解釋它們和那兩個框架的區別，一個是 Facebook 的 React Native，一個是 Telerik 的 NativeScript。

基礎

乍一看，Fuse、NativeScript（NS）和 React Native（RN）可能看上去很類似：

• 在一個 VM 裏運行 JavaScript

• 能夠調用平臺 API 和 UI 組件

• 提供跨平臺抽象，同時能夠直接使用原生 UI

• 提供某種形式的標記來構建 UI

不過，若是你更進一步去看，Fuse 的目標以及它若是達到它的目標的方式都是很不同的。

原生代碼 vs JavaScript

一個關鍵的區別在於，Fuse 僅在應用邏輯上使用 JS，其餘地方所有生成原生代碼，包括構建和操做 UI。

當你從 Fuse 導出一個應用的時候，它將你使用的整個框架和標記轉化成 C++ 源代碼，以後這個代碼會被原平生臺工具（Xcode 和安卓的 SDK / NDK）編譯。你也能夠把 Java 和 Objective-C 代碼加入同一個項目一塊兒編譯，或者是簡單的連接一個原生庫。

與之不一樣的是，NativeScript 和 React Native 更依賴於 JavaScript 爲它們作多數的事情。NS 經過給 JS 暴露原生 API，分發調用並即時轉換數據。RN 也比較相似，不過它是經過調用原生代碼實現的更高階的函數。

你能夠說 RN & NS 是自頂向下的：它們先用 JavaScript 完成需求，而後把其餘東西填充進去。而 Fuse 是自底向上的，咱們先從跨平臺的原生代碼和 UI 開始，而後再加入 JavaScript 代碼，來輕鬆地完成一個應用。

讓咱們感受到 「越是原生的越好」 的一個主要緣由是：性能。

雖然 JavaScript VM 變得愈來愈快了，但它們絕對不會比編譯後的原生代碼快，這個速度的差別仍是須要留意的。更高效的代碼意味着你能夠在你的應用裏作更 cool 的東西，它能夠在你的老設備里正常運行，而且也不是很耗電。

這引出了另外一個相關點……

JavaScript 執行和 UI 性能

若是你想要 60FPS 的絲滑視覺效果，那麼就不要讓任何東西（好比較慢的 JavaScript 執行）阻礙你的 UI 更新。

在 Fuse 裏，保函業務邏輯代碼的 JavaScript VM 在單獨一個線程運行，而其餘 UI 的工做則是在另外一個線程使用原生代碼運行的。這二者的聯繫是經過響應式的數據綁定來完成的，這實現了職責的分離。

UI 自身知道（之因此知道，是由於在 UX 標記上定義了，以後會說到）在按鈕點擊的時候導航到另外一個頁面，或者新的數據添加的時候列表應該有一個動畫效果，因此它不會由於 JS 的執行而影響動畫的更新。

做爲比較：NS 始終在單線程運行 JavaScript 代碼，雖然它能夠調用平臺 API，但依然會由於 JS 的運行，致使 UI 更新出現卡頓。

RN 比 NS 利用了更多的線程，但 UI 層依然比 Fuse 更加依賴 JS 代碼的運行：維護和差別化 RN 的虛擬 UI 樹，以及線程之間通訊時頻繁的數據序列化和反序列化都會引入額外的 JS 任務，從而會減小多線程帶來的好處。

聲明式標記

這 3 種解決方案都提供了標記語言來處理 UI，但它們的區別是很大的。在這個方面，Fuse 顯然是面向任何構建應用的人，而其餘二者是面向 JS 開發者的。

UX 標記在 Fuse 的主要部分，是用來描述 UI 和用戶體驗是如何被建立的。

這是一個針對佈局、動畫和用戶輸入設計的標記語言，即使不是程序員，也很容易學習它。

UX 是用來定義任何的視覺效果和交互相關的效果，因此它提供了更多的對於視覺與感受方面的控制。而 NS 和 RN 依賴於 CSS 的子集和傳統的 XML 用於基本樣式的聲明，它讓開發者更加糾結於代碼。

換句話說：Fuse 使用爲前端定製的標記語言，而讓你不用碰任何代碼。

這不只對於設計師來講頗有好處，並且對於開發者來講，它們能夠建立更好看的應用，而且 UI 和業務邏輯徹底分離。

而且以前也提到過，任何你經過 UX 標記建立的東西都會變成 C++ 代碼，並獨立於 JS 運行。這和另外二者是很不一樣的，在運行時經過 JS 解析 XML（或者將 JSX 轉化爲 JS）。

【譯者注】本身沒有寫過 RN，不過在寫 React 的時候，上線代碼裏，JSX 確定是已經被轉換好了的，因此做者這邊的理解待考證。

OpenGL UI

除了傳統的平臺組件外，Fuse 也提供了徹底可自定義的 OpenGL ES-accelerated UI。這是另外兩種框架沒法提供的。

【譯者注】對 OpenGL 不瞭解，不過這裏有一段對 OpenGL ES Standard 的描述：OpenGL® ES is a royalty-free, cross-platform API for full-function 2D and 3D graphics on embedded systems - including consoles, phones, appliances and vehicles.

這意味着你能夠建立徹底自定義你想要的 UI，而且運行時保持 60FPS 的流暢。你甚至能夠添加實時可視化效果，好比動態投射陰影、模糊和玻璃蒙版，甚至其餘更多的效果。

Fuse 容許你構建標準平臺 UI 或 HTML 之外的東西。

這些 UI 在全部平臺上看上去都是一致的，或者你也能夠在你的項目裏定義安卓和 IOS 平臺的差別。這樣你就能夠獲得最大化的代碼共享，對於前端也是這樣。

你甚至能夠結合原平生臺組件和自定義組件。好比在一個徹底自定義的應用裏使用原生地圖組件。或者在一個標準的原生 UI 裏使用一個特殊的地圖組件。

這種 UI 的另外一個好處是你能夠在編輯的應用的時候，使用咱們的桌面預覽窗口查看效果。

可視化工具 & 設計工具整合

Fuse 一樣也是爲設計師準備的，雖然一些人以爲使用標記語言是 OK 的，但更多的人更但願有可視化工具。另外，從其餘工具裏導入素材的功能對他們而言也頗有用。

固然，對任何人而言，前端的工做是在不斷迭代的。即使是使用文本編輯器加上終端的中堅程序員也應該能夠發現一個選色器或是一個調整字體大小的遊標是頗有好處的。

這些功能的早期版本（原型）已經被加入到 Fuse 中一段時間了。須要指出的是：一個幫你實時調整 UX 屬性的檢查器和 Sketch 導入工具。不過這只是一個開始。咱們如今正在在 Fuse 中構建一個更加大型的工具組，來組成一整套可視化工做流，從佈局到動畫，手勢，還有導航。

從這一點而言，NativeScript 和 React Native 都沒法提供這些。

還有，不過帶有些偏見，我想說的是 Fuse 的架構讓這一切變的可能。既然 「一切皆可視，一切皆可觸」（everything visual and interactive）是經過 UX 來完成的，那麼你就擁有的強大工具，就是一個基本的 WYSIWYG（所見即所得） 的 XML 編輯器。

這和我下一個觀點有關……

Live reload / 實時編輯

這三種解決方案都提供了一些 hot reload 的功能，在咱們對代碼作出一些改動的時候，自動地將這些修改應用到所鏈接的設備上。這顯然對咱們是頗有用處的，提供了更流暢的工做流，而再也不是【改變-從新編譯-部署-測試】的循環。

不過，Fuse 有一點不一樣，將這個概念更進一步。

首先，除了 JavaScript 的更新外，Fuse 對 UX 標記作了一樣的事。這意味着即使這些都是原生代碼，你依然能夠在不須要從新編譯的狀況下調試動畫、導航、動效或是其餘 UX 提供的東西！

關於這一切是如何實現的，會再以後的技術文章中討論，不過簡單的說，在預覽模式下，Fuse 插入了一些額外的模塊代碼。這個模塊接收 UX 文件的更新，並自動初始化新的原生類，重現加載 UI。

接下來，這就意味着你再編輯代碼的時候，都再也不須要重啓應用！二者的差別：

• Hot reload：在文本編輯器中修改，保存文件，並讓應用重啓，來讓修改生效（可能還須要手動導航到你修改的地方）

• Fuse 中的實時編輯：經過拖動遊標來改變字體大小或者是圖片，都是同時發生的，實時的反饋。

目前這些都在 Fuse 的檢查器中操做，固然，一些新的可視化工具在上面也提到過了。

我以爲這說明了不一樣框架的理念上的不一樣。Fuse 專一於提供更加高效的構建應用的方式，而不只停留於 「節省開發者的編譯時間」。

結論

但願你對於 Fuse 是什麼以及它與其餘開發解決方案的不一樣之處有所瞭解了。固然我並非想說 「Fuse 是最幫的！」，我只是但願經過這篇文章，至少可讓大家瞭解爲何這個輪子值得造。

最好的總結多是：

雖然 React Native 和 NativeScript 的存在，讓 JavaScript 開發者可使用原生 UI，不過 Fuse 更近一步的爲開發者和設計師提供了更好的工做流，去專一於前端和用戶體驗。

這算是個有志向的目標，不過咱們以爲咱們作的是正確的。咱們也絕對會聽取大家的建議，因此只要你沒有這篇文章嚇到，你能夠在 fusetools.com/downloads 下載，並用起來。

固然，這篇文章可能並無徹底覆蓋到這些框架的技術差別，若是大家想了解 Fuse 的其餘東西，就告訴咱們。