大家好，我是卡颂。

作为前端，你和UI撕过逼么？

脑中的场景

前端：“上线日期定死了，你什么时候出设计稿？你不出稿子前面开发、测试都得加班！”

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

前端：“做好的先给我吧，我画动态页面”

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

前端流泪，后端缄默，究竟测试承当了所有......

你遇到过这种状况么？

您感觉实质起因是什么？如何能力最高效解决这个问题？

本文会提供一种思路以及可借鉴的产品。

欢送文末就这个问题探讨

问题起因

在古代 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开启一个新我的项目，流程如下：

  1. 由懂设计的前端基于mitosis开发初始代码
  2. 代码输入为设计稿
  3. 业余UI基于设计稿（合乎组件标准、响应式标准）润色
  4. 设计稿经由mitosis输入为任意前端框架代码
  5. 前端基于框架代码开发

这样，就解决了以上痛点。

总结

在我的项目开发过程中，前端须要与后端配合。长此以往，一部分前端同学涉足接口转发的中间层，成为业务+Node工程师。

同样，前端也须要与UI配合，会不会如上文所构想，将来会呈现一批UI+前端工程师呢？