前端这个工种未来会继续拆分么？
SegmentFault
共 3875字，需浏览 8分钟
·
2021-08-06 10:19
作者：卡颂
来源：SegmentFault 思否社区
大家好，我是卡颂。
作为前端，你和UI撕过逼么？
脑中的场景
前端：“上线日期定死了，你什么时候出设计稿？你不出稿子后面开发、测试都得加班！”
UI：“快了快了，别催～”
前端：“做好的先给我吧，我画静态页面”
UI：“快了快了，别催～”
前端流泪，后端沉默，终究测试承担了所有......
你遇到过这种情况么？
您觉得本质原因是什么？如何才能最高效解决这个问题？
本文会提供一种思路以及可借鉴的产品。
欢迎文末就这个问题讨论
问题原因
在现代 Web 开发困境与破局一文中，作者牛岱谈到当前前端与UI的配合模式如下：
图片来自“现代 Web 开发困境与破局”
UI在设计软件上完成设计逻辑、绘制页面样式，交付给前端。
前端根据UI绘制的样式重现用CSS+HTML在网页中再绘制一遍样式，绘制完毕后再添加功能逻辑。
为什么UI用设计软件绘制的页面样式，前端还需要重复绘制一次？仅仅因为UI用设计软件，而前端需要编程么？
所以，理想的分工应该如下：
图片来自“现代 Web 开发困境与破局”
即UI完成设计逻辑与页面样式（通过设计软件），软件根据规范生成前端可用的静态页面代码，前端基于生成的代码编写功能逻辑。
大白话讲就是：
前端不用画静态页了
虽然这套流程有诸多难点需要解决，比如：
对于UI来说，页面是一张张图层，对于前端则是一个个组件，怎么对齐这两者差异 需要UI了解基本的页面布局（浮动、flex、绝对定位...），才能生成符合响应式规范的静态页
一次大胆尝试
{
"@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>
);
}
小小心机
React的Hooks语法 Vue的响应式更新 Solid.js的静态JSX Svelte的预编译技术 Angular的规范
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开发初始代码 代码输出为设计稿 专业UI基于设计稿（符合组件规范、响应式规范）润色 设计稿经由mitosis输出为任意前端框架代码 前端基于框架代码开发
总结
评论