web前端的发展态势

以前

  作为一个java程序员写的代码主要还是后台的代码,虽然开始的时候前后端都写,但是也是用别人造好的轮子来用,学学html,css,js,jquery,再找一个前端ui框架学学,上手之后我们就可以写界面,写后台了,当然这只是企业的后台管理项目,界面要求不是特别高,对于网站项目还是需要前端童鞋来设计,布局,写好html给到我们,我们转成jsp,或者各种模板引擎文件。这种模式对前端童鞋要求不是特别高,会设计,切图,就差不多了,什么前端组件化,模块化,自动化这些概念都没有,可能是小公司没有接触到,大公司应该很早就开始实践了。那个时候常用的就是yahoo的yui,和jquery ui还有jquery一系列插件了等等。

  记得11年到12年的时候移动端的开发特别火,很多人都转型去做native的开发了,那个时候移动端的开发工资特别高,但是我没有选择做移动开发,而是选择安静的做个后台。

  那个时候很多创业公司选择做产品的时候首先会在移动端发力,先做一个android版本的或者做一个ios版本的,等到积攒一定的用户量之后在针对多个平台制定一个版本,因为很多产品可能没得到有机会做多个版本就已经死了,所以一个产品可能有ios,android,winphone,pc等版本,需要多个团队来开发一个产品。

  那个时候虽然也有公司用webapp(纯html5)和Hybrid来做移动端的开发,但是很多公司还是担心h5在性能和体验方面不如原生的好,毕竟移动端最重要的还是用户体验,是快,是流畅,那个时候解决方案也没有像现在这么多,所以很多公司还是选择采用原生的开发。现在

  随着h5在移动端的使用越来越多,前端超级火爆的情况下各种框架,各种解决方案层出不穷,一个还没学会,另一个就出来了,乱花渐入迷人眼,导致没有经验的前端人员都不知道应该学什么好了。 看到网上有童鞋总结了前端近几年的变化,出来的轮子有多少,大家自己感受一下。

  那些年,一度追捧,一度放弃

  下面,花一些篇幅简单回顾下 09 年到 15 年前端的发展历程。

  09 年,基础类库完善,寻求突破

  09 年之前,JavaScript 还处于对自身语言的完善过程中,而到了 09 年,JavaScript 类库已经颇为成熟,jQuery/Prototype/Script.aculo.us/Dojo 等都已经发布了好几个 stable 版本,各大类库也是相互吸收优点,不断完善并提高自身性能,然而功能上已经没有太多增加的势头。部分框架开始了思想上的转变,更加注重前端开发的组织和结构,条理性强了很多,如 YUI,Dojo 等。

  从 ECMAScript 规范的争执,开启了浏览器引擎大战,各大厂商也趁机瓜分 IE6 份额,Chrome 和 Firefox 在这场战役中取得小胜,V8 也敲响了前端的大门。为了迎合市场的激烈竞争,IE 开始了升级之旅,09 年初发布 IE8,全面兼容 CSS2.1。

  而此时,Node.js 和 3G Mobile 这两只巨兽开始浮出水面,Web 标准也开始向 HTML5、ECMAScript5.0 靠拢。

  10 年,Web2.0 深入人心,开始性能挑战

  毫无疑问,这一年,各大巨头都看清了 HTML5 是 web 发展的未来,在保留原来前端技术的状态下,都簇拥着拉扯 HTML5 的裙摆。富客户端应用也在这一年蓬勃生长,ExtJS/Dojo 摇身变为企业级框架,各类组件化概念和产品如约而至。

  延续着 09 年的变化,10 年的前端显得颇为沉寂,然而在标准的运用和推动上,各大厂商也是十分卖力。IE 9 出来了预览第三版,iPhone 的 Safari 已经能够支持众多 HTML5 内容:Canvas/Video/Audio/Geolocation/Storage/Application Cache/Web SQL Database 等。

  W3C 宣布成立 Web 性能工作组,Google 和 Mozilla 纷纷推出应用商店,浏览器调试工具也丰富了起来,人们开始更多地关注开发体验和性能问题。

  11 年,HTML5 抗大旗,Flash 堪忧

  2011 年 HTML5 的技术发展和推广都向前迈进了一大步,语义明确的标签体系、简洁明了的富媒体支持、本地数据的储存技术、canvas 等等各类技术被广泛应用。这一年,很多 web 开发者也面临一项技术的抉择,HTML5 or Flash?从 Flash Player 11.1 开始,Adobe 不再继续开发面向移动设备浏览器的 Flash 插件,积极投身于 HTML5,这意味着 Flash 技术的凋零。

  这一年,HTML5 游戏火爆到了一个高潮,他的低门槛和高收益让很多开发者眼红,正因如此,移动端开发工具和调试工具也日益成熟。jQuery 已经成为大小公司日常开发的标配,成千上万的 JQ 插件让网页开发变得尤为轻松,而随之而来的也是页面的臃肿和性能调优的深入探索。

  Node.js 已经悄然崛起,在 github 上的访问量已经超过了 Rails,国内的云应用开始尝试使用 Node.js,Node.js 相关工具也纷纷出来。

  12 年,响应式开发,工程化推进

  随着硬件技术的发展,各手机厂商又开始骚动起来,为了占有更多的市场,不断提高产品的性价比,体验也得到了不断的优化。借着先前两年 HTML5 刮起的东风,移动端上的 web 开发也颤抖了起来。移动端的开发挑战不亚于 PC 上对多个浏览器的支持,这一年,萌生了众多移动端框架,如 Sencha Touch/Zepto.js/JQ Mobile 等,相对 PC 端框架,它们更加轻便。

  而移动端的崛起,带来了许多终端开发难题:多终端适配,多分辨率适配,远程调试等等,而随着这些难题一个个被解决,移动端生长的势头变得更加强盛。此时 Twitter 也推出了 Bootstrap, 这个前端开发工具包不仅方便了前端,也方便了后端同学,它的出现让快速建站更加简单。

  编程思想的切换,迎来了 CoffeeScript 和 TypeScript,这两个预处理语言的出现又为 JavaScript 引来了不少其他方向转型过来的开发者。JavaScript 的兄弟 Node.js,也在命令行领域开拓了一片不小的疆域,甚至有动摇 Perl 和 Ruby 地位的趋势。

  在前端工程化上,几个派系相互争斗,产出了 AMD、CMD、KMD 等规范,也衍生了 SeaJS、RequireJS 等模块化工具。前端在这一年很有跳跃感。

  
