前端的发展史
从静态走向动态
1994年可以看做是前端历史的起点,这一年10月13日网景推出了第一版Navigator,这一年,Tim Berners-Lee创建了W3C,这一年Tim的基友发布了CSS。还是这一年,为动态web网页设计的服务端脚本PHP以及笔者本人诞生。
万维网(WWW)是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的,这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字和图片构成的HTML页面,这样的功能已经完全满足学术交流的需要,所以网页的早期形态和Document一样,完全基于HTML页面,并且所有内容都是静态的。
随着网页从学术机构走向公众社会,网页承载的功能便超出了学术范围而变得愈加丰富,因此早期网页的局限性也逐渐显露出来。
- 所有的页面都是基于HTML,没有任何手段控制局部内容的显示和隐藏
- 处理程序都在服务端实现,这就意味着你的所有操作都是同步阻塞的,而且需要等待,甚至会出现提交表单之后,整个页面消失,浏览器空白,经过漫长的等待之后,浏览器才渲染出一个一模一样的页面,只是输入框旁边多了一些错误提示,显然这是让人崩溃的
- 因为所有页面都是静态的,所以有一千种不一样的内容,哪怕布局一样,也需要一千个单独的页面
1994年一个叫Rasmus Lerdorf的加拿大人为了维护个人网站而创建了PHP(Personal Home Page)。
PHP实现了与数据库的交互以及用于生产动态页面的模板引擎,是Web领域中最主流的服务端语言。
1995年网景推出了JavaScript,实现了客户端的计算任务(如表单验证)。
1996年微软推出了iframe标签,实现了异步的局部加载。
1999年W3C发布第四代HTML标准,同年微软推出用于异步数据传输的ActiveX,随即个大浏览器厂商模仿实现了XMLHttpRequest。Ajax这个词则在六年后诞生,之后Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术,它标识着Web2.0时代的到来。
2006年,XMLHttpRequest被W3C正式纳入标准。
至此,早期的Document终于进化为了Web page,上述三个局限都得到了妥善的解决。
从后端走向前端
早期的网页开发是由后端主导的,前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery,jQuery主要用于操作DOM,其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手,因此很快风靡全球,大量基于jQuery的插件构成了一个庞大的生态系统,更加稳固了jQuery作为JS库一哥的地位。
结合Ajax,业务逻辑慢慢地从后端移向前端。
起初制约Web开发从后到前的因素很简单,就是前端很多事干不了或干不好,当时的浏览器性能弱,标准化程度低。特别是占据大量市场份额的IE,不仅ugly,并且buggy。
然而即使是利用jQuery这样强大的插件,对DOM频繁的操作,大量的脚本加载使得页面变得越来越臃肿,代码变得越来越难以维护。
这个阶段的早期都是各家公司自己造轮子的时代,可以说当时打造一个富应用是非常痛苦的。直到后来出现了一批优秀的类库,比如jQuery、Prototype,以及好的一些开发理念,比如jQuery UI的组件化、YUI的模块化、EXT JS的MVC框架,借助这些优秀类库及开发理念,大大减轻了我们打造富应用的痛苦。
而2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代,前端的计算能力一下子变得过剩了。标准组织也非常配合的在2009年发布了第五代JavaScript,前端的技术发展得到了整体性的提高,前端界如同改革开放走进了一个令人目不暇接的新时代。
2009年AngularJS诞生,随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生……前后端分离可谓大势所趋。
后端只负责数据,前端负责其余工作,这种分工模式一定是更清晰也更高效的。随着基础设置的不断完善以及代码封装层级的不断提高,使得前端一个人能够完成的事越来越多,这是技术积累的必然结果。
2014年,第五代HTML标准发布。H5是由浏览器厂商主导,与W3C合作制定的一整套Web应用规范,至今仍在不断补充新的草案。我们可以清晰的感受到这一系列规范背后隐含的领导者的勃勃雄心:占领所有屏幕。
从前端走向全端
2009年Ryan Dahl发布了node,node是一个基于V8引擎的服务端JavaScript运行环境,类似于一个虚拟机,也就是说js在服务端语言中有了一席之地。如果说ajax是前端的第一次飞跃,那么node可算作前端的第二次飞跃。它意味着JavaScript走出了浏览器的藩篱,迈出了全端化的第一步。
一种流行的组合就是利用Express和Mongo搭建服务端程序。
这意味着前端工程师甚至可以只凭借JS就完成从前端到后端的完整开发,从而晋升为全栈工程师。