首页探索
..

面向未来的前端发展路径

2024.12.296views

当前前端所处阶段：大规模开发范式迁移阶段

image.png
在 AI 驱动下，涌现了新的开发技术，比如：

  • 新的前端脚手架工具：v0、bolt.new等
  • 新的样式语言：TailwindCSS

以前在聊到前端脚手架工具时，会提到 Vite、Create-React-App等，当前在 AI 驱动下，已经产生了V0这样的脚手架工具，利用 AI 快速生成更加匹配的初始化项目。

为什么TailwindCSS是 AI 驱动的样式语言呢？相比于传统 CSS，Tailwind更省 AI 的token。其次，原生 CSS 产生的样式覆盖问题在Tailwind中不会存在。再其次，Tailwind每一个类都更符合自己的命名规范，AI 在学习的时候更容易。而且其每一个类都能对应到 UI 设计中每一个token，可以把前端和 AI 打通，更好地直接将设计稿转成Tailwind样式组件代码。

AI赋能下，产生新的前端发展路径

image.png

基础：使用AI工具的前端专才

  1. 熟练使用AI编码辅助工具
  2. 前端理论知识

进阶1：制作AI工具的前端

为工作各个流程提效

进阶2：使用AI工具的前端多才

多才指以前端技能为核心能力，同时掌握与前端相邻、平行工种的工作技能

  • 相邻工种：UI、测试、后端、产品
  • 平行工种：其他端的前端

举两个多才的例子：

  • 创意工程师（https://sloshseltzer.com/）
  • 大前端开发工程师

解释：大前端开发工程师

国内现状：端碎片化，小程序、移动端、hybrid、web

存在多端开发需求：

  • 有实力公司：组建大前端团队
  • 省钱公司：跨端方案，UniApp、Taro、React Native、Flutter
    由于各端逻辑一致，同时掌握多端能力，实现一端后，就能借助AI将代码转为其他端，只要AI转代码的成本比调试跨端框架低，这就是可行的。

我的目标：制作AI工具的前端

image.png