2017前端技术大盘点

前言

临近2017的尾声,总是希望来盘点一下这一年中前端的发展。到目前为止,前端的井喷期也快临近尾声了。并不像几年前一样,总是会有层出不穷的新东西迸发出来。同时,前端技术也慢慢的趋于稳固,自成一套体系。如果你喜欢我的文章,欢迎评论,欢迎Star~。欢迎关注我的github博客

正文

我们何处说起?自然是离不开那三驾马车。

三驾马车

自从2015年,react的问世,开始了三驾马车时代的先河。同时,jQuery也逐渐让出了其霸主的地位。后续的,angular开始了大型的改版,似乎想要追逐react的步伐。两种完全不同思路的体现,在前端开发的技术栈中发光发亮。同时,Vue就像一匹黑马一样,一路披荆斩棘,快速地进步着。

因此,从2017年开始,3架马车可以说是并驾齐驱。似乎需要看些对比数据,来表示它们目前的现状。(来自国外的数据)

框架对于用户的满意度

可以看到react的深紫色是最多的,表示用户对于react还是十分满意的。虽然,早前的React收到了协议的影响,但是,这似乎并不影响它在开发者心目当中的地位。另外,react如此受欢迎的另一个重要原因就应该是React Native了吧。今年以来,React Native一直以两周一次的小版本更迭周期,迅速发展着。或许,2018年将会迎来最重大的正式版本1.0。(这个还是值得期待的。)

对于大多数开发者而言,学习了React的时候,对于它们学习React Native是有直接性质的帮助的,所以一般的国外开发者不会拒绝学习React这个框架的。

介绍完,React的情况,我们或许可以回望一下Angular的情况吧。

Angular可以说是一个最早问世的MVVM的框架。2009年,angular像一枚重磅炸弹一样,震撼了前端的开发者们。当时,W3C似乎还未推出正式的Web Component标准。React和Vue也还在襁褓之中安眠。可想而知,之后的几年Angular一直影响着后续前端的发展。但是,Angular有着许许多多的问题,也使得它在后续的框架之争中,处于下风。2016年9月正式推出的angular2,将angular引领向了另一种形式——以HTML为中心的框架。一套完整的体现,其中加入了TypeScript RxJS等组合,可想而知,一套内容的学习成本相当之高,与React以JS为中心的思想完全不同。不过似乎这一次Google将框架的定位目标换成了企业,国内外在使用这套框架的往往是银行、证券类企业。不过,它的发展还是被看好的,毕竟它的背后可都是一群Google的顶尖开发工程师呢!!

最后,我们来了解一下三驾马车中的黑马——Vue。

从第一张图中,虽然React一直处于领导地位,但是,Vue2的使用,也将于其他两个框架持平快了。毕竟,在国内的前端环境中,Vue可以说是非常受欢迎的。(据说印度开发前端,会用Angular,中国人开发前端,会用Vue)不得不说的是,Vue与Weex的结合,虽然体验不及RN,但是有着阿里的技术支持,也将有希望突破吧。

PWA

如果在国外,你今年听到的热词一定会有PWA这个东西。前不久,Safari已经开始支持PWA了,那么也就意味着PWA的时代不会太远了。当然,国内实践PWA的公司也不占少数,例如饿了么、阿里等。从去年开始,对其有所耳闻,到今年Google开发者大会上的现场演示,相信更多的开发者对于这门技术的狂热。对于国内开发者而言,唯一不好的优势应该就是文档了。因为目前来说,大部分的文档都是以英文的形式存在于GitHub或者国外书籍中的。翻译过来的书,也不会这么快的速度问世,所以目前研究PWA的中文资料少之又少。

不过相信,它的发展在之后的一两年的是强而有力的。

国内的小程序

今年,在国内会被称为“小程序年”。从1月份开始,微信正式将公测了小程序。继而在7月份开始,支付宝也推出了相应的小程序。在国内,这样子的重大消息是不容忽视的。两大巨头之争,推动的是无与伦比的流量红利。基于小程序的开发,也将成为国内的前端的一大重点。将原用的整体化的内容,逐步分割成一个个小的模块,将至放入到微信这个大环境中去分享,最后起到一个引流的效果。回到技术的成面,小程序或许会有着与PWA一样的思想,将之前在移动端难以为继的Web端,放入到自家应用中,来确保它的长久与稳定。更多的是说,这两者起到了异曲同工的效果。同样的,这项技术,将在2018年持续发展下去,同时,也会有更多的前端投入到这项开发中去。

styled-components

