2020年前端最火的技术是啥？

Posted 2023-04-11

我认为的2020年前端开发者最应该掌握的一些比较火爆的技术与知识点。

1，前端框架和语言层面

9月份 Vue3.0 发布，声称对 TypeScript 有着更好的开发体验，通过从不同框架级别 TS 支持上，我们可以看出社区的整个风向从2019年的大家都去学习应用 TS，变成了大家如何把 TS 用的更好这个方向上来了。

所以我认为今年 TypeScript 的火热程度还是应该排名很靠前的，我今年也使用 TypeScript 重构了 Daruk 的服务框架推出了2.0版本，让 TS 开发者拥有更好的 TS 开发体验。

接下来就是两大重磅框架的更新历程对比，Vue3 前面说了一句。而 React 也在十月也发布了 React 17 的 release 版本。这两大主流框架的频繁更新，也说明了社区和作者都在一同演化。

在 Vue 3中除了更好的支持 TS 外，还更新了Composition API。而 React 17 主要是集中精力在升级体验上，虽然没有新的 Feature 但是提升了和解决了很多之前版本潜在的问题。

要说哪个最火还是要看个人实际的使用场景和喜好，但是2020年来看还没有别的框架可以与之一战。

           
            2，大前端相关技术栈

今年基于Chromium的微软edge浏览器也已经推出。google 在 web 端的发展产生了对开发者深刻的影响。Chrome 80+ 也已经发布多个版本，提供了一系列的新特性，比如Core Web Vitals标准，Desktop PWA等都值得我们去关注。

           
            我们说完了浏览器相关的那点技术之后，再聊聊大前端相关的一些技术实践，比如 Flutter。

很多前端在今年已经从 web 开发转型为 Flutter 开发，学习和使用 Dart 技术来构建 UI，这是很多大厂的前端工程师正在经历的事情（包括我的部门也在尝试这个事情），这个趋势应该在未来几年还会持续。

客户端 electron 在今年也有着长足的进展，一年内多次更新版本一路到了10.1.5。随着疫情影响，国内在线教育的又一波兴起。很多桌面软件，网课软件都在采用这个技术来进行开发，市场上的岗位也开始变多，electron 技术可以说在今年也有火的趋势。

           
            然后我们再看看BFF 层，nestjs依然坚挺，越来越多的人开始跳过学习 express 和 koa 开始学习更丰富的 web 框架了，比如 egg 或者我的 daruk，开发者已经在慢慢形成共识，在 web framework 的路上开始越走越远，裸写 nodejs web 服务的时代已经开始慢慢褪去。

           
            不得不提的还有 serverless 在前端的普及，在2020年到达了一个新的高潮。阿里云，腾讯云，头条云等等国内的互联网厂商也都开始大玩 serverless 概念。从对内服务开始转向对外服务，普及的势头很猛，也有落地的趋势和场景。今年的 D2同样也有 serverless 的专场，可见受重视程度非比寻常。

3，工程化提效和个人素质提升

再离我们近一些的推动生产力的技术，比如据我所知在用 CI/CD 和 pipeline 管理上线流程的公司越来越多，这种去年还可以出去吹一吹的东西，今年也逐步变成了业界标配基础能力，如果不会的同学可要抓紧学习了。

           
            2019年前大家都疯狂吐槽面试刷 medium 题目没用，而2020年后大家开始默认面试某些公司都至少要刷到medium程度的题目。这对很多前端来说是一个心智和素质的提升与转变，大家在接触新技术的同时，也慢慢发现，前端整个职业环境的变化，越来越多的公司对人的整体综合素质要求变高了。

参考技术A

我认为最火的技术有三个：TypeScript、Vue3.0、JAMStack

原因：

1、TypeScript 是一门基于 javascript 基础之上的编程语言，很多时候我们都在说它是一个 JavaScript 的超集，或者叫扩展集。所谓超集，其实就是在 JavaScript 原有的基础之上多了一些扩展特性。多出来的呢，实际上就是一套更强大的类型系统，以及对 ECMAScript 新特性的支持。而且它最终会编译为原始的 JavaScript。

相比较于 Flow，TypeScript 作为一门完整的编程语言，它的功能更为强大。生态也更健全、更完善。特别是对于开发工具这一块，微软自家的开发工具对 TypeScript 的支持都特别友好。

