十年前端技术之旅回顾：从 jQuery 到 Vue 的演进

当我们修改了 greeting 这个变量，视图中对应使用了这个变量的部分也会跟着变化。Angular.js 可以理解为 Angular 1.0 版本，和我们现在用的 Angular 2+ 版本的写法有巨大的差异。

除了开发 B2B 搭配管理系统，还用 Angular.js 开发了马来支付客服系统，也是在开发这个项目的过程中，接触了 Webpack 构建工具这些前端工程化的东西。

当时是 2015 年底，已经离职来到腾讯，当时的 Webpack 官网还是一个很简陋的 http 域名的网站，可以说是看着 Webpack 不断发展壮大的。

尝试用 Webpack 打包 Angular.js 项目成功，并写了总结文章。

除了 Angular.js 这个 MVVM 框架之外，当时团队有项目使用的是 Backbone.js 项目，所以也学过几个月 Backbone.js（也是当时流行的 MVC 框架之一），写了总结文章。

除了上面提到的 jQuery、Angular.js、Backbone.js，这个阶段其实还有不少前端库和前端框架，比如：Bootstrap、Riot.js、YUI、Kissy 等，当然 React、Vue 也开始出现，只是还不是很火，大部分前端还是用 jQuery。

React

关键词： React、组件化、研发全流程

2016 年开始在腾讯做海外广告平台，用的是 React 技术栈，当时还是 React v0.x 的版本，后面才升级到 React 15。

这是参与的第一个中型商用项目，从一开始负责效果数据子模块，到后面负责整体广告平台的前端。

• 使用 Redux Form 实现广告表单的管理
• 使用 React Dropzone 实现广告图片、音视频素材的上传和管理
• 使用 PhantomJS 实现广告报表的生成
• 使用 html2canvas + jspdf 实现 PDF 格式报表的生成和下载

除了深入学习了 React 这个前端框架，也学习如何与产品、设计、测试、后台等团队其他角色的同事打交道，甚至与跨部门的同事沟通，学习了如何从 0 到 1 开发一个新产品。

从 jQuery 到 Angular.js，再到 React，对前端开发的模式有了更全面的认识，与 Webpack 的深度结合，也加深了对前端工程化的认识。

特别是 React 组件化的思想，以及在海外的实践，形成了自己的组件设计理论，并写了总结文章。

这也是第一次接触前端组件库，当时团队并没有自己的组件库，用的是 Ant Design，当时市面上的 UI 组件库其实并不多，印象比较深的就是 Material UI 和 Ant Design。

React 代码大致是以下样子。

import React, { Component } from 'react'; import { render } from 'react-dom'; import { Router, hashHistory as history } from 'react-router'; import { Provider } from 'react-redux'; import routes from './routes'; import configureStore from './configureStore'; import './theme.scss'; const store = configureStore(); const rootElement = document.getElementById('root'); class App extends Component { render() { return ( <Provider store={store}> <Router history={history} routes={routes} /> </Provider> ); } } render(<App />, rootElement);

可以看到 React 的代码已经是组件化的写法，和现在用三大框架写的代码比较接近。

除了 React，当时还接触了 ECharts、Nginx、PHP 的 CI 框架等技术，总结了一些技术文章。

这个阶段疯狂看各种技术书，在技术广度和深度上都有长足的进步。

• 《深入理解计算机系统》（作者：曾探）
• 《你不知道的 JavaScript》（作者：[美] Kyle Simpson）
• 《Java 编程思想》（作者：[美] David Geary）
• 《Node.js 实战》（作者：朴灵）

Angular

关键词： Angular、富文本、组件库建设、大型商用项目、开源运营

时间来到了 2019 年，到了华为做 EditorX 富文本编辑器、Ng DevUI 组件库和 ProjectMan 大型商用项目。

