重塑前端工做流-Lugia正式版發佈

前言

從 2018 年 5月創建第一個 Lugia 相關的倉庫起，時隔一年多，22萬+的代碼量，3500+次的提交，Lugia 終於迎來了它的第一個正式版本 1.1.0。在今年年初，咱們已經在內部發布了技術預覽版 1.0.0，以驗證咱們的整套大前端解決方案，又通過半年多的時間打磨，咱們決定在社區分享咱們的成果。話很少說，讓咱們先看一段視頻感覺下 Lugia 的魅力，體會它是如何重塑前端工做流的。

前往知乎觀看

Lugia 是什麼？

Lugia 是一整套面向雲原生化大前端生態解決方案。咱們但願把交互設計與前端應用代碼開發有機的融爲一體，造成一種跨時代的大前端生態技術規範。

在如今的版本中，咱們重點發布了四款產品：

• Lugia Design：大道至簡的設計規範。對於設計來講，知性能夠同時定義爲 「 形式上的優美和極致 」 和 「 科學上的精確和簡潔 」，咱們相信知性的設計，實現了兩者的完美契合。
• LugiaX：一個基於 Redux 的前端狀態管理工具。提供簡單高效的全局狀態管理方案、 基於 async/await 的異步操做、快捷的雙向綁定。LugiaX 內置路由庫，對 react-router 作了輕量封裝，使用起來更加簡單明瞭。
• Lugia Web：一套基於 Lugia Design 的高品質 React 組件庫，知足B端行業高性能組件的需求，適用於 Web 端。
• Lugia Mega：標準、高效、開箱即用的前端可視化設計開發工具。Lugia Mega 是一個無需環境搭建、快速上手的跨平臺桌面應用（Mac 和 Windows）。研發制定了元信息中間語言描述規範LugiaD，爲開發人員提供可視化交互設計、屏蔽底層開發工具鏈和底層前端開發框架（React OR VUE）、以及元信息註冊式的開發方式。幫助設計師、產品經理快速設計產品，成果能夠直接讓開發人員使用。Lugia Mega 貫穿了整個項目的生命週期，讓您極速構建前端應用、輕鬆管理全部項目。

Lugia Mega 是整套大前端技術生態解決方案對外輸出的主要承載體。Lugia Design、Lugia Web、 LugiaX等產品會與 Lugia Mega 總體打包向用戶輸出使用。

重塑前端工做流

在傳統的前端開發中，產品經理把需求和原型給到設計和交互，而後設計和交互同窗出設計和交互稿，前端同窗拿到稿子後作代碼實現。整個流程是串行的，並且相互之間的成果不能共享複用，生產力大大下降。咱們知道在目前的前端開發中，有不少實現是重複的、反覆修改是十分廣泛的。我想在這個工做流當中的每一個人都想要改變這個低效的現狀。

通過一年多的研發，咱們從新梳理了整個前端開發工做流，把成果複用和打通工具鏈路做爲突破口：

• 成果複用：咱們把開發中的組件抽象成最小單元，頁面是由組件組合而成，行爲和狀態由模型管理。在這裏，不論是組件、頁面，仍是模型等，都是結構化的、可迭代複用的。
• 打通工具鏈：每一個職位都有相應的工具，這些工具確實能夠提升生產力，可是這個工具是割裂的、分散的，咱們都知道溝通和切換工具是很是耗時費力的，無形中生產力便會大大下降。咱們從新設計了整個工做鏈路，用 GUI 客戶端的形式，內置工做鏈路中須要的全部工具，UE、UI、前端等都在一個工具中工做。只須要下載安裝，開箱即用。還有比這更簡單高效的嗎？

全部人的生產力都在一個並行矩陣中，勁往一處使，不再是「香飄飄連起來繞地球一整圈」了。

基於此，咱們設計研發了 Lugia Mega 這個前端可視化設計開發工具，重塑前端開發流程，不一樣職位的產出成果能夠直接迭代複用，從而知足雲原生大前端的快速迭代開發需求。

咱們作那麼多事情，最本質的目的就是要提升生產力，達到下降開發成本，提升前端開發質量，提高用戶體驗的效果。

Lugia Mega的設計理念和實現方案

特性

• 標準：約定、配置、初始化、原型設計、效果設計、模型綁定、開發調試、構 建、依賴管理、項目管理、Mock 服務、代理配置...... Lugia Mega 貫穿了整個前端項目的生命週期並採用業內最優秀的解決方案。
• 高效：高品質的物料體系，豐富易用的主題樣式，高效快捷的模型管理，讓您極速構建前端應用、輕鬆管理全部項目。
• 開箱即用：Lugia Mega 是一個無需環境搭建、快速上手的跨平臺桌面應用(Mac 和 Windows)。經過簡單的拖動操做幫助產品經理、設計師快速設計原型、交互稿，成果能夠直接讓開發人員使用。

功能組成

Lugia-mega 主要由項目管理、頁面設計器、物料體系、開發工具鏈、模型規範等部分組成。

1.項目管理

對符合 lugia-mega 規範的前端項目進行管理