2、Vue 是“一个用于构建用户应用程序的渐进式框架”。它的设计非常灵活，可以将单个 Vue 库集成到其他项目中，也可以完全使用 Vue 构建复杂的项目。Vue 通常被视为一个易于理解和实现的框架，它支持纯 html 模板，而 React 需要使用 JavaScript 定义来 DOM 元素。

速度更快是 Vue 目前的主要卖点之一,Vue 以其渲染速度而闻名，与其他框架一样，Vue 使用虚拟 DOM 来渲染组件。为了加速渲染过程，必须减少虚拟 DOM 的工作负载。通过编译时间提示、组件快速路径、单态调用、优化 slot 生成等手段来达到提速目的。

体积小

目前，Vue 的体积已经很小了（压缩后 20KB）。由于进行了摇树优化（消除非重要代码），3.0 的预计大小约为 10KB（压缩后）。主要是移除了对 Vue 项目来说不是很重要的库，可以通过 import 语句来使用它们，而不是把它们打包在主 src 代码中。

可维护性

Vue 3.0 将从 Flow 转到 TypeScript，同时又非常重视兼容性易用性，不喜欢使用 TypeScript 的用户仍然可以使用纯 JavaScript。Vue 3.0 提供了更好的模块化，从而变得更加可定制和灵活，还提供了透明性，开发人员可以深入到源代码中。编译器重写是最令人兴奋的功能之一，不仅带来了更好的 IDE 支持，而且可以创建源码映射，如果存在运行时错误，它将给出错误对应的文件位置和行号。

面向原生

Vue 3.0 将与平台无关——它将运行纯 JavaScript，并且在其主构建中不会假设使用诸如 Node.js 之类的东西。这种灵活性使构建 Web、ios 或 android 应用程序变得更容易。面向原生使 Vue 更像是 React 的替代品。

易用性

公开 Reactivity API——新的变更允许开发人员显式创建反应式对象和自定义重渲染 hook。3.0 还解决了 Vue 用户经常抱怨的一个问题：什么时候以及为什么要重新渲染组件？3.0 提供了一个 renderTriggered 事件，人们可以通过它查看是什么触发了更新。这个出色的功能将使 Vue 更加透明。

3、JAMstack是指使用JavaScript、API和Markup构建的技术堆栈，JAM是JavaScript、API和Markup的简称，前面第一个字母缩写，JAMstack一种基于客户端JavaScript，可重用API和预构建Markup的现代Web开发架构

1. 更好的性能：为什么要在部署时生成页面时等待页面动态构建？当谈到最小化第一个字节的时间时，没有什么能比通过CDN提供的预构建文件更好。

2. 安全性更高：将服务器端进程抽象为微服务API，可以减少攻击的表面区域。您还可以利用专业第三方服务的专业知识。

3. 更便宜，更容易扩展：当您的部署相当于可以在任何地方提供服务的一堆文件时，扩展就是在更多地方提供这些文件的问题。CDN是完美的，通常包括扩展他们的所有计划。

4. 更好的开发者体验：松散耦合和控制分离允许更有针对性的开发和调试，并且为站点生成器扩展选择CMS选项消除了为内容和营销维护单独堆栈的需要。

所以我认为最火的技术应该就是这三个。

参考技术B 2020年前端最火的技术是react，最火的项目是app和小程序

47前端 | 全面理解虚拟DOM，实现虚拟DOM

最近一两年前端最火的技术莫过于ReactJS，即便你没用过也该听过，ReactJS由业界顶尖的互联网公司facebook提出，其本身有很多先进的设计思路，比如页面UI组件化、虚拟DOM等。本文将带你解开虚拟DOM的神秘面纱，不仅要理解其原理，而且要实现一个基本可用的虚拟DOM。

1.为什么需要虚拟DOM

DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM操作引起的。如果对前端工作进行抽象的话，主要就是维护状态和更新视图；而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。