这项技术,也是从上半年开始有所耳闻的。主要是作为react库的衍生物的形式出现的。它将css部分的代码以js的形式展现在代码中,那么之后只需要开发js就可以完成整个应用的开发了。同时,它还有一个好处,它的样式是基于组件的,所以可以做到复用,同时,往往js的变量在css中去使用时,是一个令人头疼的问题。而styled-components很好的解决了这个问题,因为它本身就是在组件中开发样式,js的变量依然可以被使用在css的部分代码中。这项技术也是可期的,因为越来越多的人在自己的react项目中开始了这项技术的尝试。

Rollup

这是啥?没错,又有一个模块打包工具来了。或许,大家熟知的更多的是webpack这个模块打包工具。今年的4月份,React做了一个大动作——在React的主分支上合并了一个PR,将当时的构建工具换成了Rollup。可想而知,这个东西将会是多么的重要。好奇的是,它与其他的不同之处吧!它是一款基于ES2015模块进行打包的打包器。在过去的打包工具(包括webpack在内)中,都是基于CommonJS的规范去进行模块的打包的,所以,过去很多库的前面总是会有一大堆webpack等自家的逻辑填充在开头。Rollup不同,他是后天生的,出生的基准点就表明它的高度将不限于此。但是,相对于巨头webpack来说,它或许在今年并未体现出它的优势,但是相信它会厚积薄发的。

建议:在开发应用时,使用webpack,在开发库时,可以考虑Rollup。

GraphQL

这个东西,或许在国内鲜有闻之。但是,它仍是一项不错的技术,同时在调查中,也体现出不俗的潜力,如图:

GraphQL

它是有Facebook开发的一款API查询语言,或将替代Rest在后端的地位。虽然,目前来说,其性能并不是特别的优秀,也会bug不断。但是,2018年或将是GraphQL的一年。那么,和前端又有什么关系呢?别忘了,我们手里还有一个利器NodeJS呢!能够用好它,对于你开发nodeJS,或许使用便利。

TypeScript

这一项由微软老大开发的语言,处处在弥补着JavaScript的缺陷。一出生,就打着“取代JavaScript”的旗号,发展的速度也是惊人的。当然了,W3C也在努力的推进着JavaScript的进步,之后的几年,应该会是着两门语言并驾齐驱的发展吧。因为开发人口众多,不可能走到谁取代谁的地步。

最后,贴出一张Stackoverflow上面的一项数据统计表吧!

兴趣表

图片来源:I just asked 23,000 developers what they think of JavaScript. Here’s what I learned.

总结

我们盘点了一年以来前端的发展,有着不错新技术不断被推出着,相信前端会发展的越来越好。因为在JSConf大会上,有人发言说,之后将会发展成“前端 云端”的组合。那么,也并不存在全栈类开发的说法了。前端开发的小伙伴加油吧!!我们共勉

如果你对我写的有疑问,可以评论,如我写的有错误,欢迎指正。你喜欢我的博客,请给我关注Star~呦github博客


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366413.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jenkins pipeline api获取stage的详细信息_Jenkins + Docker 助力 Serverless 应用构建与部署...

本文来源: ServerlessLife 公众号近日,使用 Serverless 开发了一个应用。其中 CI/CD,是需要考虑的一个问题。这里用到了 Jenkins 和 Docker。并且 Jenkins Pipeline 运行在容器中。本文将介绍如何使用 Jenkins 和 Docker 构建并部署 Serverle…

项目本地部署

1.将数据库导出,并导入到本地 exp dgpdg/pass192.168.1.33/ORCL fileD:\gd_base.dmp logD:\gd_base.log(不要加fully,会把整个数据库下所有用户的表倒下来) imp dgpdg/pass127.0.0.1/orcl file"D:\gd_base.dmp" log&quo…

命名空间不能直接包含字段或方法之类的成员是什么意思_Python 学习笔记之类与实例...

Python 学习笔记之类与实例一、定义1.1、定义类 (class) 封装一组相关数据,使之成为一个整体,并使用一种方法持续展示和维护。这有点像把零件组装成整车提供给用户,无须了解汽车的内部结构和工作原理,只要知道方向盘,刹…

跨平台开发框架 Lynx 初探

跨平台开发是目前开发较热门的方向,React Native 在这方面取得了很大的成功,同时 Flutter 也获得了非常多的关注。React Native 采用 Web 框架开发并使用 Native UI 进行渲染,很大程度上降低了 Native 开发的门槛并且提高迭代的效率&#xff…

ajax包含mysql吗_php 实例ajax与mysql怎么只查询出一条数据?

http://www.runoob.com/php/php...使用这个实例操作之后为什么只显示一条数据,如何让符合条件的数据全部显示出来如,我使用的查询字段是yesterday_str,查询2017-04-18这个数据怎么样才能把2017-04-18包含这个的全部数据提取出来?p…

aspx写入mysql_Asp.net用户登陆数据库验证与注册写入数据库

