1. 程式人生 > 其它 >用對跨端方案,讓開發效率飛速提升

用對跨端方案,讓開發效率飛速提升

一端開發,多處執行,你找到最優解了嗎?
眾所周知,很多平臺都採用了跨端開發(跨平臺開發)的方式。相對於原生開發,跨端開發有開發成本低、開發週期短、開發難度小等諸多優點。 那麼,什麼是跨端開發?   首先,我們來理解一下什麼是端。像Andriod、PC、IOS、ipad等,我們可以稱之為使用者終端,也是作為我們應用程式所執行的平臺,這種終端作業系統往往有其自己的開發語音,而終端系統有排他性(例如Andriod和IOS互不相容),如果我們使用某作業系統的語法進行開發應用,那麼在其他系統上就跑不起來,如IOS原生應用不能跑在Andriod上。   然後,我們再理解一下什麼是跨端。顧名思義,跨端指的是跨終端,例如:跨PC端,跨多Native平臺,跨Web,跨POS機,跨手錶裝置等。
  最後,我們再看看什麼是跨端開發。我們所說的跨端開發,就是使用非封閉式系統語言開發使得應用能夠在多個封閉式作業系統中執行。在這些多種多樣的跨端訴求基礎上,相對應的,是百花齊放的跨端方案。

主流跨端開發方案

跨端方案或多或少都能過起到研發降本增效的作用,方案各自有其優劣勢。目前市面上主流跨端開發方案有以下4種:

1、以 Web 為基礎的 H5 Hybrid 方案

這類方案簡單來說就是用網頁來跨端。現在絕大多數端上(甚至包括封閉的小程式生態)都支援 Webview,所以只要開發網頁然後投放到多個端即可,在桌面端對應的方案就是Electron。   從開發成本低、標準統一、生態繁榮上來說,H5 Hybrid 方案優秀。但這種方案的劣勢也非常明顯,就是效能和體驗存在顯著的差距,同時Web 的生態繁榮來自於其良好的歷史相容性,也意味著沉重的歷史包袱。
 

2、React-Native/Weex 類方案

React-Native/Weex 這類方案通過儘可能的取長補短,綜合了Web生態和Native元件,讓JS 執行程式碼後用 Native的元件進行渲染,以解決拋棄Web歷史包袱的問題。   方案同樣存在一些缺陷:iOS/Android 雙端本身不一致的元件和佈局機制,讓雙端一致性難以得到保障;依賴於 Native 機制也讓一些CSS 屬性實現起來比較困難,例如z-index問題。 另外,這套方案也需要非常高的維護支援成本:如借用了 Web的生態但並不完全是Web生態,很多地方不一致,例如慣用的CSS 佈局方式無法使用。

3、Flutter

Flutter不繼續在Web 生態上借力,從設計之初也並沒有把 Web 生態考慮進去。相比於RN依賴Native View渲染,Flutter則是自繪元件,通過 Skia繪製到螢幕上。   由於可以完全發揮 GPU 的能力,也不需要去 Native 繞一圈。Flutter 理論上能做到更好的效能和兩端一致性,這一意味著理論上未來可能基於 Flutter 的 JS 動態化方案能夠在樣式上支援的比 WEEX 更好。   但從前端開發視角看,Flutter更像是一個Native開發方案而非跨端方案(雖然其實是跨 Android/iOS 的)。目前最主要的問題是Flutter for Web 從技術原理上來說離生產可用可能還非常遙遠,動態化能力的確實也會讓部分場景不適用。  

4、小程式執行時方案

這個方案可以說是筆者認為目前價效比最高的方案,沒有之一。   應用體驗方面,小程式技術是前端容器技術的一種應用,其元件及UI都有明確的規範,開發者不用考慮相容性及類似H5開發時複雜工具及框架的選擇。同時,由於元件及UI都是預設的,展示體驗也會更佳。   應用框架支援方面某些執行時方案不僅支援純 wxml 微信小程式執行,還支援包括 uniapp、 Taro、kbone 等第三方框架整合的小程式。   宿主環境結合方面小程式是基於App端實現的應用,其獲取系統(App)的許可權也會多於H5;隨著微信小程式的潮流引領,各大主流網際網路平臺的追隨,小程式技術的發展已經趨於成熟,市面上小程式以執行時已經開始出現多智慧終端裝置的適配(基於Andriod系統的多終端螢幕適配)。

跨端開發的本質是實現降本增效

我們無法奢望一個技術方案就能解決所有的跨端問題,只能選擇更適合自己業務增長的長效技術治理方案。跨端開發的本質是實現降本增效,在對於業務支撐做新的技術方案選型的同時,更重要的是如何讓這種提效真的長治久安,讓我們的提效不會變成從一個新方案跳到另外一個新方案   這裡想給大家介紹一下FinClip小程式執行時專案。  

說說核心技術層面

FinClip是小程式容器技術,上述說的跨端技術優勢都具備,包括:應用體驗由於H5,應用框架支援多種主流框架生成的小程式,多終端裝置(宿主)環境友好且相容。 另外,檢視層與邏輯層分離也帶來了許多好處:   1、方便多個小程式頁面之間的資料共享和互動。在小程式的生命週期中具有相同的上下文可以為具備原生應用程式開發背景的開發人員提供熟悉的編碼體驗; 2、Service和View的分離和並行實現可以防止JS執行影響或減慢頁面渲染,這有助於提高渲染效能 3、因為JS在Service層執行,所以JS裡面操作的DOM將不會對View層產生影響,所以小程式不能操作DOM結構的,這也使得小程式的效能比傳統的H5更好  

說說基礎建設層面

底層支撐方案需要有完善的、可拓展或可二次開發的基礎建設模組,才能夠真正意義上實現長期降本增效。   FinClip自帶企業端管理後臺,方便企業統一管理小程式上下架、宿主裝置關聯和繫結、以及基礎的資料分析功能。   FinClip提供小程式 IDE 開發工具,介面與微信小程式的開發工具類似,自帶除錯和真機預覽,簡單易上手。你可以在這個 IDE 裡面,對現有專案進行二次開發,擴充套件功能和介面,或者從零開始寫出一個小程式。   有商業生態的企業,可以嘗試使用FinClip開放自己的小程式生態,讓合作伙伴開發小程式上架到自己的 App 中,形成豐富多彩的場景與功能,服務客戶。例如銀行信用卡 App 可以上架大量的第三方消費場景類小程式,旅遊 App 可以上架食住行類合作伙伴的小程式,最終實現的是以客戶為中心的數字化服務閉環。   跨端開發方案有很多,選型需要從技術、業務以及可拓展等方面進行綜合考慮,才能真正實現降本增效的作用。