前端架構之移動端混合架構(hybrid)

__7克__發表於2018-07-10

前端架構之移動端混合架構(hybrid)

從過去的切圖仔到如今的大前端,前端這一新興發展起來的領域已經在軟體行業變得尤為重要,一款重前端產品的成敗更在於他的架構。

架構

軟體整體結構與內部元件,外部軟體高效配合的合理設計。

好架構的標準

  • 擴充套件性
  • 穩定性
  • 維護性

移動端混合架構(hybrid)

使用場景

  • 創業型公司:這種型別公司的產品前期只有較為明確的理論基礎,並沒有很多實戰經驗和較大的使用者群體,還處於較為盲目混亂的階段。快速迭代產品,更快佔領市場是他們的核心訴求。
  • 更新較為頻繁的展現較多的產品:網頁的一大優點就是更新快,無需釋出。
  • 效能要求不高對手機硬體依賴較弱:網頁的缺點是無法直接呼叫本地硬體,採用該架構一定避免其劣勢。

基本結構

架構圖


此架構主要分為三大部分:

  • 資料 根據使用場景不同選擇最優儲存介質。
  1. 需要和app共享的資料可以放在app的儲存空間中通過jsBrige獲取和儲存。
  2. 需要持久化並且要在不同使用者直接共享的資料儲存在服務端也就是資料庫中,使用ajax互動。
  3. 單純在h5頁面直接共享的資料放在記憶體或者cookie中。
  • 檢視 根據不同的技術棧和場景使用不最優的前端框架。
  • app app提供一系列通用元件例如登入,城市列表等。

關鍵問題

app需要提供的通用方法和元件
  • 網路狀態
  • 加密,解密方法
  • toast提示
  • 本地相簿
  • 本地攝像頭
app和web的界線

由於該架構屬於混合開發,難免出現某一個需求應該應該由app開發還是web開發。開發者可以根據以下特徵定位,例如登入模組,不會頻繁更新,具有通用性,對效能要求較高,並且設計到安全問題,所以更加適合由app開發。對於手機硬體的使用app儘量提供對應介面供web使用,介面和功能解耦。二者開發都合適優先使用web開發,畢竟web開發速度快。


未完待續

相關文章