• 独立负责 EditorX 富文本编辑器从 0 到 1 的技术选型、开发和维护，以 API 驱动的 Quill 为底座，扩展和增强了表格、图片、超链接、附件、粘贴板、快捷键等大量自定义 Blot 和模块。期间阅读了大量 Quill 的源码，沉淀了 7 篇相关的技术文章。
• 带领 4 人前端团队负责 DevCloud 三大商用项目 ProjectMan 敏捷项目管理系统、XBoard 看板项目管理系统、Wiki 知识管理系统的交付和运维。一年多时间里，高效高质量完成看板责任人视图、项目空间等多个大特性的交付，完成多个子服务、子模块的性能优化和重构，减少重复代码 1 万多行，性能分提升 30%，完成 Region 合并、CloudScope 迁移、新环境开局等多个重大运维事务，没有出现过 P3 及以上的事件单。
• 独立负责 DevUI 组件库的开源运营，一年半时间内，Github star 数从不到 60 增长到 1000，组件库官网日 PV 最高达到 20000，官方微信群人数从 0 增长到 320。
• 带领社区开发者从 0 到 1 实现 Vue DevUI 开源组件库，遵循 DevUI Design 设计规范，基于 Vue3 + TypeScript + JSX + VitePress + Vite 技术栈，使用 Vite 脚手架搭建了包含 Jest 单元测试、ESLint、StyleLint、ls-lint、CommitLint 等规范的基本框架。一年时间内，招募了 200 多位开发者，活跃贡献者 30 多位，完成 50 多个组件，收获 1200 多 Star。

Angular 代码大致以下样子。

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MemberListModule } from '@component/member-list/member-list.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MemberListModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

app.component.html

<div class="flex flex-col justify-between h-screen"> <app-header class="sticky top-0 z-10"></app-header> <div class="devcloud-main flex justify-center flex-grow bg-light-gray"> <div class="flex max-w-1640px mt-10"> <nav class="w-316px mr-10"> <app-bonus dStepsGuide dStepsGuidePosition="bottom" pageName="step-bonus" [steps]="steps" [stepIndex]="2" [observerDom]="observerDom" (operateChange)="operateChange($event)"></app-bonus> <app-group></app-group> <app-custom-group></app-custom-group> </nav> <div class="main-content"> <app-main-content-head></app-main-content-head> <app-operation-bar></app-operation-bar> <app-project-list></app-project-list> </div> </div> </div> <app-footer></app-footer> </div> <router-outlet></router-outlet>

app.component.ts

import { Component, OnInit } from '@angular/core'; import { StepsGuideService } from 'ng-devui'; import { STEPS_BONUS, STEPS_CATEGORY_SEARCH } from './shared/const'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'devcloud-portal'; steps = STEPS_BONUS; observerDom; constructor( private stepService: StepsGuideService, ) {} ngOnInit(): void { this.observerDom = document.querySelector('.main-content'); } operateChange({ clickType, currentIndex }): void { if (clickType === 'prev' && currentIndex === 0) { localStorage.removeItem('devui_guide_step-category-search'); this.stepService.setSteps(STEPS_CATEGORY_SEARCH); this.stepService.setCurrentIndex(1); return; } } }

Angular 是一款能够跨 Web、移动 Web、移动应用、原生应用和桌面原生应用多个平台的前端框架，目前经过数十年的发展，已形成了一个庞大的生态，基于 Angular 的生态项目也是多如牛毛。

它不仅仅是一个视图层，更是一个全能的前端框架，MVVM 架构、依赖注入、CLI、模块、组件、指令、服务、路由、管道、表单管理、SSR，几乎提供了前端应用开发的全套工具，这么庞大的工具，也让部分前端开发者觉得入门门槛太高，因此国内用 Angular 的前端开发者并不多，反而由于 Angular 的类和装饰器写法和 Java 比较类似，受不少后端开发着的青睐。

这个阶段看书比较少，写文章比较多。

• 《JavaScript 高级程序设计》（作者：[美] Nicholas C. Zakas）

从 2020 年 3 月到 2022 年 9 月，一共写了 80 多篇文章，覆盖 Angular、Vue、TypeScript、富文本编辑器、组件库建设、Git、Monorepo、DevOps、性能分析、单元测试、开源社区运营 等众多领域。

Vue：

组件库建设：

前端开发的积木理论与实践（共 5 篇）

从 0 到 1 搭建 Vue 组件库（共 12 篇）

其他组件设计相关的文章：

富文本编辑器：

也是从这个阶段开始接触开源社区运营，这是一项非常热爱的事情，虽然是业余时间在做，依然付出了大量时间和精力，觉得是一件很有价值的事情，对自身成长也很有益。

做开源开发和在公司做业务开发有一个很大的差别就是，不仅要负责项目架构演进和代码开发，还要负责项目的推广和运营，为项目吸引用户，为社区吸引贡献者参与共建，得以接触到一个更广阔的开发者社区，认识很多优秀和勤奋的开发者。

据 GitHub 官方统计，从 2016 年开始，Github 平台每年平均新增 1000 多万开发者、5000 多万开源项目，且增幅呈现逐年递增的趋势。而中国的开发者参与开源的热情更是超过其他国家，不管是开发者还是开源项目的增长速度，中国都是名列前茅，2021 年中国共有 755 万 GitHub 开发者，全球排名第二。

