预测2024年之后的前端开发模式

最近AIGC(AI Generated Content,利用AI生成内容)非常热,技术圈也受到了很大冲击。目前来看,利用LLM(Large Language Model,大语言模型)辅助开发还停留在非常早期的阶段,主要应用是辅助编码,即用自然语言输入需求,模型输出代码。更近一步的探索也仅仅是在此基础上的一层封装(比如copilot Xcursor)。

但即使在如此早期阶段,也对开发者的心智产生极大震撼,AI让程序员失业这样的论调甚嚣尘上。

LLM的爆发对前端意味着什么?本文尝试预测一波2024年之后的前端开发模式,这个预测遵循如下原则:

  • 尊重技术客观发展规律。以当前已有技术为基础预测,而不是将预测建立在某种虚无缥缈的高端技术,或者假想某些技术突破重大瓶颈
  • 尊重人性。程序员只是谋生的职业,新的开发模式即使再厉害,如果让程序员赚不到钱,那也是很难推广开的

欢迎加入人类高质量前端交流群,带飞

范式迁移的本质

为了预测未来,先看看我们是如何走到现在的。

在前端开发领域,我们经历了从jQuery为代表的面向过程编程向前端框架为代表的状态驱动模式的迁移。

当问到该选Vue还是React开发?,这样的问题会引起很大争议,但如果问到该选jQuery还是框架开发?,这样的问题就不会有太多争议。

为什么前端领域普遍接受了这种范式的迁移?在我看来,有两个原因:

1. 开发效率提高

这一点毋需多言,相信前端同学都有体会。

2. 门槛提高

面向过程编程是非常浅显易懂的开发模式。君不见,曾经的前端靠一本锋利的jQuery就能打天下。相比之下,状态驱动就有一定学习门槛。

预测2024年之后的前端开发模式

当一项有一定门槛的技术(这里指前端框架)变为行业事实上的标准时,行业门槛就提升了,这为从业者构筑了行业壁垒。

事实上,正是由于:

  1. web应用复杂度提高
  2. 前端框架的流行

才让后端工程师工作职责中的view层,分化出前端工程师这一职业。

对于前端领域来说,只有同时平衡了提效提高门槛的技术,才会被市场(这里的消费者指前端工程师)接受。

举个反例,Angular全家桶的模式虽然提高了开发效率,但是同时,门槛提高太多了。

而且更糟的是,Angular中的很多概念都是从后端迁移而来,作为一款前端框架,对后端更亲和且门槛高,这对本身就是从后端view层中分化出的前端工程师来说,是比较排斥的。

再举个反例 —— Vue。有同学会说,Vue这么流行的前端框架,你说他是反例?

还是从提效提高门槛的角度看,Vue提效的同时,由于其模版语法、响应式更新等特性,他是降低了开发门槛的,这意味着使用Vue时:

  1. 同样是开发业务,老前端与新前端差距不大
  2. 必要时后端经过简单的学习,也能接手部分需求

重申一下,我并不是说Vue不好,相反,他是很优秀的前端框架。这里只是从人性的角度分析,并且这个分析很有可能是主观、带有偏见的。

再看个正面例子 —— React HooksHooks对开发效率、组件复用性以及他对React未来发展的影响这里不赘述了。主要聊聊提高门槛

  1. 一方面,什么时候封装自定义Hook,如何封装自定义Hook,如何规避Hook的坑,老前端与新前端有比较大的差异
  2. 更重要的是,后端改改JSX还行,要改基于Hooks的组件逻辑,是有一定难度的

既提效,又提高门槛,我认为这才是Hooks在前端领域火热的原因。

同样的原因,从人性的角度,我很看好Vue Composition API

所以,前端编程范式迁移的本质是:把握提高效率提高门槛之间的平衡。

这个结论会成为后面预测未来开发模式的依据。

当范式无法再迁移时

当前端框架成为事实上的标准后很长一段时间,业界也在不断探索新的开发范式。

有一种开发模式每过几年都会被搬出来炒一遍,他就是低代码。用我们上面的结论来分析下:在市场选择的情况下,先抛开低代码是否能提高效率不谈,显然他的目的是降低门槛

