发布时间：2021-2-12 分类： 行业资讯
1.前言
2017年悄然过去，2018年已经到来。人们正在取得进步，技术正在发展。 2018年的前端领域是什么，技术值得关注，哪些技术将会上升，哪些技术将会下降。让我对我的个人判断做出预测和判断。我希望我能为每个人发挥参考作用！下面提到的技术只表明每个人都应该注意它，并不建议每个人都应该学习所有这些。您认为您需要学习什么，以及您感兴趣的是哪些？如果您有任何可以推荐的工具，框架和库，请随时在评论区域提出建议，让每个人都进步和学习！
2.PWA
PWA（Progressive Web Apps）由Google开发，旨在开发一系列使用尖端技术的应用程序体验的解决方案。明确的一点是，PWA是一个可用于通过尖端技术开发Web应用程序的网页。
自谷歌推出PWA以来，它一直受到业界的关注，而且热度很明显。就在今年，谷歌还宣布PWA将获得与Android原生应用相同的待遇和特权。这意味着基本网页和APP将越来越近，因此关注度将进一步提高。
信息参考：
PWA入门:编写一个非常简单的PWA页面
[保留]您的第一个Progressive Web App
[保留]下一代Web应用程序模型：渐进式Web应用程序
3.typeScript
TypeScript由Microsoft开发。它是JavaScript的超集，JavaScript是一种免费的开源编程语言。在这种语言中，添加了可选的静态类型和基于类的面向对象编程。 typeScript和JavaScript之间的关系如下图所示！
（图像来源田园 - 从JavaScript到TypeScript）
Angular已经开始使用typeScript开发，而react和vue进一步加深了对typeScript的支持。不难发现打字稿的热门程度如何！
信息参考：
TypeScript官方文档
TypeScript资源集
从JavaScript到TypeScript 1 - 什么是TypeScript（请看第一篇，不要在本系列中删除一些文章）
4.包裹给webpack带来多大的威胁
Webpack每个人都知道它是一个JavaScript模块打包工具。简单地说，每个模块都经过分析，编译，打包等，以便输出文件可以在浏览器中运行。
（图片来自菜鸟教程 - Webpack教程）
虽然webpack工作是一个模块打包工具，但它也可以取代像gulp这样的自动构建工具的一些功能！在2017年的发展之后，webpack的热度是显而易见的。
但无论如何。 2017年底有一匹黑马：包裹。包裹超出了大多数人的期望，是2017年最大的惊喜之一。说到包裹的最大优势，它似乎是webpack的最大缺点：配置和性能！ Parcel声称零配置，多核打包和使用文件缓存，比webpack快近10倍！
（图片来自neal的文章 - 宣布的包裹：一种快速，零配置的Web应用程序打包工具）
从明星的顶端来看，Parcel似乎不仅仅是当时的webpack，而且热量仍在继续。
webpack很难使用，我认为配置很麻烦，而且文档也不完美，外观也非常具有攻击性。至于包装时间，只能说没有比较没有伤害。如果包裹可以做这些事情，就不可能从网络包中获得大量的肉。
宣布包裹：快速，零配置的Web应用程序打包工具
Parcel Vs Webpack
5.WebAssembly
面向Web的通用二进制和文本格式项目由Google，Microsoft，Mozilla和Apple等公司合作完成。
来自腾讯IVWEB团队的报价：WebAssembly是一种新的字节码格式。它的缩写是'.wasm'，而.wasm是一个文件名后缀，一个新的底层安全二进制语法。 。它被定义为“缩减的，短载格式和执行模型”，并被设计为Web多编程语言目标文件格式。这意味着浏览器端的性能将大大提高，它还使我们能够实现底层构建块的集合，例如强类型和块级范围。
当WebAssembly第一次出现时，甚至有开发人员想知道WebAssembly将来是否会取代JavaScript。在这里，我的感觉是JavaScript不会被WebAssembly取代，等待下降，而是与WebAssembly的关系！ 2017年，chrome，Firefox，IE，Safari四个浏览器统一了WebAssembly程序，这是非常罕见的看情况，我所理解的是第一个这样的情况。很明显，四家浏览器供应商都关注WebAssembly。至于2018年，WebAssembly将如何发展？很难说初步预测应该普及，但还没有达到普及和发展的阶段。但无论如何，这都值得关注！
我们来谈谈WebAssembly是不是很尴尬？为什么它会影响每个Web开发人员？
WebAssembly实践：如何编写代码
6.react，angular，vue troika
2017年，反应迅速发展，vue正在扮演黑马框架的角色，而且角度注意力不如以前，但也不容忽视！在2017年的调查报告中，我们可以看出趋势基本上是反应占据了主流，不使用框架排名第二，而angular1和angular2排名第三和第四。
中国的情况是第一反应，第二反应
Vue在2017年非常火爆，但2018年的vue潜力不应低估，如下所示（有1.2W的人想要使用vue）。尽管超出反应的可能性不是很大，但这个位置仍然会有所改善
参考
2017JavaScript调查报告
2017年前端行业发生了哪些变化，2018年的预期是什么？
2017年前端大事件和趋势评论，2018年何去何从？
2017年JavaScript状态报告：询问了23,000名提供此答案的开发人员
2018年最值得关注的JavaScript趋势
无论如何，我认为框架不是最好的，只有最好的。三驾马车并没有说必须满足一切！关键是，如果js基础是好的，学习框架将更容易使用。如果你不学习极端的js，那么开始使用这个框架将是非常困难和容易的。
7.人工智能和大数据
人工智能和大数据不是一种技术，而是一个在过去两年中非常热门的领域，而不仅仅是在前端。我也认为这是互联网上的下一波红利。非常值得关注和学习！这也是一种流行的趋势，因此一些数据可视化工具（echart，D3等）和人工智能库已经受到关注！
8.yarn VS npm
我相信，通过前端工程，模块化开发人员将不可避免地使用npm来安装功能包。特别是在node.js的早期，npm是工程的标准。但在2017年，npm的地位显然正在接受纱线的威胁！今年的调查结果显示，纱线也超过了npm。纱线的优点是：快速，安全，以及一些触摸细节！如果你遵循这个情况，差距会逐渐变大！
参考
纱线，而不是另一个npm第三方客户
Yarn vs npm:你需要知道的一切
9.css在js中仍然存在争议吗？
始终建议前端域分离结构层（html），表示层（css）和行为层（javascript）。但在做出反应之后，这条规则似乎被推翻了！由于反应的组件结构，需要一起编写html，css，javascript。许多开发人员在js中不适应甚至反对css。那么在新的2018年，它还在继续引发争议吗？
参考
JS中的CSS简介
精读《请停止 css-in-js 的行为》
您如何看待JS中的CSS？
不要再在JavaScript中编写CSS了
10.flex和网格布局更受欢迎
在前面的首页布局中，内联块，浮点，位置布局等。但是使用flex和grid，布局更简单。
首先，flex已经基本上得到了所有浏览器的支持，其便捷的功能在很多开发人员中都很受欢迎！
（图片由易一峰的网络日记提供 - Flex Layout Tutorial：Grammar）
网格，网格布局据说是下一代布局，但浏览器兼容性不如flex。但这也是必要的。毕竟，它已被W3C列入标准。兼容性进一步增强。
参考
Flex Layout教程：语法
Flex Layout教程：示例
CSS网格布局：什么是网格布局（看完之后，建议看下面的文章，这是沙漠中写的一系列文章，质量非常高）
CSS Grid VS Flexbox：实例比较
11.rxjs
我对rxjs有一点了解，但它仍然没用。可能每个人都是新手，但我在这里因为我认为rxjs仍然值得推荐。引用官方网站：RxJS是一个响应式编程库，它使用Observables使编写异步或基于回调的代码更容易。该项目重写了Reactive-Extensions/RxJS（RxJS 4），具有更好的性能，更好的模块化，更好的调试调用堆栈，同时保持最大的向后兼容性，只有一些破坏性的变化。 （重大改变）是减少API的外层。
参考
Rxjs中文文档
rxjs入门
以流行的方式理解RxJS
12.其他方面
由于篇幅限制，我认为还有一些其他问题也值得关注。如下
小应用程序
首先，WeChat小程序，来自微信小程序，许多前端吐了。在与其他人交谈时，很多人还提到，当小程序问世时，我认为这是一个没有前途的问题。或者它是：灭绝APP是不可能的，applet只是APP的阉割版本，竞争对手不会开发小程序。还有：学习这不如关注PWA那么好，这比这更有意义。关于这一点的话可能就是意思。在2017年，我还考虑开发小程序，以便我从2017年开始学习小程序。然而，在17年的第四季度或年底，微信宣布它可以嵌入html5页面，并且还可以开发小游戏。让我看看小程序有释放的热量。在18年中，小程序的发展如何，我是否会联系并学习开发小程序，并四处走动。但值得关注的是什么。
接下来是支付宝的小程序，虽然感觉不是新闻，但毕竟它是大工厂的东西。值得关注的是值得关注。至于学习不学习，发展不发展，另一件事！
电子
被称为开发桌面应用程序的绝佳工具。我还尝试了几个官方示例，操作非常顺利，只是因为我没有开发桌面应用程序一段时间，所以我没有太注意它，我没有学习它。在2018年仍然关注，甚至学习发展！
WebVR和WebAR
在阅读了所谓的相关例子之后，VR和AR的影响并没有引起我的兴趣。虽然那些例子，我不明白如何发展过时。然而，对于这件作品，注意仍然值得。毕竟，这也是WebVR和WebAR的开始。
13.哪些技术将向下/向下
角
如前所述，angular在前端框架中使用率很高。谷歌也是5.x，实际上会出现在这里吗？这只是一个小预测。 2017年讨论角度的情况已经相对较小。在2018年，角度的使用率将继续下降，但不会下降，并且在前端框架中仍然具有很好的地位。在18年中，角度仍然与反应和vue的三个框架相同，但是用户不如反应和反对。
Jquery的
Jquery将不会在2018年下降，但使用率将进一步降低。说到jquery，它真的是时代的变化。当我第一次接触前端时，jquery击中了世界。那时，与其他图书馆和框架相比，jquery是一个巨人，使用率遥遥领先。甚至微软也在.net平台上支持jquery。在工作时，潜规则是：没有jquery，没有人承认你是前端。可以在jquery的状态时看到。我也相信很多人都有jquery的感觉。只是技术不谈感情！
es5
下面的语法本段中提到的es6代表es6及以上语法，包括es7，es8。 Es5表示es5下面的语法，包括es3
经过两年的发展，es6受到了许多开发者的欢迎，因为它的便利性和实用性。 2017年应该是es6语法的首次使用率超过es5。在2018年，es6语法使用率将继续上升。 es5和其他语法的使用率将继续下降。即使对于当前的开发，您仍然需要使用babel将es6语法编译为es5。
咕噜
当gulp被释放后，grunt的地址已经受到影响。现在有了包装工具而不是自动构建工具的一些工具，似乎自动构建工具不像以前那么好，更不用说市场有更好的构建。工具 - 吞咽。
Sea.js
sea.js是由中国人开发的。当时，它在使用时充满了喜悦。最后，舞台上有中国人的事情。 Sea.js以其简单，轻便和其他优点而广受欢迎。但是随着es6的模块化，即使是sea.js的作者，Yu Bo也在微博上发言：它也应该是Sea.js和KISSY的墓碑。
14.摘要
那么，关于2018年个人对前端和一些建议的预测，我在这里写了！虽然我写了这么多，但我并不是说所有人都必须学习，但我会建议大家注意。 ，了解哪些技术可以查看您的需求并了解您的兴趣。提到的文章只是我通常关注的问题，其中一些只是我，但我还没有学习或使用它。我也觉得前端方面没有最好的工具，框架，库等，只有最适合你。
最后，如果您有任何工具，框架，库或其他技术，欢迎您在评论部分指出。让每个人相互学习，共同进步！