13 年,爆发式增长,百花齐放

  规范和标准上有不少产出。Web Components 的出现给前端开发开辟了新思路;WebDriver 规范的出来推动了自动化测试的进程,ECMAScript 6 的规范草案落地,Webapp 工作小组在这一年也是相当活跃。

  Chrome 浏览器在这一年也有了很大的突破,开始支持 SPDY,使用 Blink 取代 webkit 作为 Chromium 的新渲染引擎,Chrome DevTools 的调试体验大幅度提升。这一年中,Chrome 连同其他浏览器厂商快速推动了各项草案规范的实现。

  语言能力上依旧在增强,并且从 JS 开始扩散到 CSS,出现了 LESS、SASS 和 Stylus 等预处理语言,Web 开发变得更加紧凑。

  而在无线端,应用不再局限于 Webapp,由于流畅度、性能等方面不能满足用户体验的需求,各大公司开始转向 Native 方向的研究,进而出现了 Hybrid 和 PhoneGap 的繁荣,它们为 JS 调用了提供更多的设备 API。

  Node.js 大放异彩,很多公司在生产环境中使用 Node.js,同时也出现了诸如 Express、Meteor 等小巧的快速搭建 Node.js Server 的应用框架。

  各浏览器的调试也是种类繁多、功能丰富,PhantomJS 在自动化测试上开始取代 Selenium,出现了众多的远程调试方案和工具。

  前端工程化开始普及,各公司开始推出自己的前端集成开发解决方案。

  14 年,移动端的崛起,HTML5 和 ES6 落地

  HTML5 正式定稿,这意味着,web page 正式演变为 web application。ES6 华丽丽走进前端,走的很稳重,它的 Module/Class 等特性已经完全让这们语言具备了开发大型应用的能力。

  大而厚的基础库难以满足灵活场景,Mobile 要求极致体验,MV* 库铺卷而来,如 avalon/angularockout 等。

  Web Components 跨终端组件快速发展,移动端开发迎来一次升华。Node.js 前后端分离的流行,中间层的出现改变了前后端的合作模式。

  2014 是颠覆式的一年,前端发展在这一年开始形成了一个短暂的稳定格局。

  15 年,观念的转变,步入前端工业化生产

  今年格外引人注目的框架是,类 React。Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native,它结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。敲一次代码,能够运行在多个平台上,其优势可见一斑。除了 React ,还有手机淘宝推出的 Weex 框架,它吸收了 vue.js 的编程精华,编程风格更加简约。

  在众多构建工具中,如今潇洒存活的并不多。体验完 grunt 和 browserify 后,gulp 顺势而至,尔后又出现了 webpack、jspm 等。而包管理工具,经历了 components、bower、spm 后,npm 开始主导整个市场。

  Node.js 的应用已经铺天盖地,各大公司前端都把 Node.js 作为分离前后端的主要手段,并且在测试、监控等方面沉淀了大量内容。不过,这个市场是很苛刻的,Node.js 的性能难以达到 C/C++ 的水平,那么接下来要做的就是要提升性能,至少得接近 C/C++。

  虽然出来的东西多,但是各种东西各有各的应用场景,还是可以根据需要选择相应的框架和解决方案,就像大家经常说的不为技术而技术,为了业务而技术(相信还是有很多童鞋感觉某个东西高大上,而没有太多考虑试用场景,当做自己学习和实践的用到生产环境环境中吧)。

  所以现在创业公司做产品首选的应该是Hybrid来做移动开发,一套代码可以跑在移动端浏览器,可以打包成android的app和ios的app(打包可以了解cordova(首选),appcan, APICloud等等),后期在根据发展开发其他的比如pc web版本。这样一来不仅节约时间成本,也节约了金钱成本,后期的维护也只需要维护一套代码,是不是感觉比之前的多套代码好很多。

  自从14年我一直很关注前端的变化与发展,所以我觉得我现在不能再错过h5的浪潮了,我觉得只有了解前后端才能有一个更加全面的视野来做产品,来把一个东西做好,做技术选型的时候也更加得心应手了。虽然我之前也会一些前端技术,但是跟现在大家常说的大前端比起来,感觉还是会得太少。

  我经常在项目强调前端优化的重要性,可能由于历史原因其他童鞋并不以为然,那个时候觉前后端都由自己来掌控多好。所以从现在开始有时间就要好好学习一下大前端了。毕竟有基础,上手应该也快。希望在技术的道路上,越走越远。

                                                      转载网友日志.....