1.思路与效果图Index.aspx注册注册成功登陆登陆验证通过进入内容页1登陆没通过验证思路:首先建一个Sqlserver数据库Student,再建一个student表(name,pwd)存放用户名和密码。然后注册功能的实现:通过数据库插入信息到表的Sql语句来实现,成功提…

页面体验提升小技巧—渐进式图片

前端性能方面有许多可优化的点,而这些优化带来的就是用户体验的提升。今天我们要聊的东西并不能给性能带来提升,但却能在一定程度上提升用户的体验。 参考博客 场景:在访问页面的时候如果图片较大或者网速慢的情况我们会看到图片加载起来是有…

微信小程序搭配小白接口,自己没有服务器也能开发哦

这里将重点介绍,在自己没有服务器的情况下,如何在微信小程序里直接调用小白接口。 前提 假设你已经开通微信小程序,如果还没有,可前往微信公众平台开通:https://mp.weixin.qq.com 假设你已经开通小白接口&#xff0c…

怎么将自己做好的网站发布到互联网上呢?

如何将自己的网站上传到网站空间。 1.需要有一个上传网站的软件,在这里推荐大家使用 FTP全称是flashfxp这个软件,这个功能功能齐全而且操作简单。大家可以先去下载一下这个软 件 2. 打开FTP,界面如下 3.我们要点击链接按钮,然后FT…

[贝聊科技]网页端「应用跳转」技术实现演变

本文作者:Mr.Luo ,贝聊前端经理。本文同时发布于作者 个人博客 。 由于网页传播的便捷性,从网页向APP导流几乎是所有APP厂商都会采用的推广手段,具体来说就是在网页上提供一些触发点(例如按钮、链接)&#…

Linux服务器配置---安装vsftpd

安装vsftpd 大多数Linux系统都使用vsftpd,因此这里我们也安装vsftpd 1、安装vsftpd [rootlocalhost phpMyAdmin]# yum install -y vsftpd Loaded plugins: fastestmirror, refresh-packagekit, security Installed: vsftpd.i686 0:2.2.2-11.el6_4.1 …

mysql怎么制作柱状图_从数据库中取出最近三十天的数据并生成柱状图

在终端用cd 命令进入文件目录说明:此处例子我是拿项目中的一个例子讲解的。1、新建一个项目 :用终端输入:zf create project Airline 格式:zf create action project project-name 备注:这些格式可以在终端输入zf 查看…

关于ES6的Promise

JavaScript的异步处理 提到JavaScript的异步处理,也许很多人和我一样想到利用回调函数。 例如: firstAsync(function(data){//处理得到的 data 数据//....secondAsync(function(data2){//处理得到的 data2 数据//....thirdAsync(function(data3){//处…

[转]我是如何走进黑客世界的?

*本文原创作者:MyselfExplorer;翻译编辑:楼兰,本文属FreeBuf原创奖励计划,未经许可禁止转载 我想给你一把打开这扇门的钥匙,而你要做的便是静静的聆听接下来的故事。挖掘 0day 一般需要掌握fuzzing&#xf…

Socket.io 深入理解

最近在做项目优化工作时,用到了Socket.io , Socket.io 文档比较少, 结合官网介绍以及自己在项目开发中的摸索,总结如下内容; Socket.io将Websocket和轮询 (Polling)机制以及其它的实时通信方式封装成了通用…

python填表_小Python填表得到d

我正在尝试使用Scrapy从网站自动下载数据。在我要做的是:使用我的凭据登录网站通过在“RIC”行中写入代码并选择感兴趣的时段来选择我想要的数据单击“获取数据”后,将生成.csv文件,我可以从“下载/”url下载该文件,其中我的所有文…

我理解中的“大前端”/“大无线”

本文内容较长,大概需要15分钟时间阅读。 内容包含五部分:前言,NodeJS职能变化,ReactNative的大规模应用,专门的架构组职能,总结。主要是介绍我所在团队最近的一些变化和思考。 更多信息可以加入我的小密圈关…

Dirichlet分布

1.预备知识 Beta分布函数是一种定义在实数区间[0,1]的特殊函数,它是二项式分布的共轭分布;与Beta分布相同,Dirichlet分布也是定义在实数区间[0,1]的概率度量函数,Dirichlet分布是多项式分布的共轭分布,Dirichlet分布的…

布局定位

布局与定位 摆放元素 1,使用流 流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始,从上到下沿着元素流逐个显示所遇到的各个元素。 每个块元素会按它在HTML标记中出现的顺序放置在页面上。每个新的块元素会带来一个换行。并…

python语言精通_Python语言基础从入门到精通

1、python关键字False await else import passNone break except in raiseTrue class finally is returnand continue for lambda tryas def from nonlocal whileassert del global not withasync elif if or yield2、命令行参数williamdeMBP-2:~ william$ python -c "imp…