百度外賣如何作到前端開發配置化

內容來源：2017年5月13日，徐辛承在「H5夢工場」進行《前端開發配置化方案》演講分享。IT大咖說做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。

閱讀字數：2017 | 9分鐘閱讀

摘要

前端開發的主要職能就是把網站的界面更好地呈現給用戶，它涵蓋的知識面很是廣，既有具體的技術，又有抽象的理念。百度外賣高級前端工程師徐辛承，爲咱們帶來關於百度外賣前端開發配置化方案的分享。

嘉賓演講視頻地址： t.cn/RolWhbl

內部平臺開發中的痛點

全部業務線由一個大的內部平臺來完成，最後集中下放到APP中。這個系統的缺點就是重複性工做不少。

以banner配置爲例，咱們發現頁面功能類似度高，重複工做較多。咱們以前的開發模式在搭建基礎頁面時，主要靠複製另外一個相似項目的代碼，在此基礎上進行修改來完成。同時因爲一個代碼可能要多人開發，代碼風格難以統一。

受到了百度H5的啓發，咱們最終想到要經過一個平臺來解決這些問題。百度H5是經過拖拽的方式來生成H5活動頁面的一個平臺，它的組件很是豐富。它整個頁面的設計思路和如今一些組件化框架的思路很類似。它把頁面中的元素拆分到以組件爲最小單位，經過組件構成一個頁面。

但其實它並不適合咱們的業務場景。由於在這樣一個平臺中，咱們內部平臺的交互沒法支持，組件也不能拓展。

咱們想要的得是一個簡單的平臺，全部角色都能使用，拖拽界面適用度高，你們樂於接受。

咱們但願任何頁面都能用可視化的方式去完成。咱們會提供豐富的組件庫、交互的配置方式，同時也提供了自定義拓展腳本，經過配置化的方式去生成頁面。

由於是咱們本身的團隊來開發這個項目，因此咱們但願這個項目的可維護性很強。咱們會用熟悉的技術棧開發，用可擴展性強的方式去挖掘技術棧底層內容，模塊會拆分得很詳細。

最終基於這些想法，咱們開發了Blocks平臺。

頁面配置平臺Blocks

1

什麼是Blocks？

Blocks是一個拖拽+配置生成的系統。組件是頁面中的最小單位，Blocks有拖拽形式的頁面畫布，能夠支持組件的添加和擴展、支持自定義腳本。Blocks是基於vue2.0開發。

2

頁面配置模塊

頁面配置模塊主要分爲組建列表、頁面畫布和設置組件屬性。它的輸出是config.js，同時會在mapConfig.js裏預留事件鉤子。

3

腳本配置模塊

由於如今尚未徹底實現可視化，咱們在JSON文件裏開發擴展腳本，生成了一些事件鉤子去更快地開發代碼。

4

頁面渲染引擎

頁面渲染引擎是最核心的部分。經過JSON配置文件生成頁面，解析組件的配置和層級關係，以及解析配置文件裏的自定義擴展腳本，最後渲染出頁面。

平臺核心設計

1

核心思想

咱們最初的想法是，輸入是JSON，輸出是Web Page。後來通過思考發如今一個JSON中實現輸入有些困難，因此把JSON拆分爲Config.js和MapConfig.js。

2

Config.js

3

爲何這麼作？

由於Virtual Dom Tree結構爲object，代碼量有明顯減小。基於Virtual Dom的實現，它的拓展性是很強的。

4

每個節點

針對每個Virtual Dom的節點，主要有三個屬性。

第一個是Tag，就是節點名稱，也能夠理解爲這個節點用的組件。

第二是Data，節點屬性。

Children是這個節點包含的全部節點。

5

MapConfig.js

之前用的框架是MVC，Model和View沒有框架實現，它們之間的交互都是經過Controller來解決。

這種命令性的開發方式會致使Controller開發效率底下，容易變得臃腫和難以維護。

6

腳本配置

在state裏它是一個驅動應用的數據源。View以聲明方式將state映射到視圖。而actions是響應在view上的用戶輸入致使的狀態變化。

但若是把代碼中的事件寫得很鬆散的話，並無辦法造成一個配置文件。因此咱們運用了Vuex。

Vuex是專爲Vue.js應用程序開發的狀態管理模式，也是集中管理狀態的一個工具，它以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex.store是MapConfig.js的一部分，它包含了State、Getters、Mutations和Actions。組件屬性在State裏，組件預埋的鉤子放在Mutations和Actions裏，Getters在須要的時候會用到。

Vuex提供了輔助函數mapState、mapGetters、mapMutations和mapActions在平臺中進行執行。

目前新增了頁面配置模塊和腳本配置模塊。

7

組件的引入

對通用組件庫和業務組件作了一次封裝。以input組件爲例，在寫input組件模版的時候須要寫一些相應的屬性，組件配置模塊把這些屬性抽離出來，以可視化的模式在表單中進行填寫。

每一個組件中主要分爲index.vue和setting.js。Index.vue是渲染在畫布和頁面中的一個模版文件，setting.js是一個組件設置表單。

8

腳本配置模塊

腳本配置模塊主要提供了Vuex.store的開發和組建內部事件擴展，將來還會增長常規事件的可視化配置。當公司內部RD接口變多的時候，接口規範會很難作到，若是有一個平臺能作到前端的交互和交互的規範，就能夠反向約束RD接口的規範，更能夠提升開發效率。

平臺現狀和規劃

1

收益對比

作這個平臺以前，在接口上沒有太多的規範。經過這個平臺能夠約束RD接口進行規範。有了規範以後能夠極大地提升工做效率。

以前咱們每一個人代碼風格不一樣，代碼質量很低，難以維護。經過拖拽的方式生成，質量會很高。

原來基本全部的工做都是由研發完成的，如今部分工做能夠外放，甚至當頁面簡單或者平臺作到極致的時候，就能夠實現0成本開發。

2

將來要作的工做

功能：把組件庫作得更豐富，儘可能支持更多的組件；提供一個組合件的功能和可視化的交互配置。

易用性：增長UI設計，作一些系統交互方面的優化。

落地：對老代碼作重構，用這個平臺作新項目開發。

個人分享到此結束，謝謝你們！

相關推薦

推薦文章

• 阿里巴巴前端專家渚薰：H5互動的正確打開方式
  

• 微信開發中的先後端之坑
  

近期活動

• 直播 | 2017紅象雲騰大數據基礎軟件V5.0發佈暨合做夥伴大會
  

原文地址：t.cn/RolTlsM