时间: 2024-08-07 08:40:26

web前端的发展态势的相关文章

web前端的发展

web开发的三大阶段:(1)静态技术阶段    (2)动态技术阶段    (3)后web2.0阶段 HTML5的新特性: (1)语义化:拥有更加丰富的标签,对微数据.微结构等有着非常友好的支持,赋予网页更好的意义和结构 (2)本地存储:基于该技术开发的网页应用拥有更短的启动时间,更快的联网速度,甚至做到离线使用 (3)设备兼容:HTML5为开发者提供了非常丰富的API,让开发者能够在功能上有更好的体验和优化选择. (4)连接特性:Server-Sent Event和websocket技术,使得连

2017年最权威的1000集大型web前端视频教程(爱创课堂出品)文后附录视频下载链接

2017年最新爱创课堂前端开发课程介绍爱创课堂Web前端开发工程师培训-价值1万8课程 资料持续更新中,第一时间领取请加QQ2079576908 Web前端开发工程师,主要职责是利用HTML.XHTML.CSS.JAVAScript.FLASH等各种Web前端技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web前端开发,致力于通过技术改善用户体验. 第一阶段:页面制作基础 从这一基础

web前端工程师如何修炼,就业好吗

随着web前端的发展,衍生出了web前端开发工程师这样一个职位,虽然开始受到重视的时间不足10载,可是web前端开发工程师还是很吃香,出现了供不应求的现象. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 现在市场很需要优秀的.高级的前端工程师. 一方面是因为这是一个比较新的细分行业,而且前端程序员大都自学一部分,知识结构不系统:另一方面,大学里面没有这种课程,可是在麦子学院里,有专门系统的web前端开发教程(http://www.maiziedu.com/cour

关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)

网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如果我们想让网站在浏览器上运行的更快,在更快的

2016年最权威的1000集大型web前端视频教程(爱创课堂出品)

标题:2016年最权威的1000集大型web前端视频教程(爱创课堂出品): 爱创课堂Web前端开发工程师培训-价值1万8课程Web前端开发工程师,主要职责是利用HTML.XHTML.CSS.JAVAScript.FLASH等各种Web前端技术进行客户端产品的开发.完成客户端程序( 也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web前端开发,致力于 通过技术改善用户体验. 需要联系下载视频请加QQ:2079576908 第一

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.

细数Web前端开发工程师 应掌握的技能

Web前端开发工程师,主要职责是利用HTML.XHTML.CSS.JAVAScript.FLASH等各种Web前端技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web前端开发,致力于通过技术改善用户体验. 第一阶段:页面制作基础 从这一基础阶段开始,正式学习Web前端开发需要的编程语言HTML,CSS和JavaScript.HTML和CSS用于Web静态内容的展示,JavaScrip

如何自学成为一个WEB前端

WEB前端是做什么的? 那些什么高大上的介绍作者就略过了,简单来说就是做网页的,我们上网浏览的网站界面就是WEB前端工程师做的. 在互联网迅速发展的近几年,你上网冲浪的时候是不是感觉WEB网站越来越漂亮酷炫,功能越来越多,越来越复杂?各种类似桌面软件的Web应用大量出现,没错,WEB前端在其中有着很大的功劳. 发展方向 WEB前端的发展迅速导致其细分出了很多细分职业,我先来说一下我了解的WEB前端的分支,欢迎各位前辈补充: 1.网页设计方向(移动和PC):主要偏向html.css.js主要是做一

怎样系统的学习WEB前端,系统教程分享

随着web前端的发展,衍生出了web前端开发工程师这样一个职位,虽然开始受到重视的时间不足10载,可是web前端开发工程师还是很吃香,出现了供不应求的现象. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 现在市场很需要优秀的.高级的前端工程师. 一方面是因为这是一个比较新的细分行业,而且前端程序员大都自学一部分,知识结构不系统:另一方面,大学里面没有这种课程,可是在麦子学院里,有专门系统的web前端开发教程(http://www.maiziedu.com/cour