在jQuery出现以前，我们直接操作DOM结构，这种方法复杂度高，兼容性也较差；有了jQuery强大的选择器以及高度封装的API，我们可以更方便的操作DOM，jQuery帮我们处理兼容性问题，同时也使DOM操作变得简单；但是聪明的程序员不可能满足于此，各种MVVM框架应运而生，有angularJS、avalon、vue.js等，MVVM使用数据双向绑定，使得我们完全不需要操作DOM了，更新了状态视图会自动更新，更新了视图数据状态也会自动更新，可以说MVVM使得前端的开发效率大幅提升，但是其大量的事件绑定使得其在复杂场景下的执行性能堪忧；有没有一种兼顾开发效率和执行效率的方案呢？ReactJS就是一种不错的方案，虽然其将JS代码和HTML代码混合在一起的设计有不少争议，但是其引入的Virtual DOM(虚拟DOM)却是得到大家的一致认同的。

2.理解虚拟DOM

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想

1. 提供一种方便的工具，使得开发效率得到保证

2. 保证最小化的DOM操作，使得执行效率得到保证

1、用JS表示DOM结构

DOM很慢，而javascript很快，用javascript对象可以很容易地表示DOM节点。DOM节点包括标签、属性和子节点，通过VElement表示如下。

//虚拟dom，参数分别为标签名、属性对象、子DOM列表
var VElement = function(tagName, props, children) {
    //保证只能通过如下方式调用：new VElement
    if (!(this instanceof VElement)) {
        return new VElement(tagName, props, children);
    }

    //可以通过只传递tagName和children参数
    if (util.isArray(props)) {
        children = props;
        props = {};
    }

    //设置虚拟dom的相关属性
    this.tagName = tagName;
    this.props = props || {};
    this.children = children || [];
    this.key = props ? props.key : void 666;
    var count = 0;
    util.each(this.children, function(child, i) {
        if (child instanceof VElement) {
            count += child.count;
        } else {
            children[i] = '' + child;
        }
        count++;
    });
    this.count = count;
}

通过VElement，我们可以很简单地用javascript表示DOM结构。比如

var vdom = velement('div', { 'id': 'container' }, [
    velement('h1', { style: 'color:red' }, ['simple virtual dom']),
    velement('p', ['hello world']),
    velement('ul', [velement('li', ['item #1']), velement('li', ['item #2'])]),
]);

上面的javascript代码可以表示如下DOM结构：

<div id="container">
    <h1 style="color:red">simple virtual dom</h1>
    <p>hello world</p>
    <ul>
        <li>item #1</li>
        <li>item #2</li>
    </ul>   
</div>

同样我们可以很方便地根据虚拟DOM树构建出真实的DOM树。具体思路：根据虚拟DOM节点的属性和子节点递归地构建出真实的DOM树。见如下代码：

VElement.prototype.render = function() {
    //创建标签
    var el = document.createElement(this.tagName);
    //设置标签的属性
    var props = this.props;
    for (var propName in props) {
        var propValue = props[propName]
        util.setAttr(el, propName, propValue);
    }

    //依次创建子节点的标签
    util.each(this.children, function(child) {
        //如果子节点仍然为velement，则递归的创建子节点，否则直接创建文本类型节点
        var childEl = (child instanceof VElement) ? child.render() : document.createTextNode(child);
        el.appendChild(childEl);
    });

    return el;
}

对一个虚拟的DOM对象VElement，调用其原型的render方法，就可以产生一颗真实的DOM树。

vdom.render();

既然我们可以用JS对象表示DOM结构，那么当数据状态发生变化而需要改变DOM结构时，我们先通过JS对象表示的虚拟DOM计算出实际DOM需要做的最小变动，然后再操作实际DOM，从而避免了粗放式的DOM操作带来的性能问题。

2、比较两棵虚拟DOM树的差异

在用JS对象表示DOM结构后，当页面状态发生变化而需要操作DOM时，我们可以先通过虚拟DOM计算出对真实DOM的最小修改量，然后再修改真实DOM结构(因为真实DOM的操作代价太大)。

如下图所示，两个虚拟DOM之间的差异已经标红：

虚拟DOM差异

为了便于说明问题，我当然选取了最简单的DOM结构，两个简单DOM之间的差异似乎是显而易见的，但是真实场景下的DOM结构很复杂，我们必须借助于一个有效的DOM树比较算法。

设计一个diff算法有两个要点：

1. 如何比较两个两棵DOM树

