2020年Web前端开发将围绕哪些技术点？

一时失言乱红尘 2022-11-27 00:41 180阅读 0赞

前端开发的快速发展每年都会给开发者带来新的关键词。随着前端的发展，越来越多的人开始加入到前端的队伍中来。前端开发的快速发展每年都会给开发者带来新的关键词。那么对于前端新人来说，2020年前端开发的关键词是什么？发展方向是什么？就2020年大前端的发展而言，前端仍将专注于小程序、超级应用、跨端开发、前端工程化和新技术应用，这绝非偶然。本文，就一一给大家详解这些趋势。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70_pic_center]

## 1、小程序 ##

在这个项目中，今年仍然是项目突然进展的一年。所有主要应用程序都已启动，所有前端团队都有专门的程序开发团队来满足更快程序开发的需求。与此同时，APP程序中的许多关键功能已经被小程序所取代，甚至有些APP程序已经变成了Nativex小程序外壳，上层应用完全由小程序来实现。

在微信小程序出现之前，每个人都在谈论Hybird和ReactNative，但这只是技术层面的狂欢，没有注入商业属性。小程序的出现，一方面告诉业界，Webview在当前的设备上并没有变坏，另一方面，告诉业界如何让有能力的企业在超级应用程序上的私有域中运行。

另一方面，从技术角度来看，在上层DSL的严格限制下，超级APP可以定义满足自身需求的网络标准，弥补了当前网络标准的不足。最后，它可以与客户端合作生产出各种类似NSR的酷技术模型，离线、预装、定制的网络视图(Webview)，这样网络最终可以以低成本实现原生版本的体验，不会像Weex那样在终端外有点尴尬。

然而，由于需要依靠超级应用(微信、支付宝、百度、美团、头标等)，由于各种平台采用的具体方案不同，目前小程序的登陆方案也不同，有时需要开发多套代码。

## 2、跨终端开发 ##

对于跨终端开发，RN状态通常是成熟的，或者没有太多的开发前景，因为它仍然处于0.61版本，而1.0版本似乎还很遥远。因此，今年许多团队改变了他们的调子，以 Flutter为Release，这重新点燃了希望，并使 Flutter前端渴望尝试。

同时，苹果也发布了新的用户界面系统——SwiftUI。与此同时，面向网络的SwiftUI已经在开源社区中上路了。安卓的SwiftUI会远远落后吗？

跨终端开发，颤振仍将快速发展，并将有更多的开发者。Flutter on JS、SwiftUIfor Web&Android上也将是值得期待的开源软件。毕竟，跨终端仍然没有完美的解决方案。

## 3、前端工程 ##

在前端编程中，开发人员最重要的基本成就是提高效率，此时前端开发人员将继续迭代和优化。

我们曾经谈论过Yoman、CLI和其他系列的构建工具，但是在团队成长之后，我们仍然几乎没有任何感觉。相比之下，Java学生从未听说过从没听说过 Spring Boot 配置工程师。今年，许多团队正在构建一个完整的前端DevOps流程套件，一些团队也开始协作并一起构建。无论是网络项目还是程序项目，从新项目、开发、调运、部署、测试、发布、运行和维护到监控统计，都有完善的设施来保证和提高效率，前端流程在未来将更加标准化。

展望2020年前端的发展，前端工程系统肯定会更加闭环，不像脚手架那么简单，而是将集成开发环境(IDE)结合起来，从项目初始化、代码编写、配置项、灰度级和发布，打开业务属性，形成一个完整的闭环。

## 4、Serverless ##

Serverless的⽕爆⼏乎可以归因于前端。因为无Serverless可以完美地支持Node.js，所以Serverless可以帮助前端开发人员在制作⽤Node.js.的过程中解决许多问题

大多数当前的前端工程师都受过培训。尽管他们无法与真正的服务器端开发学生相比，但他们也可以编写许多服务端业务逻辑。目前，许多公司都在做BFF层来满足这部分需求，但仍然无法摆脱运行维护和机器配送的障碍。随着无服务器(Serverless)的逐步登陆，代码的BFF层将摆脱操作和维护、机器分配等复杂问题。同时，前端学生将高概率地编写这部分代码，而服务器端学生将专注于中型系统的实现。就业务而言，试错的成本也将大大降低。

