今年，前端又火了哪些技术？

本是古典何须时尚 2021-11-22 04:42 610阅读 0赞

前端技术的更新迭代是所有技术里面是最快的，19年你变秃了吗？

![640?wx\_fmt=png][640_wx_fmt_png]

本文盘点2019年比较热的技术点，大家好根据前端发展趋势对自己的技术栈做一定规划，抓住重点。

本文主要聊以下几个技术点：

*  **Vue,  React, Angular**
 *  **WebAssembly,PWA**
 *  **小程序**
 *  **Flutter**
 *  **Webpack ,CLI工具**
 *  **TypeScript**

**1、Vue,  React, Angular**

![640?wx\_fmt=png][640_wx_fmt_png 1]               ![640?wx\_fmt=png][640_wx_fmt_png 2]               ![640?wx\_fmt=png][640_wx_fmt_png 3]

Vue 在 2018、2019 年继续增长，其在 GitHub Stars 已经超过了 React ，国内公司更喜欢 Vue。

虽然 Angular 与 React 和 Vue 等库相比，粉丝较少，但它仍然是专业项目的热门选择。

无论是Vue3.0, React16.8 ,还是angular 8 , 在技术方面，三大框架趋于稳定，都是奔着更快、更小、更易维护、更易于原生，开发者更爽的目标发展，写法上也越来越像。

![640?wx\_fmt=png][640_wx_fmt_png 4]

**2、WebAssembly**

![640?wx\_fmt=png][640_wx_fmt_png 5]

WebAssembly 旨在通过提供在 web 上运行二进制格式，最大限度地提高性能，减小文件大小，并支持多种语言的 web 开发, **所有主流浏览器都已经支持。**

WebAssembly结合日渐成熟的WebGL技术，使得大型的游戏等应用迁移到浏览器将逐渐成为可能.

随着基础的到位和不断推动改进的Web体验，WebAssembly将开始看到更多的应用。

**3、PWA  **

PWA使用多种技术来增强web app的功能，能够模拟一些原生功能，比如通知推送，能使web应用具有离线功能和无缝的移动/桌面体验。

（1）**移动端**：PWA能够取得媲美 Native APP 的性能， PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。

（2）**桌面端**：**Google 、微软 接下来会大力推进 PWA 桌面版**，Web 应用将在桌面达到近乎原生的体验。

PWA 将会改变前端与移动端之间的格局，再加上WebAssembly 为 JS 带来的性能上的突破，JavaScript 将应用所有领域，从移动端、到桌面应用、物联网、VR、AR、游戏等 。

![640?wx\_fmt=png][640_wx_fmt_png 6]

**4、小程序依然火爆**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

**微信小程序的下一步计划，支持 NPM、小程序云、可视化编程、支持分包等**，除了微信小程序之外，还有头条、支付宝、百度都出了各家的小程序。

5G 时代很快就到了，在网速、内存和 CPU 更高的情况下，小程序的加载会更快，达到秒开，小程序将会有更广泛的应用。

**5、Flutter**

![640?wx\_fmt=png][640_wx_fmt_png 7]

作为谷歌的开源移动UI框架，Flutter可以快速在iOS和Android上构建高质量的原生用户界面，今年，Google I/O 大会宣布了 flutter 支持 web 开发。

flutter 目前的目的就是全平台开发，**一套代码同时运行在 iOS 、Android、web和桌面端**。

**6、Webpack**

![640?wx\_fmt=png][640_wx_fmt_png 8]

Webpack作为前端工程化中重要的一项热门工具，将前端各种资源（包括CSS及其预编译方案、JS及其预编译方案）统一打包为.js文件和资源文件（图片），Webpack历经4个版本，不断改进，即将发布V5版本。

**Webpack5 的一些变化**