我国在'十四五'规划中首次把开源纳入顶层设计，从国家层面体现了对开源的重视，国内的华为、腾讯、阿里等多家大厂也都将开源作为公司战略的一部分，国内外开源呈现一片繁荣的景象，相信开源的春天马上要来了，这是大势所趋。

因此在技术之外，专门开设了一个专栏，希望在开源运营领域有更多积累和沉淀。

Vue

关键词： Vue、跨框架组件库建设、团队管理

2022 年 9 月，加入了华为云云岭团队，负责 TinyVue 跨端跨框架组件库建设和 OpenTiny 开源社区运营。

技术栈也从 Angular 转到 Vue。

相比 Angular，Vue 在国内的使用者更多，社区更加活跃，不管在掘金、知乎、思否等国内技术社区，Vue 的关注者、文章数、讨论数都比 Angular 高，Vue 相关视频在 B 站的播放量和评论数总体上也比 Angular 高。

在 2021 年就已经创建过一个 Vue3 的开源组件库项目，结识了一群 Vue 开发者朋友，因此可以平滑过渡到 TinyVue，TinyVue 和一般的 Vue 组件库不同的是，它是一个跨端、跨框架的组件库，底层将组件逻辑抽离成框架无关的 renderless，基于 renderless 实现 PC / Mobile 多端适配，实现一套代码同时支持 Vue2 / Vue3，近期也在基于 renderless 实现 React 版本，已经取得了初步的成果。

Vue 的代码大致如下样子。

main.ts

import { createApp } from 'vue' import App from './App.vue' import TinyVue from '@opentiny/vue' import './style.css' const app = createApp(App) app.use(TinyVue).mount('#app')

App.vue

<script setup lang="ts">
import { ref, getCurrentInstance, version, watch, onMounted, Ref } from 'vue'
import { Button as TinyButton, Alert as TinyAlert } from '@opentiny/vue'
import { IconAdd } from '@opentiny/vue-icon'
const vueVersion = getCurrentInstance().appContext.app.version
const ipValue = ref('192.168.0.1')
const helloRef = ref<IMethod>()
const clickEvent = () => {
  Modal.alert('基本提示框', '标题')
}
watch(ipValue, (newVal) => {
  if (newVal === '0.5.1.2') {
    Notify({ message: '验证成功'})
  }
})
onMounted(() => {
  const str = helloRef.value?.myMethod('test', 30)
})
</script>
<template>
  <tiny-button type="primary">TinyVue</tiny-button>
  <tiny-alert size="large" description="TinyVue"></tiny-alert>
  <tiny-time-line :data="data" :active="active">
    <template #top="data">
      <div style="text-align: center">{{ data.slotScope.name }}</div>
      <div style="text-align: center">
        <tiny-tag v-for="item in data.slotScope.technical">{{ item }}</tiny-tag>
      </div>
      <div style="text-align: center">
        <tiny-tag v-for="item in data.slotScope.project">{{ item }}</tiny-tag>
      </div>
    </template>
    <template #bottom="data">
      <p>{{ data.slotScope.time }}</p>
    </template>
  </tiny-time-line>
  <tiny-tabs class="my-tabs" tab-style="card" :editable="false" :with-add="true" @add="handleadd" show-more-tabs >
    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name" > {{ item.content }} </tiny-tab-item>
  </tiny-tabs>
</template>
<style scoped lang="scss">
.logo { height: 1em; padding: 1.5em; will-change: filter; }
.logo:hover { filter: drop-shadow(0 0 2em #646cffaa); }
.logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); }
.my-tabs ::v-deep .tiny-tabs__header { justify-content: flex-start; }
</style>

这个阶段最主要的任务是打造 OpenTiny 开源项目的内外部影响力，让 OpenTiny 成为受开发者欢迎的组件库，并建设一个受开发者喜爱、让开发者有所成长的开源社区。

技术上主要是深入 TinyVue 跨端跨框架组件库，实现 React 版本，并争取出一本相关的小册。

技术书籍方面：

• 《Vue.js 设计与实现》（作者：霍春阳）

技术写作方面：

未来

未来，前端技术将持续发展和演进，也将不断学习和探索新技术。

• 框架层面，Svelte / SolidJS 等新兴框架值得关注
• 新一代前端工程化、自动化工具
• 前端智能化，AI 在前端领域的应用
• 低代码，大幅提升前端应用构建效率