前端2018年前沿技术概览

清疚 2022-05-19 06:43 231阅读 0赞

2017年就要这一年内除了三大框架蓬勃发展，前端其他领域的技术也都在众多专注于前端开发的开发者的一起努力下不断进步，下面我就总结一下2017年兴起2018年可能会成为潮流的一部分前端技术。  
本文只是一个概览，我们来看看这个技术主要是干什么的，解决什么问题，当然这篇文章还有一个重要目的是，让你了解这些名词，下次在面试和装X的时候有迹可循。

**PWA（Progressive Web Ap）**

一个被吹得云里雾里的技术，谷歌强推的前端解决方案。其实它本身并不是一种技术，而是一种前端页面的实现方案，即页面可以被添加到主屏，页面可以离线访问，页面可以实现推送和通知，等等至于那些形容词：。可靠，快速，耐看，安全，其实就是针对这种解决方案而言，一种不是具体的技术实现方式  
具体实现用到了一堆技术方案，其中关键技术包括Web App Manifest，Service Worker，Push Notification等。

> 参考：[更多内容PWA][PWA]

**GraphQL**

Facebook主推的GraphQL并不算一个新技术，但是如今的趋势是可能慢慢取代Restful的查询模式。  
  
一种可以取代Restful api的数据查询方式，其中一大优点是可以准确查询，精准描述，以及其他一大堆好处，参见参考：

> 1.  [官网][Link 1]
> 2.  [介绍][Link 2]

**WebAssembly**

说实话笔者看了一圈也没太弄明白这个技术，但是这个东西是当前苹果谷歌mozile等一干大厂商都在强推的东西。我的简单得理解就是，基于浏览器的一种二进制的字节码？使得浏览器在性能和安全方面都得到提升，毕竟JS是赶工出来的....直接看参考吧

> [关于WASM讨论的][WASM]  
> [官网][Link 3]

**打字稿**

微软的打字稿已经火了好几年了，它解决的还是JS本身的问题，是JS的一个超集，将JS变成了一种强类型语言，让前端编程变得跟传统编程方式类似，比如Java的。同时它也是开源的。  
笔者之前所在的英美烟草公司，半年前就有人在研究打字稿，并试图在项目中应用，所以对于习惯于传统编程，以及对JS有诸多不满的开发者，打字稿几乎是一个完（  
zhuang ）美（bi）的选择。目前诸多框架比如vue也都推出了TypeScript版本。另外  
，TypeScript与微软的IDE Visual Studio结合的非常好，两个配合起来效果极佳。  
预知详情请看参考：

> [网官][Link 4]  
> [知乎讨论][Link 5]

**包管理工具纱线**

不要再一提包管理工具就是故宫了，2017年纱年迎头赶上，现在就连故宫都要照着纱来做了。

> NPM自从最初发布以来已经有了相当长的一段时间，但它仍然缺少一些关键特性，而这正是Yarn希望补充的.Yarn的主要贡献是包缓存，一个确保确定性构建的锁文件，并行操作以及依赖关系。这些功能非常成功，以致于NPM在其5.0版本中实现了它们.Yarn下载量超过10亿次（目前每月下载量达到了125万次）并拥有惊人的29000多个GitHub明星。即使你没在使用Yarn，JavaScript的包管理整体上由于Yarn的发布也得到了显着地  
> 提升作者：hijiangtao   
> 链接：[https][]：//www.zhihu.com/question/264551320/answer/282896101   
> 来源：知乎着作  
> 权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
> 
> [纱官网][Link 6]

**除了的WebPack，还有包裹，汇总**

模块化工具也有后来者，的WebPack也并非永远一成不变。

> Parcel作为一个有趣的项目，在短短十天内便在GitHub上获得了10000个星。它主要通过利用多个CPU内核和一个高效的文件系统缓存来实现。它还基于抽象语法树进行操作，而不像的WebPack使用字符串。  
> 除此外，汇总的发展也不容小觑4月阵营团队从咕嘟咕嘟切换到了汇总进行开发除此外，的WebPack团队也推荐在某些方面使用汇总而不是的WebPack。  
> 作者：hijiangtao   
> 链接：[https][]  
> ：  
> //www.zhihu.com/question/264551320/answer/282896101 来源：知乎着作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
> 
> [包裹官网][Link 7]  
> [汇总官网][Link 8]

**PostCss**

CSS预处理，Postcss越来越火爆，它可以做很多事情。

> [PostCss][]

本文只是技术概览，是2018年可能出现的技术名词的汇总，希望各位不要过度纠结技术细节，感兴趣的朋友们可以自己去钻研一下。

[PWA]: https://zhuanlan.zhihu.com/p/25167289
[Link 1]: http://graphql.cn/
[Link 2]: https://segmentfault.com/a/1190000005766732
[WASM]: https://www.zhihu.com/question/31415286
[Link 3]: http://webassembly.org/
[Link 4]: https://www.tslang.cn/
[Link 5]: https://www.zhihu.com/question/21879449
[https]: https://www.zhihu.com/question/264551320/answer/282896101
[Link 6]: https://yarnpkg.com/zh-Hans/
[Link 7]: https://parceljs.org/
[Link 8]: https://rollupjs.org/
[PostCss]: https://github.com/postcss/postcss/blob/HEAD/README.cn.md