*  删除了Webpack 4已弃用的功能，迁移到Webpack 5时，请确保不显示弃用警告；
 *  删除了自动Node.js polyfill；
 *  使用持久化缓存提高构建性能；
 *  使用更好的算法和默认值改进长期缓存；
 *  清理内部结构而不引入任何破坏性的变化；
 *  引入一些breaking changes，以便尽可能长的使用v5版本。

**7、CLI工具继续火爆**

各种管理工具的CLI包的创建，让开发人员不必花好几天去纠结配置的问题，专注于应用程序和业务逻辑，几个框架的CLI工具主要如下：

![640?wx\_fmt=png][640_wx_fmt_png 9]

**Angular CLI：**

https://cli.angular.io/

**Vue CLI：**

https://cli.vuejs.org/

**Create React App 2**

https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

还有其他的一些框架：Next.js（SSR for React），Nuxt.js（SSR for Vue），React Native的Expo CLI。

2019 年， 各CLI 也会有更多的改进及优化。

**8、TypeScript将继续发展，也许是Javascript的未来**

JavaScript因没有静态类型变量而饱受争议, 试图解决这个问题的主要库有TypeScript、Flow、Reason、PureScript、Elm。

TypeScript 提供了可选的静态类型和业界认可的类（ ES5+ 也支持）、泛型、封装、接口面向对象设计能力，以提升 JavaScript 的面向对象设计能力。

相比其他，TypeScript更流行一些，**Angular 和 Vue 都采用了 TypeScript，并将其作为开发者社区的标准**，2019 年 TypeScript 将有非常大的增长。

对于开发者而言，**唯一不变的就是学习能力**，掌握了学习能力就能够应对这些趋势变化，祝大家2019技术进步！

**【福利领取】**

我们邀请了许多**BAT一线技术专家**分享前端不同领域的技术热点，已经累计了十几期，可以帮助大家开拓视野，后续还会继续邀请分享，已有主题如下：

*  **BAT前端工程师快速成长方法，冲P6（适合1-3年工程师）**
 *  **BAT前端面试（适合0-2年工程师）**
 *  **前端模板及DSL梳理**
 *  **前端安全漏洞分析及处理**
 *  **下一代脚手架 VUE-CLI-3**
 *  **PWA实践专题**
 *  **微信小程序&小游戏原理及实践  **
 *  **大前端优化之路**
 *  **前端包管理工具梳理**
 *  **可扩展的前端应用构建**
 *  **....持续更新中**

以上视频回放，**原价1999，限量免费**，并可以**继续享有持续一年的技术更新**直播及视频：

**添加小助手微信领取**

**备注“北妈”**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

**学好下面这门课程，能让你的****年****薪增加****10万****！**

**确切的说，班级中优秀的同学**

**年薪增长不仅仅10万！**

**有的同学，在不到8个月时间**

**年薪从****16W ****增长到了 30W+****！**

**《BAT前端进阶【师徒】班》课程**，由BAT一线技术专家、架构师主讲，针对1-3年前端工程师做效率提升。

**可能你有以下困境：**

1-3年开发经验，或者虽然工作3年以上，但是**技术水平停滞在 3年以下，或薪资增长很慢**。

*  **技术提升效率低：**近期感觉总是在做重复事情，技术没有提升。
 *  **技术视野不够：**周围没有比自己高一层次的人带着做突破，希望有大公司技术视野。
 *  **计算机基础功底不扎实：**面对日新月异的技术变化，跟上明显吃力，方向不强。（比如 ，算法，数据结构，设计模式，操作系统，网络原理）。
 *  **执行力不够：**电脑里存了一堆视频，90%没看过。

想要快速成长，**除了优秀的老师指导技术、指导职业发展、或者内推**，最重要的 还是你的努力，学习过程不轻松，所以：

**评估以下要求，如果没有决心做到 ，是不适合本课程的。**** **

**【课程要求】**

1、本课程不仅仅是个前端技术进阶课程，还是对**技术职场综合能力**进行的一次全面训练。

2、大部分人不能突破瓶颈是因为**经常陷于低水平的重复**，我们会对以下几个方面要求，进行【刻意练习】，不断输出，不断突破自己的舒适区，提升自己综合能力，在职场上进步。