随着Node.js成为前端开发人员必备的技能，云计算的持续流行将使无服务器成为可能。随着越来越多的开发人员尝到研发的甜头，无服务器必将改变前端的研发模式。

同时，使用无服务器的学生肯定会使用TS。这也意味着如果没有在2020年写测试，它可能真的过时了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70_pic_center 1]

## 5、WebAssembly ##

WebAssembly是一种新的字节码格式。目前，主流浏览器支持WebAssembly。与JS的解释和执行不同，WebAssembly字节码与底层机器代码非常相似，可以快速加载和运行，因此性能比JS解释和执行有了很大提高。也就是说，WebAssembly不是一种编程语言，而是一种字节码标准，需要用高级编程语言编译并放入WebAssembly虚拟机中运行。浏览器制造商需要做的是根据WebAssembly规范实现虚拟机。使用WebAssembly，您可以在浏览器上运行任何语言。从Javascript到TypeScript到Babel，这些都需要翻译成js来执行，而WebAssembly嵌入在浏览器中，不需要翻译就可以直接执行，所以执行效率自然要高得多。

例如，AutoCAD软件是由AutoCAD生产的自动计算机辅助设计软件，可用于绘制二维图形和基本三维设计。使用时无需编程即可自动绘图，因此广泛应用于民用建筑、装饰、工业制图、工程制图、电子工业、服装加工等诸多领域。

AutoCAD是由大量的C代码编写的软件，经历了从桌面到移动再到网络的许多技术变革。此前，在InfoQ上有一篇题为《AutoCAD WebAssembly: Moving a 30 Year Code Base to the Web》的演讲，即通过网络组装(WebAssembly)，许多旧的C代码可以在网络上运行，执行效率得到保证。

Hrome的核心JavaScript引擎V8现在包括了Liftoff，一个新的WebAssembly baseline编译器。Liftoff简单快速的代码生成器大大提高了WebAssembly应用程序的启动速度。2019年，许多公司将开始投资于网络组装的学习和转型。据信，网络组装将在2020年经历一个爆炸性时期。

## 6、5G ##

2020年，5G将是一个不可分割的话题。首先，5G带宽的增加带来了传统网络复杂性的提高，就像2G到4G过程中从WAP纯超链接时代向4G全画面视频时代的转变一样。5G肯定是一个巨大的变化，但它绝对不会在一夜之间发生。因为相应的配套设施也需要逐步完善，如硬件性能和浏览器处理速度。服务器端渲染无疑是捷径之一。轻前端和重后端，5G是一座桥梁。将渲染放在后端并不像同构那么简单。它需要关注和优化渲染性能。在这个机会下，WebAssembly可能会得到快速发展，因为它可以在后台缝合和连接多种语言。背景渲染的优化也将带来前端研发模式和技术架构的变化。

其次，5G带来的一切互联将带来不同于智能机器和普通电脑的各种场景。虚拟现实、可穿戴设备、载体系统、智能投影、智能交互等。将把网络带入各种垂直领域，这也意味着前端会有更多的空间。相信随着5G的大规模业务，一批新的互联网巨头将会诞生。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70_pic_center 2]

以上就是总结的在2020年Web前端的一些发展趋势，希望能帮到大家。以目前国内Web前端的现状来说，整体水平略有不足，相对应的Web前端开发人才更是高薪难求。虽然Web前端薪资高入门门槛低， 但是俗话说得好：入门容易，精通难。Web前端开发的知识点繁多，要想真正掌握Web前端工程师开发技能，并非易事。想系统学习Web前端，想高薪就业，需要有扎实的技能。评论回复：Web前端，即可免费领取最新全套Web前端学习资料+源码+项目+笔记，助力大家学好Web前端。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/7b7e9ecae0ab4f4591802a6c5c1e19fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/cd1ad1b6c38349bfae5d42ce396c1588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/a5a5821ba3f6459abfb02f39f94639cb.png