你們好,我是卡頌。前端
做爲前端,你和UI
撕過逼麼?node
前端
:「上線日期定死了,你何時出設計稿?你不出稿子後面開發、測試都得加班!」git
UI
:「快了快了,別催~」github
前端
:「作好的先給我吧,我畫靜態頁面」編程
UI
:「快了快了,別催~」json
前端
流淚,後端
沉默,終究測試
承擔了全部......後端
你遇到過這種狀況麼?前端框架
您以爲本質緣由是什麼?如何才能最高效解決這個問題?markdown
本文會提供一種思路以及可借鑑的產品。框架
歡迎文末就這個問題討論
在現代 Web 開發困境與破局一文中,做者牛岱談到當前前端與UI
的配合模式以下:
圖片來自:現代 Web 開發困境與破局
UI
在設計軟件上完成設計邏輯、繪製頁面樣式,交付給前端。
前端根據UI
繪製的樣式重現用CSS
+HTML
在網頁中再繪製一遍樣式,繪製完畢後再添加功能邏輯。
爲何UI
用設計軟件繪製的頁面樣式,前端還須要重複繪製一次?僅僅由於UI
用設計軟件,而前端須要編程麼?
因此,理想的分工應該以下:
圖片來自:現代 Web 開發困境與破局
即UI
完成設計邏輯與頁面樣式(經過設計軟件),軟件根據規範生成前端可用的靜態頁面代碼,前端基於生成的代碼編寫功能邏輯。
大白話講就是:
前端不用畫靜態頁了
雖然這套流程有諸多難點須要解決,好比:
對於UI
來講,頁面是一張張圖層,對於前端則是一個個組件,怎麼對齊這二者差別
須要UI
瞭解基本的頁面佈局(浮動、flex
、絕對定位...),才能生成符合響應式規範的靜態頁
可是,瑕不掩瑜,若是能跑通這套流程,開發效率將極大提高。
mitosis就是這方面的一次大膽嘗試。
BuilderIO
是一家低代碼平臺,主作拖拽生成頁面。mitosis
的做者是BuilderIO
的CEO
。
用一張圖歸納mitosis
的定位:
左起第一排分別是:sketch
、Figma
、BuilderIO
,前二者是知名設計軟件,後者是低代碼平臺。
當UI
使用這些軟件完成頁面設計,經由插件輸出到mitosis
後,mitosis
能將其輸出成多種知名前端框架代碼。
設計圖一步到位變成前端框架代碼,前端就不用畫靜態頁了。
他是怎麼作到的?
現代前端框架都是以組件做爲邏輯、視圖的分割單元。而組件是能夠被描述的。
好比React
的Fiber
,Vue
的VNode
,都是描述組件信息的節點類型。
mitosis
將設計圖轉化爲框架無關的JSON
,相似這樣:
{
"@type": "@builder.io/mitosis/component",
"state": {
"name": "Steve"
},
"nodes": [
{
"@type": "@builder.io/mitosis/node",
"name": "div",
"children": [
{
"@type": "@builder.io/mitosis/node",
"bindings": {
"value": "state.name",
"onChange": "state.name = event.target.value"
}
}
]
}
]
}
複製代碼
這段JSON
描述的是一個component
類型(即組件),其包含狀態name
,nodes
表明組件對應的視圖。
若是輸出目標是React
,那麼代碼以下:
export function MyComponent() {
const [name, updateName] = useState('Steve');
return (
<div> <input value={name} onChange={(e) => updateName(e.target.value)} /> </div>
);
}
複製代碼
若是你仔細看這張圖會發現,mitosis
還能反向輸出到設計軟件。
是的,mitosis
自己也是個框架。有意思的是,他更像是個前端框架縫合怪。
他採用了:
React
的Hooks
語法
Vue
的響應式更新
Solid.js
的靜態JSX
Svelte
的預編譯技術
Angular
的規範
上面的代碼例子,若是用mitosis
語法寫:
export function MyComponent() {
const state = useState({
name: 'Steve',
});
return (
<div> <input value={state.name} onChange={(e) => (state.name = e.target.value)} /> </div>
);
}
複製代碼
咱們在開篇談到阻礙前端直接使用設計軟件生成靜態代碼的兩個痛點:
對於UI
來講,頁面是一張張圖層,對於前端則是一個個組件,怎麼對齊這二者差別
須要UI
瞭解基本的頁面佈局(浮動、flex
、絕對定位...),才能生成複合響應式規範的靜態頁
咱們設想一下,當使用mitosis
開啓一個新項目,流程以下:
由懂設計的前端基於mitosis
開發初始代碼
代碼輸出爲設計稿
專業UI
基於設計稿(符合組件規範、響應式規範)潤色
設計稿經由mitosis
輸出爲任意前端框架代碼
前端基於框架代碼開發
這樣,就解決了以上痛點。
在項目開發過程當中,前端須要與後端配合。長此以往,一部分前端同窗涉足接口轉發的中間層,成爲業務+Node
工程師。
一樣,前端也須要與UI
配合,會不會如上文所設想,將來會出現一批UI+前端
工程師呢?