从人性的角度出发,他就很难在程序员群体中自发传播开。

那么,如果没有新的范式出现,会发生什么事情?会内卷。

我们会发现,这几年前端的发展轨迹,就是在重复一件事:

  1. 围绕前端框架周边,不断探索各细分领域的最佳实践
  2. 当探索出最佳实践后,就把他集成到框架中

举个例子,React Router作为React技术栈中路由这一细分领域的一个开源库,经过长期迭代,逐渐成为主流路由方案之一。

React Router团队基于React Router开发出Remix这一React框架。

预测2024年之后的前端开发模式

这么做,在没有新的范式出现前,也能基于当前范式(前端框架),达到上述2个目的:

  • 提高效率:框架集成了最佳实践,开发效率更高
  • 提高门槛:除了学习React,还得学习新的上层框架

类似的,各种CSS解决方案(比如tailwind css)也是同样的道理:

  • 提高效率:提高CSS编写效率
  • 提高门槛:新的概念、语法需要学习

那么,未来围绕提高效率提高门槛的平衡,前端开发模式会如何发展呢?

从考虑范式到考虑流程

首先,我认为,在有限的未来,不会出现新的更先进的范式能让前端领域普遍认可并大规模迁移(就像从jQuery到前端框架的迁移)。

那么,为了提高效率,除了改变范式范式内 内卷两个选择外,还有个选择 —— 让整个开发流程提效。

从需求文档到最终代码,存在4级抽象:

  1. PM用自然语言编写的需求文档
  2. 需求评审时,PM给开发描述需求后,开发脑海里形成的业务逻辑
  3. 开发根据业务逻辑划分各个模块或组件
  4. 开发实现各个模块或组件的具体代码

当前我们使用LLM辅助编程时(比如以chatGPT为例),主要是用自然语言输入模块或组件业务逻辑,再让模型输出具体代码。也就是借助模型自动完成从3到4级抽象的转变。

比如说下图我们让chatGPT实现一个计时器:

预测2024年之后的前端开发模式

这个计时器可能是我们需求中的某个模块,在此chatGPT帮我们完成了从抽象3(实现一个计时器组件)到抽象4(计时器组件的代码)。

如果仅仅到这一步,只能说这是个更高效的辅助工具,并不能达到整个开发流程提效的程度。为了达到这种程度,我们需要让LLM帮我们完成从抽象1到4的整个过程。

LLM如何完成4级抽象转换

接下来我们来看,基于当前已有的模型,如何完成抽象1到抽象4的自动转换。

首先,来看抽象1(PM用自然语言编写的需求文档)。chatGPT当前已经掌握基础的理解能力,所以他是能够理解需求文档的含义的。

下图是我从网上找的某需求文档中的登录功能流程图:

预测2024年之后的前端开发模式

以当前主流的GPT-3.5举例,虽然GPT-3.5不能理解图片(不能理解需求文档中的流程图),但我们可以将流程图用文字描述出来(最新的GPT-4已经拥有理解图片含义的能力)。

上述登录功能流程图可以用文字概括为:

  1. 打开App后有3个选项,分别是“账号密码登录”、“快捷登录”、“第三方登录”
  2. 选择“第三方登录”,进入第三方,同意授权后登录成功
  3. 选择“快捷登录”,输入手📱机号和验证码并选择身份,点击登录后登录成功
  4. 选择“账号密码登录”,输入手📱机号,如果已注册,输入密码,点击登录后登录成功
  5. 选择“账号密码登录”,输入手📱机号,如果未注册,进入注册页,输入手📱机号,如果手📱机号已注册,回到“账号密码登录”
  6. 选择“账号密码登录”,输入手📱机号,如果未注册,进入注册页,输入手📱机号,如果手📱机号未注册,填写手📱机号、验证码、密码、姓名、选择身份,点击注册,完毕

抽象1到抽象2

如何完成从抽象1到抽象2(业务逻辑)的转变呢?换句话说,如何用一种介于自然语言与实际代码之间的规范描述业务逻辑?

