1.前言2017年悄然过去，2018年已经到来。人在进步，科技在发展。2018年有哪些前端领域和技术值得关注，哪些技术会崛起，哪些技术会没落。以下是根据我个人的判断做出的预测和判断，希望能为大家提供一个参考！下面提到的技术只是建议大家关注，并不是建议大家全部学习，而是建议大家按需学习，哪些是你认为需要学习的，哪些是你感兴趣的在学习！如果大家有什么觉得可以推荐的工具、框架或者库，欢迎在评论区提出来，让大家一起提高，互相学习！2.PWAPWA（ProgressiveWebApps）是由谷歌提出，采用尖端技术开发的，一系列让网页使用App-like体验的解决方案。有一点很明确：PWA是一个网页，可以通过尖端技术开发一个Web应用程序。自谷歌提出PWA以来，持续受到业界的关注，火爆程度可见一斑。就在今年，谷歌还宣布PWA将获得与Android原生应用相同的待遇和权限。这意味着未来的网页基础和APP会更加紧密，关注度会进一步提高。参考：GettingstartedwithPWA:WriteaverysimplePWApage[转载]YourfirstProgressiveWebApp[转载]下一代Web应用模型：ProgressiveWebApp3.typeScriptTypeScript由微软开发。它是JavaScript的超集，JavaScript是一种免费的开源编程语言。在这种语言中，添加了可选的静态类型和基于类的面向对象编程。下图说明了typeScript和JavaScript的关系！（图片来源牧之-从JavaScript到TypeScript）Angular已经开始使用TypeScript进行开发，React和Vue也进一步加深了对TypeScript的支持。不难看出typeScript有多流行！参考：TypeScript官方文档TypeScript资源合集从JavaScript到TypeScript1-什么是TypeScript（阅读第一篇，不要错过本系列的几篇文章）4、parcel可以给webpack带来多大的威胁？大家都知道webpack是JavaScript模块打包工具，简单来说就是对各个模块进行分析、编译、打包，使得输出的文件能够在浏览器中运行。（图片来自菜鸟教程-Webpack入门教程）webpack的工作虽然是模块打包工具，但也可以替代gulp等自动构建工具的部分功能！经过2017年的发展，webpack的火爆程度是有目共睹的。但是，但是。2017年底，出现了一匹黑马：包裹。Parcel出乎大多数人的意料，也算是2017年最大的惊喜之一。说起parcel最大的优势，似乎又是webpack最大的劣势：配置和性能！Parcel号称零配置，多核打包，使用文件缓存，时间上比webpack快近10倍！（图片来自neal的文章——AnnouncingParcel:afast,zero-configurationwebapplicationpackagingtool）从star的角度来看，Parcel在当时似乎比webpack更受关注，热度还在持续。webpack不好用的地方，我觉得是配置繁琐，文档不完善，看着比较乱。至于打包时间，只能说没有比较就没有伤害。如果Parcel能做好这几点，说不定还能从webpack中分到不少肉呢。发布Parcel：快速、零配置的Web应用程序打包工具Parcel与Webpack5的对比。WebAssembly是由Google、Microsoft、Mozilla、Apple等公司联合开发的Web通用二进制和文本格式的项目。引用腾讯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的三驾马车2017年，react发展迅猛，vue扮演着框架黑马的角色。Angular虽然没有以前流行了，但是也不能忽视！从2017年的调查报告可以看出，趋势基本是react已经占据主流，frameworks的使用排在第二位。Angular1和angular2分列第三和第四。国内的情况是react第一，vue第二。Vue在2017年很火，但是2018年vue的潜力不容小觑如下图（1.2W人想用vue）。虽然超越react的可能性不大，但是位置还是会增加的。参考资料2017JavaScriptSurveyReport2017年前端领域发生了哪些变化，2018年有哪些期待？2017前端大事及趋势回顾，2018何去何从？2017JavaScript状态报告：23000名开发者被问及，他们给出了这样的答案2018年最值得关注的JavaScript趋势无论如何，我认为框架没有最好的，只有最合适的。三驾马车不说，想必他们都知道吧！一是，如果js基础好，学框架会比较容易。如果不想学js，直接用框架上手，会很吃力，容易迷糊。7、人工智能和大数据人工智能和大数据不是一个技术，而是一个领域。近两年很火，而且不局限于前端。我也认为是互联网的下一波红利。非常值得关注和学习！这也是一个流行趋势，所以一些数据可视化工具（echart、D3等）和人工智能库受到了关注！8.YarnVSnpm相信接触前端工程化和模块化的开发者，难免会使用npm为功能包安装依赖。尤其是早期的node.js，npm是工程化的标配。但是到了2017年，npm的地位明显受到了yarn的威胁！在今年的调查结果中，yarn也超越了npm。yarn的优点是：快速、安全，还有一些感人的细节！这样下去，差距会逐渐变大！参考资料yarn，不是另一个npm第三方客户端Yarnvsnpm:everythingyouneedtoknow9.cssinjs还有争议吗？在前端领域，一直建议将结构层（html）、表现层（css）、行为层（javascript）分开。但是react出来之后，这个准则好像被推翻了！因为react的组件结构，要求html、css、javascript一起写。很多开发者不适应甚至反对js中的css。那么在新的2018年，争议还会继续吗？参考资料CSSinJS简介精读《请停止 css-in-js 的行为》你对CSSinJS怎么看？不要再用JavaScript编写CSS。10、flex和grid布局在前端页面布局中比较流行，inline-block、float、postion布局等。但是有了flex和grid，布局就变得简单多了。首先，flex基本上已经得到所有浏览器的支持，其便捷的特性也受到了很多开发者的青睐！（图片来自阮一峰网络日记--Flex布局教程：语法）Grid和Grid布局号称是下一代的布局方式，但在浏览器兼容性上不如flex。但这也是有必要了解的。毕竟已经被W3C收录到标准中了。兼容性也进一步增强。参考Flex布局教程：语法Flex布局教程：实例CSSGrid布局：什么是GridLayoutHigh）CSSGridVSFlexbox：实例对比11.对rxjsrxjs略有了解，还没有用过。可能大家对这个比较陌生，但是在这里提出来是因为我觉得rxjs还是值得推荐的。引用官网：RxJS是一个使用Observables进行反应式编程的库，可以更轻松地编写异步或基于回调的代码。这个项目是对Reactive-Extensions/RxJS(RxJS4)的重写，具有更好的性能、更好的模块化、更好的可调试调用堆栈，同时保持大部分向后兼容性，只有一些重大更改（breakingchanges）是减少外部API。参考资料rxjs中文文档rxjs简单介绍通俗理解RxJS12。其他方面限于篇幅，还有几个我觉得可以简单关注一下。以下小程序以微信小程序入手。自从微信小程序出来后，很多前端都吐槽了。很多人在和其他人聊天的时候也提到：小程序一出来，我觉得这是一个没有前途的东西。或者说：APP是不可能灭掉的，小程序只是APP的阉割版，竞争厂商不会开发小程序。还有一点就是：关注PWA不如学这个，比这个更有意义。这大概就是我所说的话的意思。2017年我比较关注小程序的开发，以至于2017年我一直没学过小程序。不过在2017年第四季度或者年底，微信已经宣布可以嵌入html5页面，可以开发小游戏了。让我看看小程序和刚刚发布的人气。18年，小程序的开发情况如何，我是否会接触和学习开发小程序，我们拭目以待。但两者都值得一看。二是支付宝的小程序。虽然感觉新闻不多，但毕竟是大公司的东西。值得关注。至于学不学，发展不发展，那是另外一回事！Electron被称为开发桌面应用程序的绝佳工具。我也试了几个官方的例子，运行起来很流畅，但是因为我暂时不开发桌面应用，所以一直没怎么关注和研究。2018年还是会关注，甚至学习开发！WebVR和WebAR看了所谓的相关例子，VR和AR的效果并没有引起我的兴趣，虽然我没看懂那些例子是怎么开发的。不过，对于这一个，还是值得关注的。毕竟，这只是WebVR和WebAR的开始。13、哪些技术会衰退/下滑Angular前面也提到过，angular在前端框架中仍然有很大的使用率。Google也发布了5.x，所以会出现在这里？这只是一个小小的预测。2017年，关于angular的讨论比较少。2018年angular的使用率会继续下降，但不会下降，在前端框架中还是有很大的地位。2018年，angular依然是与react、vue齐名的三大框架，但使用人数却没有react、vue多。jqueryjquery在2018年不会下降，但使用率仍会进一步下降。说起jquery，真是时代的变迁。刚接触前端的时候，jquery称霸天下。在那个时候，相对于其他库和框架，jquery是一个巨无霸，使用率遥遥领先。连微软都支持.net平台上的jquery。刚开始工作的时候，潜规则是：不会jquery，没人会认你是前端。可见当时jquery的地位。我也相信很多人对jquery都有感情。只是技术不谈情怀！es5以下版本的语法本段提到的es6代表es6以上的语法，包括es7和es8。es5表示es5以下的语法，包括es3es6经过两年的发展，其便捷性和实用性受到了很多开发者的欢迎。2017年应该是es6语法的使用率第一次超过es5。2018年，es6语法的使用比例将继续上升。es5等文法的使用率会持续下降。即使以现在的开发来说，还是需要用babel把es6的语法编译成es5。在gulp中发布grunt时，grunt的状态已经受到影响。现在自动构建工具的一些工具被打包工具替代了，似乎自动构建工具的作用大不如前，更不用说市场上更好的工具了。构建工具——gulp。sea.jssea.js是国人开发的，当时用的时候满心欢喜，终于有国人的东西登场了。sea.js由于其简单性和轻量级而非常受欢迎。但是随着es6的模块化，就连sea.js的作者余波也在微博上发声：Sea.js和KISSY也应该立个墓碑。14.总结到此结束，下面是个人对2018年前端方面的预测和一些关注的建议！虽然写了这么多，但并不是说一定要学所有的东西，只是建议大家注意一下，学习哪些技术要看自己的需求和兴趣。文中提到的只是我平时关注的，有些只是我自己了解，没有深入学习和使用。我也觉得在前端方面，没有最好的工具、框架、库等，只有最适合的。最后，如果大家有什么工具、框架、库或者其他技术，欢迎在评论区提出建议。让大家互相学习，共同进步！--------------------------华丽的分割线-------------------------想了解更多，关注我微信公众号：手厚书阁