2. 如何记录节点之间的差异

A.如何比较两个两棵DOM树

计算两棵树之间差异的常规算法复杂度为O(n3)，一个文档的DOM结构有上百个节点是很正常的情况，这种复杂度无法应用于实际项目。针对前端的具体情况：我们很少跨级别的修改DOM节点，通常是修改节点的属性、调整子节点的顺序、添加子节点等。因此，我们只需要对同级别节点进行比较，避免了diff算法的复杂性。对同级别节点进行比较的常用方法是深度优先遍历：

function diff(oldTree, newTree) {
    //节点的遍历顺序
    var index = 0; 
    //在遍历过程中记录节点的差异
    var patches = {}; 
    //深度优先遍历两棵树
    dfsWalk(oldTree, newTree, index, patches); 
    return patches; 
}

B.如何记录节点之间的差异

由于我们对DOM树采取的是同级比较，因此节点之间的差异可以归结为4种类型：

1. 修改节点属性, 用PROPS表示

2. 修改节点文本内容, 用TEXT表示

3. 替换原有节点, 用REPLACE表示

4. 调整子节点，包括移动、删除等，用REORDER表示

对于节点之间的差异，我们可以很方便地使用上述四种方式进行记录，比如当旧节点被替换时：

{type: REPLACE, node: newNode}

而当旧节点的属性被修改时：

{type: PROPS, props: newProps}

在深度优先遍历的过程中，每个节点都有一个编号，如果对应的节点有变化，只需要把相应变化的类别记录下来即可。下面是具体实现：

function dfsWalk(oldNode, newNode, index, patches) {
    var currentPatch = [];
    if (newNode === null) {
        //依赖listdiff算法进行标记为删除
    } else if (util.isString(oldNode) && util.isString(newNode)) {
        if (oldNode !== newNode) {
            //如果是文本节点则直接替换文本
            currentPatch.push({
                type: patch.TEXT,
                content: newNode
            });
        }
    } else if (oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
        //节点类型相同
        //比较节点的属性是否相同
        var propsPatches = diffProps(oldNode, newNode);
        if (propsPatches) {
            currentPatch.push({
                type: patch.PROPS,
                props: propsPatches
            });
        }
        //比较子节点是否相同
        diffChildren(oldNode.children, newNode.children, index, patches, currentPatch);
    } else {
        //节点的类型不同，直接替换
        currentPatch.push({ type: patch.REPLACE, node: newNode });
    }

    if (currentPatch.length) {
        patches[index] = currentPatch;
    }
}

比如对上文图中的两颗虚拟DOM树，可以用如下数据结构记录它们之间的变化：

var patches = {
    1:{type:REPLACE,node:newNode}, //h1节点变成h5
    5:{type:REORDER,moves:changObj} //ul新增了子节点li
}

C.对真实DOM进行最小化修改

通过虚拟DOM计算出两颗真实DOM树之间的差异后，我们就可以修改真实的DOM结构了。上文深度优先遍历过程产生了用于记录两棵树之间差异的数据结构patches, 通过使用patches我们可以方便对真实DOM做最小化的修改。

//将差异应用到真实DOM
function applyPatches(node, currentPatches) {
    util.each(currentPatches, function(currentPatch) {
        switch (currentPatch.type) {
            //当修改类型为REPLACE时
            case REPLACE:
                var newNode = (typeof currentPatch.node === 'String')
                 ? document.createTextNode(currentPatch.node) 
                 : currentPatch.node.render();
                node.parentNode.replaceChild(newNode, node);
                break;
            //当修改类型为REORDER时
            case REORDER:
                reoderChildren(node, currentPatch.moves);
                break;
            //当修改类型为PROPS时
            case PROPS:
                setProps(node, currentPatch.props);
                break;
            //当修改类型为TEXT时
            case TEXT:
                if (node.textContent) {
                    node.textContent = currentPatch.content;
                } else {
                    node.nodeValue = currentPatch.content;
                }
                break;
            default:
                throw new Error('Unknow patch type ' + currentPatch.type);
        }
    });
}

至此，虚拟DOM的基本原理已经基本讲解完成了；我们也一起实现了一个基本可用的虚拟DOM。本文中只给出了关键的源代码，全部源代码请参考我的github