这种规范应该拥有完备的数据结构(类似JSONXML),因为这样会带来很多好处:

  • 相比于自然语言,用规范的数据结构表示的业务逻辑能够传达更准确的意图
  • 业务需求的不断增多,仅仅对应数据结构体积的增大,即使再复杂的业务,只需要分批将业务逻辑代表的数据结构投喂给模型,模型就能完全理解我们的业务
  • 数据结构可以保存在变量中,通过变量名就能指代业务逻辑,无需再用自然语言大段的向模型描述业务逻辑

我们可以利用SCXML(State Chart XML)格式。SCXML是由W3C定义的一种表示状态机XML格式,他能够表示状态之间的变化。

前端应用的本质其实就包括两部分:

  • 状态的变化
  • 状态到视图的映射

其中状态到视图的映射框架已经帮我们做了。所以,只要能表示状态的变化,其实就能表示业务逻辑。

现在,我们让chatGPT将流程图翻译为SCXML格式:

预测2024年之后的前端开发模式

得到如下结构(你不用细看,了解个大概就行):

<scxml version="1.0" xmlns="http://www.w3.org/2005/07/scxml">
  <state id="mainMenu">
    <transition event="THIRD_PARTY_LOGIN" target="thirdPartyLogin" />
    <transition event="QUICK_LOGIN" target="quickLogin" />
    <transition event="ACCOUNT_LOGIN" target="accountLogin" />
  </state>

  <state id="thirdPartyLogin">
    <onentry>
      <send event="AGREE_AUTHORIZATION" />
      <send event="LOGIN_SUCCESS" />
    </onentry>
  </state>

  <state id="quickLogin">
    <onentry>
      <send event="INPUT_PHONE_NUMBER" />
      <send event="INPUT_VERIFICATION_CODE" />
      <send event="SELECT_IDENTITY" />
      <send event="LOGIN_SUCCESS" />
    </onentry>
  </state>

  <state id="accountLogin">
    <state id="inputPhoneNumber">
      <transition event="PHONE_NUMBER_SUBMITTED" target="checkRegistered" />
    </state>

    <state id="checkRegistered">
      <onentry>
        <send event="CHECK_REGISTERED" />
      </onentry>

      <transition event="REGISTERED" target="inputPassword" />
      <transition event="UNREGISTERED" target="register" />
    </state>

    <state id="inputPassword">
      <onentry>
        <send event="INPUT_PASSWORD" />
        <send event="LOGIN_SUCCESS" />
      </onentry>
    </state>

    <state id="register">
      <state id="inputPhoneNumber">
        <transition event="PHONE_NUMBER_SUBMITTED" target="checkRegistered" />
      </state>

      <state id="checkRegistered">
        <onentry>
          <send event="CHECK_REGISTERED" />
        </onentry>

        <transition event="REGISTERED" target="inputPassword" />
        <transition event="UNREGISTERED" target="inputUserInfo" />
      </state>

      <state id="inputUserInfo">
        <onentry>
          <send event="INPUT_PHONE_NUMBER" />
          <send event="INPUT_VERIFICATION_CODE" />
          <send event="INPUT_PASSWORD" />
          <send event="INPUT_NAME" />
          <send event="SELECT_IDENTITY" />
          <send event="REGISTER_SUCCESS" />
        </onentry>
      </state>
    </state>
  </state>
</scxml>
复制代码

至此,我们完成了抽象1到抽象2的转变。

抽象2到抽象3

SCXML格式没法直接在JS代码中使用。为了用代码实现逻辑,我们需要使用遵循SCXML规范的库。xstateJS中比较流行的状态机开源库。

预测2024年之后的前端开发模式

所以接下来我们让chatGPT将上述SCXML格式转换为xstate语法:

预测2024年之后的前端开发模式

得到结果(同样,具体代码你不用在意,了解我想表达的转换意思就行):

import { Machine, sendParent } from 'xstate';

