2018年优秀前端最应该掌握什么？

说在最前面

随着学习java的脚步越来越快，程序员和工程师越来越壮大，势必每个人都想了解2018年java究竟如何发展，有哪些新技术值得学习。不久前stateofjs.com发布了2017年java现状报告，Ryan chartrand 推出了2018年java发展趋势，现下面就跟小编一起来看一看~

React vs. Vue.js

之前认为Vue可能会成为React的一大竞争敌手的人不是很多，但是今年想要无视Vue是不太可能的，Vue轻量，容易学习，有着令人难以置信的工具，有很棒的状态管理和路由内置等等。虽然Vue社区目前还没有React那么大，但从核心团队考虑用户需求来说，这个社区正在壮大。如果你是一位拒绝学习React的Angular开发者，随着Angular的机会日渐消亡，与Angular语法有相似之处的Vue或许能成为你的下一个选择。

人工智能和大数据

人工智能和大数据这两块领域近两年越来越火，也不止于前端。人工智能和大数据几乎覆盖了各行各业，作为现在最流行的IT词汇，对于很多不了解IT的人来说或多或少有一些了解，再加上国家政策不断扶持，发展前景相当广大。因此一些数据可视化的工具（echart，D3等）和人工智能的库都得以受到关注！

PWA

PWA(Progressive Web Apps)由谷歌提出，用前沿的技术开发，让网页使用如同App般的体验的一系列方案。明确的一点就是：PWA就是一个网页, 可以通过前沿的技术开发出一个网页应用。

自从谷歌提出PWA后，就持续的获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布：PWA将获得与安卓原生应用同等的待遇与权限。这就意味着以后的网页基本和APP将越发将近，那么关注度将会进一步的上升。

typeScript

TypeScript由微软开发。它是JavaScript的一个超集，自由和开源的编程语言。在这个语言中，添加了可选的静态类型和基于类的面向对象编程。由下图说明typeScript和JavaScript的关系！

angular已经开始使用typeScript进行开发，react和vue也进一步加深对typeScript的支持。不难发现typeScript的火热程度！

parcel异军突起

webpack大家都知道是JavaScript模块打包工具，简单的来说就是把各个模块就行分析，编译，打包等，使产出的文件可以在浏览器中运行。

webpack的工作虽然是模块打包工具，但也能代替类似gulp等自动构建工具的部分功能！经过2017的发展，webpack的火热程度也是有目共睹。

但是2017末parcel出乎了大多数人的意料，它完美弥补了webpack的最大劣势：配置和性能！号称零配置，多核打包，并且使用文件缓存，在时间上比webpack快了将近10倍。

WebAssembly

由谷歌, 微软, Mozilla，苹果等公司合作的一个面向Web的通用二进制和文本格式的项目。

引用腾讯IVWEB团队的说法：WebAssembly是一种新的字节码格式。它的缩写是".wasm"，.wasm 为文件名后缀，是一种新的底层安全的二进制语法。。它被定义为“精简、加载时间短的格式和执行模型”，并且被设计为Web 多编程语言目标文件格式。这意味着浏览器端的性能会得到极大提升，它也使得我们能够实现一个底层构建模块的集合，例如，强类型和块级作用域。

2017年，chrome，火狐，IE，Safari四个浏览器统一通过了WebAssembly的方案，可见四个浏览器厂商对WebAssembly的重视。至于2018年，WebAssembly初步预测应该还是普及推广，但是还没有到普及开发使用的阶段。但作为未来有潜力的发展方向，IT从业者可以抽出时间来多关注关注。

yarn VS npm

相信接触到前端工程化，模块化的开发者都不可避免的使用npm进行功能包的安装依赖。尤其是在node.js的初期，npm就是工程化的一个标配。但是2017年，npm的地位显然是收到了yarn的威胁！今年的调查结果，yarn还超越了npm。yarn的优势在于：快，安全，和一些感人细节！如果照着情况下去，差距会逐渐变大！

css in js依然备受争议？

前端领域，一向是推荐结构层(html)，表现层(css)，行为层(javascript)分离。但是在react出来之后，这个准则就貌似被推翻了！因为react的组件结构，要求把html，css，javascript写在一起。很多开发者对css in js不适应甚至反对。那么在新的2018年，是否还是继续的争议下去？

flex和grid布局更加流行

有了flex和grid之后，前段布局变得更加的简单。flex基本已经被所有的浏览器支持的，其方便的特性也受到了很多开发者的热捧。

而grid，网格布局号称是下一代的布局方式，但浏览器兼容方面不如flex。但已经被W3C纳入标准。兼容性也是进一步增强。

rxjs

引用官网的说法：RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。这个项目是 Reactive-Extensions/RxJS(RxJS 4) 的重写，具有更好的性能、更好的模块性、更好的可调试调用堆栈，同时保持大部分向后兼容，只有一些破坏性的变更(breaking changes)是为了减少外层的 API 。

想学习高大上的IT知识吗？

想成为顶尖的IT人吗？