前端的发展进程本质上是互联网发展进程的具体表现,从最初的局域网到现在的全球互联,每次的技术变革和演化都是所见即所得。前端是从web应用开发分离出来的用户层,也就是用户接口,直接与每一个用户进行交互,通信技术的发展促进了很多前端技术的变革。作为一名准备或者已经从事前端开发的编程人员,知其然更要知其所以然,招式固然重要,内功心法才能让功力大增。
互联网的初期,围绕着如何能构建更好的页面展开
互联网伊始以HTML-超文本标记语言
为基础的网页开发开始引起了每个普通人的注意,当网景公司开创了最早的图文浏览器时,全世界的目光都聚焦在这个窗口上。通过网络IP地址访问各种各样的网页是最初人们网上冲浪的兴趣所在。
但是人性的懒惰是根深蒂固的,IP地址的逆人性特质很快就遭到了嫌弃。于是便于记忆的域名技术应运而生,其本质上解决的是便于记忆,方便使用。域名需要绑定对应的IP地址才能实现访问,所以需要有一个域名解析服务器(DNS)去做这件简单的令人发指的事情。
看似风平浪静的繁华,实际上只是暗流涌动的假象。互联网的属性本就是人人参与,也就意味着每个开发者的习惯都是大相径庭的,这也是为什么HTML这个语言有那么多废弃的标签的原因——人们只想单纯的实现自己的效果,标签上的style
属性已经不能满足于人们疯狂的诉求。于是
等一系列标签解决了燃眉之急。这样发展下去根本不利于后期的维护和扩展,于是人们发明了CSS-层叠样式表来解决这个问题。通过编写和维护一份样式代码多个页面实现统一的效果。
后来人们有了搜索或者登录的需求场景,有了最早的用户交互行为,当时的网速很差(以kb为单位),用户输入信息提交后,需要等很长时间才能从服务器返回结果,结果返回了一个错误,这样的交互体验是极差的。网景公司首先想到了这一点,让布兰登开发一种在浏览器运行的脚本语言,通过发送信息前校验用户的输入,优化交互体验,这个仅用了10天就创造出来的语言就是LiveScript
,由于当时背景下SUN公司的Java语言很火爆,于是网景公司顺势将该语言更名javascript
——请注意javascript
与Java
一点关系都没有,但是两个语言都有互相借鉴的部分。
至此,前端三大技术基本成型。javascript
提供的DOM和BOM对象,实现了操作页面文档和浏览器的api接口,微软发布IE也实现了操作DOM和BOM的功能-JScript
,越来越多的浏览器开始出现,导致了开发人员要编写兼容性的代码,这让项目开始变得难以维护。互联网的创始人蒂姆伯纳斯李组建了W3C组织来制定互联网技术的相关技术标准,第一次浏览器大战落下帷幕。
互联网的发展期,围绕着如何能构建更好的交互体验展开
为前端带来转折的是一种异步通讯的技术-Ajax-Async JavaScript and XML
。Ajax通过异步请求的方式,可以在不刷新整个页面的情况下更新页面的数据,第二次浏览器大战就此展开。网景此时已经将精力关注在1:1对ECMA标准实现的FireFox上,IE发布了4-6,Safari和Chrome也加入进来,还有Opera,这就是5大主流浏览器和5大浏览器内核的由来。
Ajax为前端开发带来了全新的交互方式和更友好的用户体验,在这个进程中各种javascript库百花齐放。protoType
,DOJO
,雅虎的YUI
,Ext JS
,Mootools
,还有jQuery
。但是jQuery凭借着先天的优势——轻量的体积,完善的兼容性,强大的选择器,链式操作,事件处理机制和完善的Ajax,以Write less, do more
为设计核心迅速的成为了javascript库的佼佼者。
浏览器的同源策略是为了提升其安全性的一种机制,但是多服务器部署方式,让开发者甚是头痛。为了解决使用其他服务器文件资源,一种新的技术产生了——JSONP,通过使用具备跨域能力的Script标签,引用其他服务器资源,并通过callback回调的方式实现数据的交互。
跨域本来是一种很友好的方式,但是其安全性也一再接收考验,XSS跨站脚本攻击一时间狼烟四起。为了应对这个安全问题——跨站资源共享方案出现了,通过在服务器端设置可接收的访问方式,设置请求头类型来防范XSS等网络攻击。当然还有不再经常用到的iframe,也有类似的遭遇。
当解决了API兼容性的问题后,前端进入了快速的发展时期,2007年随着移动设备的出现——移动互联网的时代开启了。对移动设备来说流量是他们关注的核心,移动端项目的第一任务是解决应用体积的问题,以及页面的性能。Zepto库的出现恰恰是移动端的一个型号,移动端轻量级的标准开始普及开来。随着移动终端的屏幕尺寸越来越多,另一个问题出现了——如何能开发一套代码适配多个移动终端设备?——响应式布局方案出现了。通过编写一套代码适配多种移动终端设备,便于维护减少成本。
这个时期,以bootstrap为代表的UI框架出现了,也代表着前端进入了繁荣时期。通过使用媒体查询API可以动态的设置页面的展示效果,从而在不同移动终端呈现完美的布局和交互。
互联网的成熟期,当技术愈发成熟,更快更友好的构建应用变得可能
当前端应用的体积迅速增大后,通过压缩和合并方式,减少项目体积的工具大量涌现。UglifyJS
,gulp
,grount
都是具有代表性的相关工具。而页面的数量缺并没有减少,人们通过抽取公共代码的形式,将项目拆分成不同的页面结构——组件的模糊概念呼之欲出。通过组合不同的页面结构,可以减少很多的维护成本,还有开发量。目前市面上还是能看到很多通过这种方式实现的项目。现在,webpack将所有的工程开发的工作集成一体,配置简单易学,但却功能强大。
最先到来的是模块化,requirejs
,seajs
是这一时期颇有代表性的两个库,通过将不同的功能代码拆分,在不同的页面中将模块注入,来实现业务层和视图层解耦。包括后期的commonjs
都是在解耦的路上越走越远。AMD规范和CMD规范是针对模块化开发的两种实现方式,它们都是为了实现解耦而出现。紧接着对前端来说具有里程碑意义的angular
出现了,同时代表着前端进入了框架时代。这类似于Java之于Spring Boot框架,通过将通用的模块进行封装成库,减少了很多入坑的难题。让开发人员不用再为了项目环境抓紧掣肘。
对于前端来说,这一切都要归功于 nodejs
的诞生,将前端开发集成化和工程化开发推向了顶峰。angularjs通过将前端抽象成数据层,控制器层,视图层开启了一个单页面应用的时代。这一方式充分的实践了MVC开发思想。angularjs通过使用指令的方式实现DOM操作,事件绑定,路由控制,并且通过原生JS编写相应的业务逻辑——当然其中还有单向数据流的开发思想实现。也正是因为angularjs,使得后来的很多框架借鉴了其优势,让前端的开发方式变得越发轻松。
当facebook面对同样的项目开发问题的时候,发现当时的所有开发方式都不符合自己的预期。于是,facebook开发了一套开源的前端框架——react,通过JS的新特性,和良好的性能体验,迅速获得了开发者的拥护。react在性能上的创新来自于虚拟DOM,通过虚拟DOM与真实DOM的比较修改对应的节点,以此来提高性能。而后来的Flux
和redux
都是借鉴angularjs的单向数据流思想的一种实现。通过使用状态管理模块,实现数据的可预测,以及数据状态的集中管理和分发。
当国内还处于基础的前端开发阶段时,一个适合国内开发者的前端框架诞生了——vuejs。其同时借鉴了angular和react,将这两个框架的核心思想一指令,虚拟DOM一继承和发扬光大。vuejs通过完美的封装,解决了开发者的学习难度和成本。更加轻量的文件体积,更加优秀的性能,以及直观的开发方式,迅速在开发者中引爆开来。通过编写更少的代码,实现更多更丰富的交互。
至此, 前端框架三足鼎立,但同时又另一个问题浮出水面。如此多的项目技术栈,如何才能更快的搭建开发环境?——这就是脚手架工具的由来,通过简单的几行指令快速的搭建一个项目,迅速上手任何框架没有任何压力。而大部分的脚手架工具都选择webpack最为基础配置,足以说明其的简洁配置和性能优越。
自从乔帮主推出iphone,以及谷歌扶持安卓以来,iOS和安卓阵营就APP之争就没有停止过。iOS一直以流畅性和优秀的交互著称,而安卓以开源的方式提供给各大厂商“深度定制”。但在APP开发上都是需要为用户提供流畅的用户体验的。也因此原生APP开发独领风骚多年,原生app开发的需求也日渐疯狂。而开发原生APP后期在时间和成本上已经越发笨重,混合APP的趋势开始显露,web APP由于性能和体验问题并没有什么优势可言。
最早以react-native为开端,混合APP开始出现,从流畅性和交互上几乎可以与原生APP相媲美。这也是国内后来很多初创型公司的APP首选开发方式,并且通过热更新的方式,实现了快速迭代需求和优化功能。虽然不能完全取代原生APP,但是多种实现方式,本身就是互联网技术开放的本质。Lonic也是一个混合APP的前端开发框架,多年来一直保持着可观的热度。
当然还有桌面应用开发,仍然要感谢nodejs让javascript这门浏览器上的脚本语言,跨越了浏览器这个宿主环境,走向越来越广阔的平台。桌面应用开发以NWjs 和 Electron为代表,通多javascript这门语言前端开发者可以编写桌面级的应用,并且与系统应用别无二致。
以上就是前端从上世纪90年代发展至今的相关简史,如有不足欢迎指正。通过梳理相关的技术时间线,使自己更加清晰的了解这些年的技术方向,以及相关基础知识的不足。以此激励自己在以后的道路上继续保持旺盛的好奇心,学习更新更新的技术知识。