• 建立項目:建立新項目時，提供推薦腳手架和佈局等功能，而且有高級配置項能夠自定義建立項目。
• 導入項目:導入一個符合 lugia-mega 規範的項目，進行多人協同開發。
• 多個項目間切換:能夠在已經建立好的項目間快速進行切換，方便用戶同時開發多 個項目。
• 項目歷史記錄:會記錄項目的操做歷史，以方便用戶在下次使用時快速進行開發。
• 項目配置管理:對項目進行主題、佈局、依賴、mock 數據等的配置管理，還有一些 默認配置項的設置。
• 刪除項目:刪除一個項目。可選保留項目源文件，依舊能夠打包部署，也能夠再次導入到 lugia-mega 中繼續開發。

2. 頁面設計器

經過對所需物料的拖拽、組合等方式來完成整個頁面設計稿

• 物料選擇面板：在設計頁面時選項所需的物料（組件庫、自定義組件、區塊、佈局等），經過拖拽等方式移至畫布區域。
• 畫布區域：當前設計的頁面，經過對所選的物料進行移動、刪除、編輯、組合等操做完成設計稿。
• 檢查器面板：檢查器能夠顯示編輯當前選擇的組件屬性，進行參數的調整。用戶能夠基於本身的需求在檢查器面板進行屬性樣式的調試。
• 響應式工具：提供設計響應式頁面的能力。
• 頁面管理：對當前項目的全部頁面進行新建、編輯、刪除等管理操做。

3. 物料體系

物料體系是 lugia-mega 重要的生產力要素

• 腳手架：建立一個新項目時所需的基礎工程項目，通常包含菜單佈局、基礎頁面、工具函數、自定義配置項等。腳手架要符合物料體系規範，並經過lugia-mega的對接機制對項目進行配置。
• 官方組件庫：基於 Lugia Design 的高品質React組件庫 Lugia Web，知足B端行業高性能組件的需求。
• 自定義組件：根據業務需求，經過編碼的形式，對組件進行高度定製，並經過lugia-mega的對接機制接入使用。
• 區塊：爲了更加快捷的構建一個頁面，將部分組件拼合成一個功能區塊，只需簡單組合即可以造成一個頁面。
• 業務模型：經過 lugia-mega的對接機制把現有項目的業務模型複用到其餘項目中。

4. 開發工具鏈

提供開發現代單頁應用須要的全部環境，是 lugia-mega 組成部分的連接器

• 項目開發調試：提供一個簡單方便的開發調試環境，並具備 live reloading (實時從新加載) 功能。支持browser-sync，保持多個瀏覽器和設備同步。
• 項目打包構建：把項目部署所需的資源構建在一塊兒，並優化整個應用以提供最佳性能，自動按需加載，加快頁面訪問速度。
• 項目mock服務：mock數據是前端開發過程當中必不可少的一環，是分離先後端開發的關鍵鏈路。經過預先跟服務器端約定好的接口，模擬請求數據甚至邏輯，可以讓前端開發獨立自主，不會被服務端的開發所阻塞。支持引入 json、excel、csv 格式的文件做爲數據來源。
• 項目單元測試：交互式的單元測試，內置支持覆蓋率報告功能，包括 UI 測試。
• 元信息轉換器：把頁面設計器生成的元信息轉換爲可執行代碼。
• 物料信息生成工具：生成可供 lugia-mega 使用的物料信息，以便把頁面設計器須要的物料對接到 lugia-mega 中。

5. 模型規範

模型規範分離了用戶視圖和業務邏輯，lugia-mega 能夠複用已有項目的業務模型

• 模型管理： 對項目中的業務模型進行管理，包括建立、查看、刪除等，並接入到 lugia-mega 中進行使用。
• 業務開發：使用前端狀態管理工具lugiax進行業務模型的邏輯編碼。lugiax提供簡單高效的全局狀態管理方案、 基於async/await 的異步操做、快捷的雙向綁定。
• 單項綁定：在lugia-mega中以可視化的方式快捷的把業務模型中的狀態綁定到選中的組件上。
• 雙向綁定：在 lugia-mega中以可視化的方式把組件中拋出的事件和業務模型的狀態綁定到一塊兒。

用戶使用流程

Lugia Mega 的用戶羣體大概分爲兩類，一類是負責設計頁面的設計師或者產品經 理，一類是負責業務邏輯開發的前端工程師。

實現技術

Lugia Mega 基於 Electron 框架開發，視圖層使用了 React 技術棧。

這是 Lugia Mega 的整個技術架構圖：

Lugia Mega 各個功能點的實現是分散到多個單獨模塊的。這些功能模塊會經過組合的形式來支撐 Lugia Mega。好比新建項目、開發構建等功能都是調用子進程調用相應的模塊進行操做的。

One More Thing

咱們正在積極開發 Lugia 下一個大版本，整體目標是經過提供以物料體系、插件體系爲內核的生態能力，加上官方維護的核心物料、插件，繁榮的社區物料、插件，實現一個開放、自由定製的大前端可視化設計開發工具。

咱們將要作的：

• 快捷的生態共建能力，物料體系、插件體系
• 自定義主題功能，腳手架能夠配置
• 場景化 IDE，引入 Monaco、xterm.js、ChromeDevTools、文件操做、模擬器等 ……

固然了，咱們計劃在1.x 版本中還會新增 30+ 特性，隨着版本的升級會陸續推出來。

最後

歡迎你們隨時在 GitHub 反饋問題、提供建議、發起 PR！有了你們的參與，Lugia 會變的更好。

但願你們多多 Star 啊！

相關連接

GitHub：github.com/lugia-ysste…

官網：Lugia 大前端生態技術解決方案

知乎專欄：有介紹和教學視頻嗷

贏時勝研究院

2019年8月8日