前端這個工種未來會繼續(xù)拆分么？
作者：卡頌
來源：SegmentFault 思否社區(qū)
大家好，我是卡頌。
作為前端，你和UI撕過逼么？
腦中的場景
前端：“上線日期定死了，你什么時候出設(shè)計稿？你不出稿子后面開發(fā)、測試都得加班！”
UI：“快了快了，別催～”
前端：“做好的先給我吧，我畫靜態(tài)頁面”
UI：“快了快了，別催～”
前端流淚，后端沉默，終究測試承擔(dān)了所有......
你遇到過這種情況么？
您覺得本質(zhì)原因是什么？如何才能最高效解決這個問題？
本文會提供一種思路以及可借鑒的產(chǎn)品。
歡迎文末就這個問題討論
問題原因
在現(xiàn)代 Web 開發(fā)困境與破局一文中，作者牛岱談到當(dāng)前前端與UI的配合模式如下：
圖片來自“現(xiàn)代 Web 開發(fā)困境與破局”
UI在設(shè)計軟件上完成設(shè)計邏輯、繪制頁面樣式，交付給前端。
前端根據(jù)UI繪制的樣式重現(xiàn)用CSS+HTML在網(wǎng)頁中再繪制一遍樣式，繪制完畢后再添加功能邏輯。
為什么UI用設(shè)計軟件繪制的頁面樣式，前端還需要重復(fù)繪制一次？僅僅因為UI用設(shè)計軟件，而前端需要編程么？
所以，理想的分工應(yīng)該如下：
圖片來自“現(xiàn)代 Web 開發(fā)困境與破局”
即UI完成設(shè)計邏輯與頁面樣式（通過設(shè)計軟件），軟件根據(jù)規(guī)范生成前端可用的靜態(tài)頁面代碼，前端基于生成的代碼編寫功能邏輯。
大白話講就是：
前端不用畫靜態(tài)頁了
雖然這套流程有諸多難點需要解決，比如：
對于UI來說，頁面是一張張圖層，對于前端則是一個個組件，怎么對齊這兩者差異 需要UI了解基本的頁面布局（浮動、flex、絕對定位...），才能生成符合響應(yīng)式規(guī)范的靜態(tài)頁
一次大膽嘗試
{
"@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"
}
}
]
}
]
}
export function MyComponent() {
const [name, updateName] = useState('Steve');
return (
<div>
<input
value={name}
onChange={(e) => updateName(e.target.value)}
/>
</div>
);
}
小小心機(jī)
React的Hooks語法 Vue的響應(yīng)式更新 Solid.js的靜態(tài)JSX Svelte的預(yù)編譯技術(shù) Angular的規(guī)范
export function MyComponent() {
const state = useState({
name: 'Steve',
});
return (
<div>
<input
value={state.name}
onChange={(e) => (state.name = e.target.value)}
/>
</div>
);
}
未曾設(shè)想的道路？
對于UI來說，頁面是一張張圖層，對于前端則是一個個組件，怎么對齊這兩者差異
需要UI了解基本的頁面布局（浮動、flex、絕對定位...），才能生成復(fù)合響應(yīng)式規(guī)范的靜態(tài)頁
由懂設(shè)計的前端基于mitosis開發(fā)初始代碼 代碼輸出為設(shè)計稿 專業(yè)UI基于設(shè)計稿（符合組件規(guī)范、響應(yīng)式規(guī)范）潤色 設(shè)計稿經(jīng)由mitosis輸出為任意前端框架代碼 前端基于框架代碼開發(fā)
總結(jié)