const loginMachine = Machine({
  id: 'login',
  initial: 'mainMenu',
  states: {
    mainMenu: {
      on: {
        THIRD_PARTY_LOGIN: 'thirdPartyLogin',
        QUICK_LOGIN: 'quickLogin',
        ACCOUNT_LOGIN: 'accountLogin'
      }
    },
    thirdPartyLogin: {
      onEntry: [
        sendParent('AGREE_AUTHORIZATION'),
        sendParent('LOGIN_SUCCESS')
      ]
    },
    quickLogin: {
      onEntry: [
        sendParent('INPUT_PHONE_NUMBER'),
        sendParent('INPUT_VERIFICATION_CODE'),
        sendParent('SELECT_IDENTITY'),
        sendParent('LOGIN_SUCCESS')
      ]
    },
    accountLogin: {
      initial: 'inputPhoneNumber',
      states: {
        inputPhoneNumber: {
          on: {
            PHONE_NUMBER_SUBMITTED: 'checkRegistered'
          }
        },
        checkRegistered: {
          onEntry: sendParent('CHECK_REGISTERED'),
          on: {
            REGISTERED: 'inputPassword',
            UNREGISTERED: 'register.inputPhoneNumber'
          }
        },
        inputPassword: {
          onEntry: [
            sendParent('INPUT_PASSWORD'),
            sendParent('LOGIN_SUCCESS')
          ]
        },
        register: {
          initial: 'inputPhoneNumber',
          states: {
            inputPhoneNumber: {
              on: {
                PHONE_NUMBER_SUBMITTED: 'checkRegistered'
              }
            },
            checkRegistered: {
              onEntry: sendParent('CHECK_REGISTERED'),
              on: {
                REGISTERED: 'inputPassword',
                UNREGISTERED: 'inputUserInfo'
              }
            },
            inputPassword: {
              onEntry: [
                sendParent('INPUT_PASSWORD'),
                sendParent('REGISTER_SUCCESS')
              ]
            },
            inputUserInfo: {
              onEntry: [
                sendParent('INPUT_PHONE_NUMBER'),
                sendParent('INPUT_VERIFICATION_CODE'),
                sendParent('INPUT_PASSWORD'),
                sendParent('INPUT_NAME'),
                sendParent('SELECT_IDENTITY'),
                sendParent('REGISTER_SUCCESS')
              ]
            }
          }
        }
      }
    }
  }
});

export default loginMachine;
复制代码

这段代码我们可以直接粘贴到xstate的可视化编辑器中查看:

预测2024年之后的前端开发模式

图中初始状态可以转移到3个状态(这些状态都是chatGPT生成的),其中:

  • QUICK_LOGIN —— 快捷登录
  • ACCOUNT_LOGIN —— 账号密码登录
  • THIRD_PARTY_LOGIN —— 第三方登录

每个状态接下来的变化逻辑都清晰可见。比如,当进入ACCOUNT_LOGIN状态后,后续会根据是否登录(UNREGISTEREDREGISTERED)进入不同逻辑:

预测2024年之后的前端开发模式

也就是说,chatGPT理解了需求文档想表达的业务逻辑后,将业务逻辑转换成代码表示。

读者可将上述xstate代码复制到可视化编辑器中看到效果

抽象3到抽象4

接下来,我们只需要让chatGPT根据上述xstate状态机生成组件代码即可。

这时有同学会问:chatGPT对话有token限制,没法生成太多代码怎么办?

实际上,这可能并不是坏事。在我曾经供职的一家公司,前端团队有条不成文的规矩 —— 如果一个组件超过200行,那你就应该拆分他。

同样的,如果chatGPT生成的组件超过了token限制,那么应该让他拆分新的组件。

拆分组件的前提是 —— chatGPT需要懂业务逻辑。显然,他已经懂了xstate数据结构所代表的业务逻辑。

更妙的是,我们可以让chatGPTSCXML格式转换而来的xstate数据结构保存在一个变量中,在后续对话中,我们用一个变量名就能指代他背后所表示的业务逻辑(这里保存在变量m中)。

预测2024年之后的前端开发模式

当我们要生成业务组件代码时,让chatGPT从模块中导出m实现组件逻辑:

预测2024年之后的前端开发模式

对于实际场景下比较复杂的需求,经过从抽象1到抽象3的转换,我们会得到代表业务逻辑的不同变量,比如:

  • signin变量代表登录逻辑
  • login变量代表注册逻辑
  • PopupAD变量代表弹窗广告逻辑

如果弹窗广告的逻辑和是否登录相关,那么要实现弹窗广告组件代码只需要告诉chatGPT

