前端這個工種未來僅僅只是前端嗎？

前端這個工種未來會繼續(xù)拆分么？

大家好，我是卡頌。

作為前端，你和UI撕過逼么？

腦中的場景

前端：“上線日期定死了，你什么時候出設(shè)計稿？你不出稿子后面開發(fā)、測試都得加班！”

UI：“快了快了，別催～”

前端：“做好的先給我吧，我畫靜態(tài)頁面”

UI：“快了快了，別催～”

前端流淚，后端沉默，終究測試承擔了所有......

你遇到過這種情況么？

您覺得本質(zhì)原因是什么？如何才能最高效解決這個問題？

本文會提供一種思路以及可借鑒的產(chǎn)品。

歡迎文末就這個問題討論

問題原因

在現(xiàn)代 Web 開發(fā)困境與破局^[1]一文中，作者「牛岱」談到當前前端與UI的配合模式如下：

UI在設(shè)計軟件上完成設(shè)計邏輯、繪制頁面樣式，交付給前端。

前端根據(jù)UI繪制的樣式重現(xiàn)用CSS+HTML在網(wǎng)頁中再繪制一遍樣式，繪制完畢后再添加功能邏輯。

為什么UI用設(shè)計軟件繪制的頁面樣式，前端還需要重復(fù)繪制一次？僅僅因為UI用設(shè)計軟件，而前端需要編程么？

所以，理想的分工應(yīng)該如下：

即UI完成設(shè)計邏輯與頁面樣式（通過設(shè)計軟件），軟件根據(jù)規(guī)范生成前端可用的靜態(tài)頁面代碼，前端基于生成的代碼編寫功能邏輯。

大白話講就是：

前端不用畫靜態(tài)頁了

雖然這套流程有諸多難點需要解決，比如：

• 對于UI來說，頁面是一張張圖層，對于前端則是一個個組件，怎么對齊這兩者差異

• 需要UI了解基本的頁面布局（浮動、flex、絕對定位...），才能生成符合響應(yīng)式規(guī)范的靜態(tài)頁

但是，瑕不掩瑜，如果能跑通這套流程，開發(fā)效率將極大提升。

mitosis^[2]就是這方面的一次大膽嘗試。

一次大膽嘗試

BuilderIO是一家低代碼平臺，主做拖拽生成頁面。mitosis的作者是BuilderIO的CEO。

用一張圖概括mitosis的定位：

左起第一排分別是：sketch、Figma、BuilderIO，前兩者是知名設(shè)計軟件，后者是低代碼平臺。

當UI使用這些軟件完成頁面設(shè)計，經(jīng)由插件輸出到mitosis后，mitosis能將其輸出成多種知名前端框架代碼。

設(shè)計圖一步到位變成前端框架代碼，前端就不用畫靜態(tài)頁了。

他是怎么做到的？

現(xiàn)代前端框架都是以「組件」作為邏輯、視圖的分割單元。而「組件」是可以被描述的。

比如React的Fiber，Vue的VNode，都是描述組件信息的節(jié)點類型。

mitosis將設(shè)計圖轉(zhuǎn)化為框架無關(guān)的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類型（即組件），其包含狀態(tài)name，nodes代表組件對應(yīng)的視圖。

如果輸出目標是React，那么代碼如下：

export function MyComponent() {
  const [name, updateName] = useState('Steve');

  return (
    <div>
      <input
        value={name}
        onChange={(e) => updateName(e.target.value)}
      />
    </div>
  );
}

小小心機

如果你仔細看這張圖會發(fā)現(xiàn)，mitosis還能反向輸出到設(shè)計軟件。

是的，mitosis本身也是個框架。有意思的是，他更像是個「前端框架縫合怪」。

他采用了：

• React的Hooks語法

• Vue的響應(yīng)式更新

• Solid.js的靜態(tài)JSX

• Svelte的預(yù)編譯技術(shù)

• Angular的規(guī)范

上面的代碼例子，如果用mitosis語法寫：

export function MyComponent() {
  const state = useState({
    name: 'Steve',
  });

  return (
    <div>
      <input
        value={state.name}
        onChange={(e) => (state.name = e.target.value)}
      />
    </div>
  );
}

未曾設(shè)想的道路？

我們在開篇談到阻礙前端直接使用設(shè)計軟件生成靜態(tài)代碼的兩個痛點：

• 對于UI來說，頁面是一張張圖層，對于前端則是一個個組件，怎么對齊這兩者差異

• 需要UI了解基本的頁面布局（浮動、flex、絕對定位...），才能生成復(fù)合響應(yīng)式規(guī)范的靜態(tài)頁

我們設(shè)想一下，當使用mitosis開啟一個新項目，流程如下：

1. 由懂設(shè)計的前端基于mitosis開發(fā)初始代碼

2. 代碼輸出為設(shè)計稿

3. 專業(yè)UI基于設(shè)計稿（符合組件規(guī)范、響應(yīng)式規(guī)范）潤色

4. 設(shè)計稿經(jīng)由mitosis輸出為任意前端框架代碼

5. 前端基于框架代碼開發(fā)

這樣，就解決了以上痛點。

總結(jié)

在項目開發(fā)過程中，前端需要與后端配合。久而久之，一部分前端同學涉足接口轉(zhuǎn)發(fā)的中間層，成為業(yè)務(wù)+Node工程師。

同樣，前端也需要與UI配合，會不會如上文所設(shè)想，未來會出現(xiàn)一批UI+前端工程師呢？

參考資料