大前端时代是Web统一的时代,利用HTML5不但可以开发传统的网站,实现炫酷的网页动态效果,还可以采用BS架构开发应用程序、手机端Web应用、移动端Native应用程序、智能设备(例如可穿戴智能手表、可穿戴智能衣服)等。
大前端时代的最大特点是一次开发便可同时适用于所有平台。再也不用为一个App而需为安卓和iOS两大平台分别开发而忧心了,大前端已经支持非常多的开发语言,例如Java、PHP等,连使用JavaScript制作后台都显得那么简单。
大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写Java的Velocity模板而得来,不过现在大前端的范围已经越来越广泛了。谈到大前端,常常提及组件化、路由与解耦、工程化(打包工具、脚手架、包管理工具)、MVC和MVVM架构,以及埋点和性能监控,这些知识会在这本书中一一给大家解释。
大前端不仅会成为移动开发与Web前端开发的发展趋势,也会成为未来的显示设备终端的开发技术趋势。大前端将做更多的终端开发、工程化等工作,而不仅仅只是开发Web页面。做前端开发或网页设计的人员如今肯定已经被Vue.js这个框架彻底“包围”了,因为它太火爆了。
网页设计发展历史
1991年8月,Tim Berners Lee发布了第一个简单的基于文本并包含几个链接的网站。1994年,万维网联盟(W3C)成立,此联盟将HTML5确立为网页的标准标记语言。这一举动阻断了任何独立公司想要开发拥有专利的浏览器和相应的程序语言的野心,因为这会对网络的完整性产生不利的影响。W3C一直致力于确立与维护网页编程语言的标准(例如JavaScJavaScript)。直到1995年,使用Web的活跃用户还不足5000万,当时基本采用超文本标记语言(HTML)控制Web页面。HTML的应用范围非常有限,因为它主要用于设计以文本为主的Web页面。垂直滚动和标志性的蓝色下画线页面链接也是在那个时代发展起来的一项功能。
基于表格的设计
表格布局使网页设计师制作网站时有了更多选择。在HTML中表格标签的本意是为了显示表格化的数据,但是设计师很快意识到可以利用表格构造他们设计的网页,这样就可以制作较以往作品更加复杂的多栏目网页。表格布局便流行起来,它融合了背景图片切片技术,常给人以看起来较实际布局简洁得多的结构。
Flash设计年代
20世纪90年代末网页的特点是将Flash整合到网页中。Flash是革命性的,因为它预示着网站多媒体应用的新纪元。音乐、视频和动画也被有效地整合到网站中,从而增强了网站的美观和功能。不同的颜色、交互工具和装饰都因为Flash而成为可能。这个时代也因此发展出明亮而往往令人分心的形象。
CSS的开发和使用
层叠样式表CSS语言的创建是为了给HTML网站一些样式。虽然Flash将多媒体功能整合到网站方面取得了里程碑式的进展,但在网站中仍然存在一个未定义的松散结构。CSS旨在解决这个问题,它通过定义字体、颜色和各种其他元素的使用实现这一点。因此,CSS是一个专门用于改进网站表示方面的程序。由于CSS带来的改进,设计师现在开始开发模板,这标志着Web风格多样性的开始。
响应设计
在CSS和HTML占据主导地位多年之后,需要以动态方式使用这两种语言的时代到来了。2010年迎来了第一个专为手机设计的网页的发展。随着智能手机和平板计算机的普及,网页不再仅仅是为个人计算机市场而设计的。因此,必须采用新的设计技术。响应式Web设计是在此期间创建的,其目的是创建使用各种设备都可以轻松使用的站点。响应式设计最终导致了平面设计。平面网站的特点是极简和有效。
在Web 1.0时代,由于网页是在服务端使用动态脚本语言和模板引擎渲染出来的,所以不分前后端,JSP是一个典型写法,JSP和Java代码结合起来,刚开始确实提高了开发效率,但时间长了,大家发现JSP存在很多问题,大部分后端程序员不懂前端,所以开发流程一般是这样的:UI设计人员制作高精度图片,交给静态界面开发人员;静态界面开发人员按照图片使用HTML、CSS进行制作,使其生成的网页与图片保持一致;开发人员需要把HTML界面中的静态代码改成动态页面从而和后台进行数据对接。这个过程如果只执行一次还没有问题,但是在实际项目中UI经常会进行调整,静态界面开发人员也会由于制作的静态界面不符合要求进行调整,而每一次调整最后都会涉及其他开发人员,造成开发人员精力的大量浪费
统的Web开发好比是瀑布模型,它的下一步实现完全建立在上一步的基础之上,如果上一步没有完成,下一步就没办法开展,当用户向服务器发送请求时,服务器端必须完全处理好客户端的请求,并且客户端完全接收到服务器端的响应后,才能继续进行操作。如果需要刷新,等待那么久必须刷新整个页面,当整个页面都加载出来时,才可以进行显示。
(1)现时代公司的业务总会越变越复杂,这点是不可避免的,需求也是没有止境的。业务复杂度的变化会让整个系统复杂化和多元化。同时,开发团队扩张也导致参与人员很可能从几人快速扩展到几十人,提供的服务越来越多,调用关系变得复杂,前端搭建本地环境不再是一件简单的事情。不同的人提供的页面和其他人提供的页面可能会有细节上的差异,即使考虑团队协作,往往最后呈现的页面和想象中的页面也会有一些差距。
(2)前端的样式更新操作变得复杂且会造成系统的不稳定。因为所有的页面都是基于后端而自动生成的,所以对于一些前端样式的更新和更改可能需要将整个代码逻辑重构,甚至重新上线一个崭新的系统。
(3)随着一个项目体量的增大,其代码的维护也一定会越来越难。单一代码负责前台和后端的数据处理,会导致职责不清晰,而且由于开发人员的水平和书写习惯不同,以及各种紧急需求,糅合大量业务代码和其他历史代码,甚至意义不明的无用代码,往往会带来大量的维护成本。
(4)特别是互联网兴起后,一套系统对应多个前端,一般除了PC端,还有移动的、小程序等,此时前后端不分的方式不是最优的选择,而且对于现阶段的大型应用或追求用户体验的应用而言,前后端的分离是必要的。
前后端分离的火热,得益于Ajax的发展,前端不再依赖后台环境生存,所有服务器数据都可以通过异步交互获取。在后台取得一个良好定义的RESTful(Representational State Transfer,表述性状态转移)接口后,两端甚至可以在零沟通成本的情况下并行完成项目任务。
Ajax的发展加上CDN开始大量用于静态资源存储,造就了JavaScript的火热及之后的SPA(Single Page Application单页面应用)时代。