前端开发新篇章:AI 助力效率激增! | 社区征文

2023总结前端

写在前面的话

在这个转瞬即逝的一年里,我们见证了时间的飞逝和技术的跨越。特别是ChatGPT的出现,这不仅是一个技术的飞跃,更是我们作为开发者历程中的一座重要里程碑。这个智能助手不仅改变了我们与信息、知识的互动方式,更为我们的工作带来了前所未有的便利和灵感。随着ChatGPT的加入,我们的开发过程变得更加高效,创新的思维也被无限激发。

在这一年中,前端开发的界限被重新定义,新的框架和工具的出现,使得我们的工作更加高效和多样化。这种技术的进步不仅提高了开发的效率,也极大地丰富了用户的互动体验,它也改变了我学习技术的方法论以及解决问题的策略。

下面我们会先回顾一下2023前端的变化,然后接着来聊聊 AI 赋能前端,我是怎么玩的。

前端圈发生的变化

下面我们简单的过一下2023前端发生的变化:

主流浏览器都开始支持原生CSS嵌套写法

picture.image

picture.image

picture.image

Rspack 发布

它是一个基于 Rust 的高性能构建引擎, 具备与 Webpack 生态系统的互操作性,可以被 Webpack 项目低成本集成,并提供更好的构建性能。

picture.image

TypeScript 更新了4个版本

picture.image

  • TypeScript 5.0
  • TypeScript 5.1
  • TypeScript 5.2
  • TypeScript 5.3

具体更新内容,链接会放在文章末

Electron 更新了6个版本

picture.image

  • Electron 23.0.0
  • Electron 24.0.0
  • Electron 25.0.0
  • Electron 26.0.0
  • Electron 27.0.0
  • Electron 28.0.0

谷歌正式发布 WebGPU!90 多位贡献者研发 6 年,浏览器终于可以利用底层硬件了

picture.image

Vite 更新

picture.image

在2023年,Vite进行了多次更新,包括5.0.10、5.0.9、5.0.8、5.0.7、5.0.6、5.0.5和5.0.4版本。此外,还发布了create-vite@5.1.0版本。这些更新显示了Vite项目的积极开发和改进。

Vue3 更新 3.3版本

picture.image

Vue 3.3 版本:

  • 发布日期:5月11日。
  • 代号:Rurouni Kenshin。
  • 主要更新:针对开发者体验进行了改进,特别是在使用 TypeScript 时的 SFC 。与 Vue 语言工具(以前称为 Volar)1.6 的发布相结合,解决了在使用 TypeScript 时存在的许多长期困扰问题。

ECMAScript 2023 - Exploring New Features

增加了一些新api

来谈谈 AI 如何赋能的前端

下面来谈谈 AI 给我带来了哪些提效和变化。

代码生成

很多时候,我们都在写重复实现过的代码,有了AI,我们可以让它快速生成对应的代码,这样多出很多时间来,开发效率也提升了。例如:

picture.image

下面是它生成的代码

<template>
  <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
      <el-button @click="resetForm('loginForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElForm, ElInput, ElFormItem, ElButton } from 'element-plus';

export default defineComponent({
  components: {
    ElForm,
    ElInput,
    ElFormItem,
    ElButton
  },
  setup() {
    const loginForm = ref({
      username: '',
      password: ''
    });

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
      ]
    };

    const submitForm = (formName: string) => {
      const form = loginForm.value as any;
      form.validate((valid: boolean) => {
        if (valid) {
          alert('submit!');
          // 在这里执行登录逻辑
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    };

    const resetForm = (formName: string) => {
      const form = loginForm.value as any;
      form.resetFields();
    };

    return {
      loginForm,
      rules,
      submitForm,
      resetForm
    };
  }
});
</script>

<style scoped>
/* 在这里添加样式 */
</style>

代码优化

这样执行效率也提升了,从而技术也提升了,它会解释你的代码,并且将优化的操作一步步讲解给你。

picture.image

BUG 统治者 和 调节者

在没有AI之前,相信很多小伙伴都是遇到问题[BUG] ,各种Search,当你解决完了,然后一个一个Tab 页的关闭,有没有很熟悉,在Search 的过程需要花费很大的时间去试错,时间成本花费了很多。现在有了AI,直接把报错丢给它,它可以直接给出详细的解决方案,以及建议等;当有时遇到难解决的问题,你只要不断的把诉求 push 给它,它慢慢吸收,会给你一步一步推敲出你的问题所在,从而有了新灵感。

例如Uncaught Error: [Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself.

picture.image

学习资源 & 读写文档

在没有AI 之前,我们很多人找学习资源都是各种 网盘,网站去检索,资源质量参差不齐,有了AI之后,例如,我要学习Vue3,我会让 它给我推荐一些优质的资源,来进行学习,当遇到难懂的,直接 push 给 AI, 它会直接反馈给你很容易读懂内容。

picture.image

最后

AI技术在开发领域带来的提升效果是全方位的,它改变了我的工作方式、优化了开发流程,并在很多方面提高了效率和质量。

前端圈发生的变化链接🔗

InfoQ 原文链接 : 前端开发新篇章:AI 助力效率激增!

265
13
9
3
关于作者
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论