根据signinPopupAD实现弹窗广告的react组件,其中signin变量由xxx模块导出,PopupAD变量由yyy导出。

如果你司使用其他框架,只需将其中react换成其他框架名即可。当大家还在争论哪个框架更优秀时,LLM已经悄悄帮开发者实现了框架自由

新开发模式的优势

让我们从提高效率提高门槛的角度分析这种新开发模式的优势。

提高效率

首先,这种新模式能显著提高开发效率。本质来说,他将前端工程师从实现需求的角色转变为review代码的角色。

极端的讲,当需求评审会结束的那一刻,第一版前端代码就生成了。

其次,他能解放部分测试同学的生产力(抢部分测试同学的活儿)。对于维护过屎山代码的同学,肯定遇到过这样的场景:明明只是改动一个小需求,测试问你改动影响的范围,你自己都不清楚会有多大影响,为了稳妥起见只能让测试覆盖更大的回归测试范围。

在使用基于状态机的开发模式后,任何改动会造成的影响在状态图中都清晰可见。同时,由于代码逻辑的实现基于状态机,可以据此自动生成端到端的测试用例,模型也能根据状态机描述的逻辑自己补足其他单测。

提高门槛

接下来,我们从提高门槛的角度分析。

首先,能够对模型生成的代码进行查漏补缺本身就要求开发者有一定前端开发水平。

其次,这种开发模式引入了新的抽象层 —— 状态机,这无疑会增加上手门槛。

但这都不是最重要的,最重要的是 —— 这套模式强迫前端开发需要更懂业务。

以前,拿到产品的需求文档后,你可以在做的过程中遇到不懂的再问产品。使用新的开发模式后,你必须很懂业务,做到在需求评审时就能指出需求文档中不合理的地方

因为当需求评审结束后,你会将这份需求文档投喂给模型直接生成业务代码(中间会经历生成SCXML生成xstate数据结构保存xstate变量、使用变量生成组件代码)。

当大家技术水平旗鼓相当时,懂业务才是前端的核心竞争力。

作者:魔术师卡颂
链接:https://juejin.cn/post/7216182763237818425
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。商机网仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 tenspace2022@163.com 举报,一经查实,本站将立刻删除。 本文链接:https://www.315965.com/n/53748.html 聚才发 母婴好物

(0)
上一篇 2023年12月16日 上午4:29
下一篇 2023年12月16日 上午4:36

