5分钟看懂，未来1年web前端新趋势，都在这了！！！

超、凢脫俗 2022-03-27 05:24 152阅读 0赞

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1][]

文/北妈

阅读本文需要 4分钟

一  
今天是2019年的第一个工作日，意义非凡。

既然是工作日，无论你有没有从假期综合症里反应过来，北妈都要带你快速回顾一下：

**2018年的web前端开发的重要新闻、重要事件和JavaScript的各种流行框架、模式发展趋势。**

快速回顾，也就意味着篇幅精悍，重点突出，也就可能难免有不当和错误之处，如果有，敬请指正和留言讨论。

知识之旅开始：

**NPM热门前端框架下载**

老规矩，先来看最热门的几个框架npm下载量图

![20190112100954698.gif][]

图里不难看出 十年霸主 jquery 依然稳定吗而且还有略高的上扬趋势，这可能亚太地区提供了不少帮助，毕竟很多老项目还是很依赖jquery。

**React继续其统治地位无人能及。**

React多年来一直主导Web开发，2018年它根本没有放慢速度。根据Stackoverflow 调查它仍然是最受欢迎的库之一。

核心React团队非常积极地更新库并添加功能。在整个2018年，我们看到了React v16版本的许多新增内容，包括新的\[生命周期方法\]，\[新的上下文API\]，\[指针事件\]，\[惰性函数\]和\[React.memo\]。

React Hooks 得到了一些响亮的反馈，很多开发人员喜欢这个更新。挂钩是一种使用该`useState`功能向功能组件添加状态的方法，它还将管理生命周期事件。

不会React的同学不要着急，下面有Vue何Angular的，统统都有。如果你想学，北妈也找到了很多原生教程，这是链接，不过前提是你最好英语不错。

戳这里看 40个最佳 react教程(老外的)：

https://gitconnected.com/learn/react

**二**  
Vue：**2018年前端世界明星**

Vue在GitHub Stars中比 React 的星星增长还多，在2017年Vue迅速爆发之后，Vue在2018年继续增长。实际上，它甚至超过了React在GitHub上收到的星星数量

![20190112100954722.gif][]

不过，虽然Vue很受欢迎，但在实际使用中它仍然以React和Angular为后盾和体系支持。

Vue拥有一大批热情的用户群，而且还在不断增长，而且vue看起来将成为未来几年前端频繁使用的一个，其实更多的国人贡献超乎寻常的猛。

彩蛋：北妈在web前端入坑系列第六篇：[Vue、React、Angular之三国杀，web前端入坑第六篇(上)][Vue_React_Angular_web] ，写过关于三个框架的对比和各种属性，有兴趣的回顾下，看此文更佳。

另外，Vue3.0 已经在拟定发布中了，更多的性能优化和提升，不要担心语法层面改变，更多关于Vue3.0的文章和新闻，我后续会第一时间持续跟进，还是那句话，信北妈，得永生！

![640_wx_fmt_other_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1][]

三  
**Angular继续亦步亦趋，发布v7版本**

10月，Angular在其流行的UI框架的第7版中又发布了另一个主要版本。从早期的AngularJS MVC架构到使用组件的更现代的Angular包，Angular已经有了大量的增长。

但据我调查和感受，由于angular的庞大性和系统性，国人用它的越来越少，老外到是依然情有独钟。

因为虽然Angular与React和Vue等框架没有相同的狂热粉丝，但它仍然是专业项目的热门选择。

许多开发人员在使用React时都会感到疲劳，因为它需要工程师在管理构建管道的同时做出许多依赖关系和架构决策。而Vue虽然入门简单，但太过灵活和不成体系，对一些进阶比较困难。

另一方面，Angular是一个高度自以为是的完整框架，CLI管理所有构建步骤。专业环境的另一个好处是Angular需要TypeScript。Angular已经在Web开发世界中树立了独立的价值，并继续被采用，业界很多标准都是Angular第一个发明和采用的。

如果要学习Angular的戳这里：  
https://gitconnected.com/learn/angular

另外放一个 三大前端法宝 热门图

![20190112100954709.gif][]

**四**  
新技术和新概念

1、**GraphQL 、PWA 、WebAssembly**  
GraphQL已被GitHub等技术领导者采用。然而，它并没有像一些预测的那样快速地起飞。

据JS状态调查显示，只有1/5的前端开发人员使用过GraphQL，但是有惊人的62.5％的开发人员已经听说过它并希望使用它。

PWA和 WebAssembly这两个东西，如果你们现在还不懂或者没接触没关系，我会出一系列教程，我们一起学，持续关注北妈就好。

因为这个以后，会越来越流行，只不过现在还不重要。

2、**各种CLI工具封装**  
众所周知，要跟上最新的库，正确配置应用程序并做出正确的架构决策，这可能会让人感到筋疲力尽。

这种痛苦催生了管理工具的CLI包的创建，允许开发人员专注于应用程序和业务逻辑。

大家熟知和不熟知的 流行的框架包括 Next.js（SSR for React），Create-React-App（客户端React），Nuxt.js（SSR for Vue），Vue CLI（客户端） -side Vue），React Native的Expo CLI，默认情况下使用Angular

3、**静态站点话题 重新兴起**  
随着JavaScript革命的发生，每个人都喜欢学习最新最好的语言框架，但现在事情已经解决，我们已经意识到并非每个网站都需要是一个复杂的单页面应用程序（SPA）。

这导致了静态站点生成器的增长。

