概念
前端:针对浏览器的开发,代码在浏览器运行。
后端:针对服务器的开发,代码在服务器运行。
古代
浏览器
WorldWideWeb
WorldWideWeb 是世界上第一个浏览器,它同时也是一个编辑器,在 1991 年发布, 当时 http 的版本还是 0.9 ,只支持 get 请求。
NCSA Mosaic
NCSA Mosaic是一个早期普及的网页浏览器,发布于1993年,也是互联网协议如FTP、NNTP和Gopher的客户端。
其直观的接口、可靠性和简易安装,因此在当时大受欢迎,也是第一个可以在文字中嵌入图片,而不是在单独的窗口中显示图片的浏览器。
注意:当时“超文本标记语言(HTML)”互联网草案才刚发布。
HTML 2
- 1995年11月25日: 主要追加基于表单的文件上传功能(input type="file")
- 1996年5月:主要追加表格功能(table)
- 1996年8月:主要追加客户端图像映射功能(针对图片的map,area标签)
- 1997年1月:主要追加国际化功能(content-type,charset,lang等)
- ...
HTML 3
HTML 3.2是W3C的HTML规范,于96年初与包括IBM,Microsoft,Netscape Communications Corporation,Novell,SoftQuad,Spyglass和Sun Microsystems在内的供应商一起开发。HTML 3.2添加了广泛部署的功能,例如table,applets和text flow,同时提供了与现有标准HTML 2.0的完全向后兼容性。W3C继续与供应商合作,开发辅助功能,多媒体对象,脚本,样式表,布局,表单,数学和国际化的扩展。
开发模式
前端后端开发一体化,当时也并不存在复杂的交互过程。
界面上的所有信息都是由服务器发送给客户端来展示,开发者只需要使用非常少的HTML标签进行文字图片的排版即可。
现代
浏览器
IE 6
于2001年8月27日发行,主要功能包含DHTML的提升、CSS 1、DOM 1以及SMIL 2.0等的部分支持,MSXML的引擎也提升到了3.0版本。
IE 8
2009年3月19日首次发行,是最后一款支持Windows XP的版本的IE。主要在于引擎和技术方面进行了相关改进。
HTML 4
于1997年发布,除了早期版本的HTML的文本,多媒体和超链接功能外,HTML 4.0还支持更多的多媒体选项,脚本语言,样式表,更好的打印功能以及更便于残障用户使用的文档。HTML 4.0在使文档国际化方面也取得了长足的进步,其目标是使Web真正成为全球性的网站。
HTML 4.0.1
是4.0的修订版,于1999年底作为W3C推荐标准发布,同样规定了4.0中的相关标准。最终的勘误版于2001年5月12日发布。平时我们提到的HTML 4,严格来讲说的就是这个版本,它是目前使用最广泛的版本。
开发模式
得益于JavaScript脚本语言与Ajax技术的发展,以及浏览器对CSS的足够支持,越来越多的网页开始追求美观、大气、特效等。
脚本语言此时春风得意,JavaScript独领风骚,很多网页开发者开始被要求在页面中加入更多的内容,让用户注册登录等个性化内容已成为一个网站的标配。
我们熟悉的新浪博客、QQ空间等网站,对Flash,JavaScript,CSS,Ajax技术直接让用户可视化地修改网站皮肤、更换模块布局等,可谓是达到了炉火纯青的境界。
此时,网页开发者被分为:
- 设计:使用PS软件,将客户的界面描述或草图转化为丰富多彩的页面图片文件
- 美工:将设计提供的页面图片文件转换为HTML+CSS布局文件,也就是纯静态html文件,他们只需要懂得如何使用HTML和CSS即可,甚至都不需要考虑浏览器兼容的问题,因为那些是开发的事
- 开发:直接使用美工提供的纯静态html文件,改一下后缀名,如将html改为asp/php/jsp等,再到里面去写一些动态逻辑,jQuery在操作DOM上,功不可没
网页开发三剑客:
当代
浏览器
Chrome
Google Chrome是一款由Google公司开发的网页浏览器,该浏览器基于其他开源软件撰写,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。
HTML 5
2014年10月28日作为W3C推荐标准发布。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准。一般提到HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于一些插件的依赖,例如:Adobe Flash、Microsoft Silverlight与Oracle JavaFX,并且提供更多能有效加强网络应用的标准集。
HTML5添加了许多新的语法特征,其中包括<video>、<audio>和<canvas>元素,同时集成了SVG内容。新元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>、<cite>和<menu>被修改,重新定义或标准化了。
开发模式
新的技术,新的思想出现了一批又一批,技术更新迭代相当的快。如:
- Mustache:字符串模板引擎
- AngularJS:MVVM,MVC
- Backbone:MVC
- WebAssembly:新的编程语言
- React:视图框架
- Redux:状态管理框架
- Webpack:打包工具
- TypeScript:JavaScript超集
- ...
此时,一个互联网产品开始在前端界面上下狠功夫,开始提倡用户体验,开始从各个角度去关注用户在使用过程中遇到的种种不顺畅的问题。
与之而来的就是对JavaScript的使用场景也越来越多,因此,部分开发被企业开始分工,以达到更高效的产出。这个分出来的新工种,就称之为:前端工程师
这一阶段,网页开发者被细分为:
- 设计:与之前类似,没有太多变化
- 原型:与美工类似,在某些场景也会涉及到一些JavaScript的编写
- 前端:使用一系列的页面脚本交互技术,在原型的基础上,将需求实现
- 后端:只需要给前端提供一些URL地址作为接口入口,供前端读取数据或保存数据
前端项目从后端项目中独立出来,不需要依赖后端项目。可以作为一个独立的应用单独启动。
同时对前端的各个模块进行了拆分,按需引入与加载。
网页开发工具:
总结
目前的前端开发者,需要具备一系列的技术知识,前端的工作,从一个项目升级为一个工程,也逐渐变得很复杂。因此,对开发者的技术要求也越来越高,而我们能做的,就是要保持自己不断学习的心态,努力提升自己的技术能力,才能灵活运用学到的知识构建出高效与稳定的系统。