前端這個工種將來會繼續拆分麼？

你們好，我是卡頌。前端

做爲前端，你和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+前端工程師呢？