这些工具允许你在你喜欢的库中编写代码，例如React或Vue，但在构建期间生成静态HTML文件，允许我们立即向用户提供完全构建的页面。

静态站点非常适合构建个人网站或博客，但它们可以轻松扩展到更大的应用程序。我们已经看到了用于构建静态网站的流行框架的兴起，例如Gatsby和React Static for React应用程序，以及VuePress for Vue应用程序。

事实上，静态网站已经变得如此受欢迎，以至于盖茨比实际上已经组建了一家公司，并在去年的开源框架中获得了风险投资资金。

4、T**ypeScript可能是JavaScript的未来**  
JavaScript因没有静态类型变量而受到批评。试图纠正这个问题的两个主要库是TypeScript和Flow，但TypeScript看起来是最受欢迎的。

事实上，在Stack Overflow调查中，TypeScript的评分高于JavaScript本身，为67％，而最受喜爱的语言为61.9％。

根据JS的状态调查，超过80％的开发人员希望使用TS或已经使用它并享受它。对于Flow，只有34％的开发人员正在使用它或想要使用它。

根据所有迹象，TypeScript是JS中静态类型的首选解决方案，许多人选择使用普通的JavaScript。在2018年，TS的npm下载数量大幅增长，而Flow保持不变。

![640_wx_fmt_other_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1][]

不管承不承认，TS已经成为流行了，唉，又学不到了吧？

**5、Webpack 又发布新版本**  
Webpack 3发布仅8个月后，版本4发布了。Webpack 4继续推动简化和更快的构建，声称高达98％的改进。它选择合理的默认值，在没有插件的情况下处理更多功能，并且不再需要使用配置文件。Webpack现在还支持WebAssembly并允许您import直接使用WebAssembly文件。

**6、编辑器话题 VScode成为新霸主**  
一张图足够了，不过我依然是 sublime text 先行。毕竟瑞士军刀不能丢

![640_wx_fmt_other_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 2][]

**五**  
**预测、展望 2019**

2019的大方向展望，从这几点学准没错。

*  随着基础的到位和不断推动改进的Web体验，WebAssembly将开始看到更多的应用。
 *  React保持领先，但Vue和Angular继续在用户中增长。
 *  CSS-in-JS可能会成为默认的样式方法而不是纯CSS。
 *  可能是开发人员再看看本机Web组件吗？
 *  毫不奇怪，性能仍然是一个焦点，诸如PWA和代码分割之类的东西成为每个应用程序的标准。
 *  在PWA采用的基础上，网络变得更加原生，具有离线功能和无缝的桌面/移动体验。
 *  我们继续看到CLI工具和框架的增长继续抽象到构建应用程序的繁琐方面，允许开发人员专注于生成功能。
 *  越来越多的公司采用具有统一代码库的移动解决方案，如React Native或Flutter。
 *  集装箱、CLI化（即Docker，Kubernetes）的影响在前端过程中变得更加普遍。
 *  GraphQL在采用方面实现了飞跃，并在更多公司中得到应用。
 *  TypeScript开始成为标准JavaScript的默认选择。
 *  虚拟现实使用A-Frame，React VR和Google VR等框架向前迈进。

**北妈寄语**

还没看尽兴？篇幅已经很长了，其实每个话题都可以单独写一篇长文出来。

Vue继续流行、React依然是前端霸主，但万变不离其宗，所以2019，我们一起努力进化！

写和翻译这种总结文其实很费精力，不但要查数据，还要自己总结，还不能错，所以各位

“不存在十全十美的文章，如同不存在彻头彻尾的绝望”

今天就先到这里，我们明天见。

老规矩平时不开赞赏，月底统一交租，但不耽误你点 \[好看\]。

**热门阅读**

[2019北妈和你：活着就意味必须要做点什么，请好好努力][2019]

[当实在受不了了，就开干吧！][Link 1]

**每天只想听你们说：****小北最帅！**

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1][]

长按扫码关注我

[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1]: /images/20220327/2b564bac87da41579727c6341ebc756b.png
[20190112100954698.gif]: /images/20220327/ad3c9730119147d7bc6a03920cc98d50.png
[20190112100954722.gif]: /images/20220327/a83a02ee5d804735857dd1ceb9d325ba.png
[Vue_React_Angular_web]: https://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247484527&idx=1&sn=6775cf2467734b5d59d00097e2cdb35e&scene=21#wechat_redirect
[640_wx_fmt_other_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1]: /images/20220327/28f08523e47d40e58a0f3b7dae85e165.png
[20190112100954709.gif]: /images/20220327/3d2ce67fd4754a9fa732ea2ed3a81fad.png
[640_wx_fmt_other_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1]: /images/20220327/e2ff557135984a8bb068038f5a1f6618.png
[640_wx_fmt_other_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 2]: /images/20220327/2fc8be18d5204ada835d7ac7c9d69827.png
[2019]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247485845&idx=1&sn=b958295c7116c300ddf9fc383435ad32&chksm=eca79291dbd01b8798a9565a749a42db7cd5e450f2ec0f6d1bb7bd55b5dc20f5e5f5738e8c12&scene=21#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247485748&idx=1&sn=f87a509e4713c1f7e944aaf348983573&chksm=eca79230dbd01b26cb413798aca3fef675ad21f70c70913e51a81c4ceb72b40214fabfd8305b&scene=21#wechat_redirect
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1]: /images/20220327/031d87e38ae2465aa27853ce7c62a185.png