> **【刻意练习1】代码：**每个人必须要有github账号，按时提交代码，代码review，github将是你未来的职场名片。
> 
>   
> 
> 
> **【刻意练习2】技术周报**：每周一篇技术周报，总结近一周自己技术或工作所得，写文章是最能梳理自己思想，整理自己技术体系的方式。
> 
>   
> 
> 
> **【刻意练习3】讲解**：很多人职场上受限的原因是因为不够open ,无法表达自己的思路，进而就无法跟优秀的人交流，这个往往是技术人员忽略的地方，本课程要求每个月，每人提交至少30分钟的对某一技术点的讲解视频。

**【课程理念】**

我们确定一门优秀的技术提升课，**不仅需要卓越的老师帮学生打破瓶颈，还需要真正目标明确的且有培养潜力的学生，这样才能达到最有效率的提升**。

**课程发起人：杨文坚老师**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 2]

前**腾讯前端高级工程师**，现为BAT一线大厂公司前端开发技术专家，约 **60 人前端团队的架构师**，D2 讲师、 广州前端圈讲师。

早年在腾讯期间成长迅速，对**前端技术效率提升和职场发展**有独到见解及方法。

杨文坚老师在腾讯带过的徒弟已有人达到**腾讯t3(阿里p7)级别**。

杨文坚老师的**《BAT前端进阶【师徒】班》**

**7.28正式开课，每期人数有限**

*  技能水平对标阿里P6,腾讯T2-3。
 *  优秀学生可直接内推 BAT等一线互联网公司 。
 *  这是一个班级，也是个训练营，也是个师徒人脉圈。

**扫码备注“北妈”**

**获取课程大纲**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

**【适合人群】**

*  1-3前端开发经验（或能力）工程师，遇到技术瓶颈，不知如何更进一步 。
 *  希望有大公司的技术视野 ，想在职业发展上更进一步。
 *  希望系统梳理自己前端知识体系的小伙伴。

**【特惠福利】**

杨文坚老师给到我们**10张【师徒班】优惠券**，先到先得，扫码领取，备注**北妈**。

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 3]

[640_wx_fmt_png]: /images/20211122/2e366bfc47e84a5faf434ea5d08cf53d.png
[640_wx_fmt_png 1]: https://img-blog.csdnimg.cn/img_convert/c9ee4a8dc8433b27001baedda59ebcea.png
[640_wx_fmt_png 2]: https://img-blog.csdnimg.cn/img_convert/4190ff6a45a776c8f806688c13774ed1.png
[640_wx_fmt_png 3]: /images/20211122/5aed11409fdd4ae4b905b4756eb8bef4.png
[640_wx_fmt_png 4]: /images/20211122/a8268189c6894bb2ac39d3f26c0a7ed8.png
[640_wx_fmt_png 5]: /images/20211122/66f05295f7254636825d8fd72e19b7cd.png
[640_wx_fmt_png 6]: /images/20211122/6e270a625c5d4370b04bc9c7d5e94392.png
[640_wx_fmt_jpeg]: /images/20211122/aef3779a6bc341b2bc0c5c30f4a0c948.png
[640_wx_fmt_png 7]: /images/20211122/e904606b3961405281ea015b2a8da1a3.png
[640_wx_fmt_png 8]: /images/20211122/4bb1d0dc12df4efa9b2f51581b730b4a.png
[640_wx_fmt_png 9]: /images/20211122/2c231e0ed8e047ae8292966fc7b00b83.png
[640_wx_fmt_jpeg 1]: /images/20211122/2c33fbc3ae2449ccbd4dfc531400c0e0.png
[640_wx_fmt_jpeg 2]: /images/20211122/25c5b0ffdc5543f793a1338c908033cf.png
[640_wx_fmt_jpeg 3]: /images/20211122/e05f6ff36ec9402989b3b75da0f7763d.png