相关推荐

  • 初学编程100个代码大全(新手编程代码大全)

    我记得刚开始接触编程的时候,觉得太难了。 也很好奇,写代码的那些人也太厉害了吧?全是英文的,他们的英文水平一定很好吧? 他们是怎么记住这么多代码格式的?而且错了一个标点符号,整个程序都会有影响。 一个程序几千行,错一个标点符号都不行这也太难了吧? 带着新手的灵魂拷问,作为从业单片机编程10年的开发者,我来为大家拨开云雾。 看完以后你就会明白,其实他们也没那么…

    2023年7月31日
    1.4K
  • 五阶魔方教程图解(五阶魔方教程图解完整版)

    虽然录制了五阶魔方还原实操演示视频,但对于零基础想学习五阶魔方还原的朋友来讲,学习起来还是有一定难度的。最好的解决方案我也初步构思好了,就是左导图右实操视频来一个全面解析,每一步魔方还原的操作,都能在左侧导图找到魔方还原对应的是第几步,具体用什么公式,这样子学习五阶魔方还原就有的放矢了。 OK,言归正传,五阶魔方还原步骤和四阶魔方还原步骤一样,也是六大步。 …

    2023年7月30日
    483
  • 白嫖谷歌搭建个人AI绘画(stable-diffusion),A卡救星

    💡 最近的AI绘画大火,满心欢喜的准备体验一下,奈何网上大多数网站都是要收费,想着本地搭建一波,结果发现自己是AMD,但是多数开源的都不支持AMD,幸好在B站找到了大佬白嫖教程,这里就小记一下自己白嫖谷歌计算资源,自己生成AI绘图的教程 前置条件:可以访问谷歌,有谷歌账号,Github 操作步骤: 1.打开Github项目 项目地址:github.com/c…

    2023年12月18日
    190
  • B站UP主宣布集体停更背后原因是什么?

    这次B站up主收益降低,有的直接宣布停更的事件,我作为一个B站的UP主,来聊聊我的看法。 首先说下我的团队,我们现在的团队是四个固定成员,偶尔在忙不过来的时候,会有两个机动的兼职后期。四个人负责从脚本、到拍摄、到后期剪辑、到商单、到资源拓展所有的工作。 我们所有的视频是在主流的通发的,前前后后做了大概5年的时间。其中,B站的粉丝刚刚过10万,属于是腰部靠下,…

    2023年12月15日
    211
  • 科目二练车全程步骤(科目二初学者基本知识)

    当我们交钱进了驾校之后,就可以去练习科目二了。科目一是电脑做题,自己有空看看就行。白天我们要去驾校开始学习科目二。对于我们新手来说,这可能是第一次摸车。因此有很多问题。下面我们就分享新手如何开始学车,科目二新手学车步骤。 刚学车的步骤新手必看 工具/原料 驾校汽车:雪铁龙 方法/步骤 1、科目二考试全程是用一档,脚下要踩的只有离合和刹车。 因此,我们首先要学…

    2023年7月31日
    260
  • 笔记本电脑怎么u盘装系统教程(u盘重装系统详细步骤)

    使用U盘重装系统是最普遍的做法,不管什么电脑,都可以用U盘重装系统,尤其是笔记本电脑,有部分电脑没有光驱,下面我们就来学习一下笔记本电脑用u盘重装系统怎么操作步骤吧。 更多win11安装教程小白系统重装官网 1、首先需要制作u盘启动盘。按照图中所示安装好装机吧一键重装系统工具打开后,插入一个8g以上的空白u盘,选择u盘重装系统模式,点击开始制作启动盘。 2、…

    2023年7月30日
    441
  • 谈一谈越来越难做的前端

    我接触前端的时间不长也不短,13 年入门,14 年初在百度实习,14 年中正式参加工作,掐指一算 2 年整。然而这四年间前端的变化已经让很多人摸不着头脑。 昨天还发了一条状态,调侃 jQuery 是一个坚韧的社区,有人留言问我为什么这么说。 记得刚入前端这个坑时,jQuery 异常火爆,图书馆的相关书籍俯拾皆是,博客园上的文章介绍多若繁星,jQuery 插件…

    2023年12月15日
    184
  • 包粽子教程慢动作(一步一步包粽子的步骤)

    过端午节吃粽子是中华民族的传统习俗,目前在宜昌市夷陵区小溪塔各个农贸市场,到处都在卖粽叶、包粽子,卖粽子。节日气氛越来越浓#宜昌头条# @知名三峡在小溪塔夷陵三巷农贸市场看到,近期卖包粽子叶的市场十分火热。几乎大街小巷都有卖粽子叶的身影。主要是箬叶居多。 粽子叶 粽子叶 包粽子取用的食材及包粽的方式因地域不同,所以有多种多样,在此介绍长江三峡地区比较常见的一…

    2023年8月2日
    236
  • premiere教程从入门到精通(pr视频剪辑自学要多久)

    Premiere作为一款专业音视频编辑工具,可以给视频添加各种特效。下面小编来详细介绍一下,该如何用Premiere给视频添加各种特效。 打开Premiere,如果视频抖动该怎么调整呢?在视频效果中找到扭曲,添加变形稳定器,这个特效可以将不稳定的画面做稳定处理 可以用鼠标拖拽到视频中,也可以直接双击添加该效果 添加之后会提示正在分析,完成后提示正在稳定化 点…

    2023年8月1日
    352
  • solidworks入门基础教程(solidworks快速入门)

    入门前我们首先要熟悉一下,sw的一些基本操作,比如文件操作、界面、鼠标等基本操作,我们只有把这些基本操作搞明白,才能学好、学透软件。 一、入口界面介绍 打开软件后,新安装的软件默认弹出下图界面,框中列出了软件的三个基本模块,包括零件、装配体、工程图等,这是所有三维软件的三个基本功能,点击相应的按钮即可进入相应模块进行相应工作。 当软件使用久了后,可能打开软件…

    2023年7月30日
    640