Skip to main content

前端发展概况介绍

· 18 min read
Chengzihan

前言

什么是前端

Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

Web前端:

1)掌握HTML,能够书写语义合理,结构清晰,易维护的HTML结构。

2)掌握CSS,能够还原设计人员的视觉设计,并兼容业界承认的主流浏览器。

3)熟悉JavaScript,了解ECMAScript基础内容,掌握1~2种js框架,如Vue、React

4)对常见的浏览器兼容问题有清晰的理解,并有可靠的解决方案。

5)对性能有一定的要求,了解yahoo的性能优化建议,并可以在项目中有效实施。

6)......

Web后端

1)精通jsp,servlet,java bean,JMS,EJB,Jdbc,Flex开发,或者对相关的工具、类库以及框架非常熟悉,如Velocity,Spring,Hibernate,iBatis,OSGI等,对Web开发的模式有较深的理解

2)练使用oracle、sqlserver、mysql等常用的数据库系统,对数据库有较强的设计能力

3)熟悉maven项目配置管理工具,熟悉tomcat、jboss等应用服务器,同时对在高并发处理情况下的负载调优有相关经验者优先考虑

4)精通面向对象分析和设计技术,包括设计模式、UML建模等

5)熟悉网络编程,具有设计和开发对外API接口经验和能力,同时具备跨平台的API规范设计以及API高效调用设计能力

6)......

前端发展概况

随着web2.0时代的到来,前端在web开发中所占的比重越来越大,专注于内容呈现和网站交互的前端开发人员也逐渐展现出其不可替代性。前端所涉及的领域甚至不限于一个浏览器(web)应用,如HTML5技术允许我们开发原生的移动应用;React Native、Flutter等跨平台框架可以用于开发跨平台的移动应用;还有近些年相当流行的微信、支付宝小程序等。此外,随着微软的新项目React Native for Windows的发布,使用前端技术开发Windows桌面应用也成为了可能。
1
可以说,大前端时代即将到来。什么是大前端时代?众所周知,前端是专注客户端逻辑的,客户端可以分为web前端、Windows(操作系统)桌面端、安卓前端、ios前端、小程序前端等,但是就目前而言,这些前端领域的技术栈仍不相通,Web前端主要使用的是H5技术栈,衍生了React、Angular、Vue三大框架,Windows端采用C#或者C++及其QT库来编写页面和逻辑,安卓使用Kotlin做逻辑描述,ios使用UIkit等语言绘制界面,总之就是十分不统一,但是作为相通的客户端,都是编写页面和逻辑,为什么不能一端开发,多端使用呢?因此,大前端时代到来了。

什么是大前端

简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于只需一次开发,就能适用于所有平台。开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端不仅会成为移动开发与Web前端的发展趋势,也将会是所有智能设备显示终端的开发技术趋势。


例如,React推出了React Native,是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。它的作用就是使用React技术栈(也就是js技术栈)进行开发后,可以同时运行在安卓和ios端。Learn once, write anywhere的理念也得到了记得的赞扬和发展。Flutter也在其后诞生,它也可以通过一个技术栈构建多端的代码。2018年,华为、小米、OPPO等厂商推出了快应用,运行在系统层面上的小程序。最近,React Native for Windows被微软发布,使用web技术栈构建Windows程序也成为可能了。

未来很有可能,前端技术栈都向Web技术栈靠拢,前端工程师只需要精修一种技术栈,可以将代码运行在各种操作系统的各个屏幕上,又或者,在微信云开发之类的云后端出现下,未来可能构建C/S架构只需要前端工程师和云后端工程师,这也许就是技术发展的意义。

下面,我们将回顾前端的发展进程

Web1.0- 静态内容呈现

随着1994年美国的Netscape公司推出第一款浏览器NCSAMosaic(后改名Navigator),web1.0时代正式到来(web的概念可追溯到更早)。安装了该浏览器的用户,可以浏览来自于其他网站的信息(主要是文字)。参考远古功能机浏览器界面,只有链接、文字、少量有图片。
这个时代前端的代表技术主要是HTML4,CSS2,JavaScript4(ES4)。三者的关系可以描述为:HTML告诉浏览器网页上有什么,CSS告诉浏览器他们长什么样,JavaScript描述他们有什么行为。直至今日,这三者仍是前端开发的三大核心(以JavaScript为重中之重)。这时候的前端专注于静态内容的呈现,但由于技术的限制,前端的呈现能力显得非常不足(页面长得丑,死板)。

Web2.0- 交互时代

简单来说,web2.0更强调网页的交互性,它不再将用户局限在对网页的浏览上,而是根据用户的操作,来展现不同的网页内容。用户可以在不刷新页面的情况下,通过简单的点击、按键输入等获取不同的内容。

在web2.0时代,网页具备了展示更多媒体应用的能力,如播放音频,视频,查看PDF文档等。同时技术的标准化使前端开发人员逐渐从浏览器之争的创伤之中走出来,也大大推动了互联网技术的进步。

web2.0时代最具代表性的前端技术莫过于HTML5 + CSS3和ES5 / ES6了,其中HTML5为网页提供了诸多能力,包括播放音视频,canvas,svg,多线程,本地存储,离线应用,websocket,web worker等等;CSS3则大大增强了网页的渲染能力,包括阴影,渐变,新的布局模型,2D/3D变形和动画等等。

除了在web中的应用,前端开发还触及到了其他相当多的领域,包括原生移动应用(主要借助HTML5相关技术),跨平台移动开发(React Native和Flutter),微信小程序,以及后续的Windows桌面应用开发等,此外,在一些新兴领域,如智能设备,智能医疗,计算机视觉,大数据等,前端技术都占有一席之地。因为前端最重要的工作,就是负责内容的呈现和与用户的交互。

这时候的前端把更多注意力放在了用户交互上,并大大增强了内容呈现的能力,致力于带给用户更好的浏览体验。

为什么产生了前端框架

随着前端需要处理的数据越来越多,网站的页面越来越多,需要写的样式越来越多,为了简化开发流程,才出现了诸多的组件库和框架,框架如Vue、React等,组件库包括Element、Bootstrap等。框架的掌握是每个前端开发成员的必备技能。

Web3.0

实际上web3.0时代并未真正到来,它只是业内一种概念性的描述,并且本质上不是技术的革新,而是web理念的一种革新。我们先来看一下web2.0时代遇到的一些问题。

随着web2.0时代的蓬勃发展,大量的网站涌现出来,web中的数据量呈指数级增长。对于普通浏览器用户来说,web技术不止带来了大量的免费信息,也带来了筛选信息的烦恼。如今的互联网上充斥着大量的数据,如何找到准确、可靠、最新的信息,即使对专业的计算机开发人员来说,也是个不小的问题。此外,各个网站之间相对独立,信息只有通过同时浏览过这些网站的人才能发生交互。我们知道,数据的整合会创造更大的价值,而目前这种整合几乎完全依赖于每个web参与者,这显然无法完全发挥这些数据的价值。

web3.0则会通过第三方平台来整合数据,为用户筛选和提炼更有价值的信息,这可能需要借助其他领域的技术来实现,如人工智能、大数据等等。另外web3.0的实践者希望所有的应用都完全基于web,即使用web技术实现需要复杂的系统应用才能实现的功能,例如微软的基于web的在线office应用等。

web3.0背景下,前端需要具备呈现更加复杂的数据的能力,并提供不亚于复杂的系统应用的交互能力和业务逻辑处理能力。

web3总结

实际上,web3技术希望所有的应用通过web完成,在这种条件下,客户端算力更依赖于网络了,而不是本地的

当前的前端生态

nodejs的兴起

由于JavaScript单线程的语言特性以及不具备如java般严谨的面向对象特征,它一度被认为只能用于前端开发,不能适应后端复杂业务逻辑的开发,这主要基于三点:

  • 单线程特性,无法充分利用多核CPU强大的计算能力,不利于开发分布式应用。
  • 不够安全,一旦主线程出错,整个执行过程就会崩溃
  • 没有严谨的面向对象特性,封装程度不够,无法处理复杂的业务逻辑
  • 但同时作为面向前端浏览器环境所设计的一门语言,JavaScript也具有一些其他大部分语言没有的特性,最典型的包括其事件循环机制,同时单线程的特点也可以说是有利有弊。

利用JavaScript的这些语言特点,Ryan Dahl于2009年发布了JavaScript的服务器端运行环境nodejs。它基于谷歌浏览器广受好评的JavaScript引擎–V8引擎,是一个事件驱动的非阻塞I/O模型。它将所有的客户端请求都交给事件循环机制来处理,从而将I/O代价降到极低。由于单线程的语言机制,它不需要处理复杂的线程同步问题,更不会发生死锁等线程问题。随着ES6规范中web worker的出现,nodejs也具备了利用多核CPU的能力(当然仍然无法与java相提并论)。

总的来说,JavaScript和nodejs的发展仍有不足,使用nodejs开发完整后端应用的网站仍然微乎其微,但是有相当多的网站使用nodejs来开发中间件,利用其优秀的I/O性能,处理大量的I/O请求。

nodejs的发展仍然值得期待。

组件化开发和MVVM的兴起

英雄终有落幕,尽管jQuery红极一时,但是终究无法应对越来越复杂的前端开发工作。一方面,jQuery大量的优秀特性已经被吸纳为JavaScript标准。另一方面,占有其60%代码量的DOM操作已经被公认为网页的性能杀手,因为DOM操作需要反复地操作文档,并触发网页的重绘和重排,这会严重影响网页的性能,最严重的可能导致页面卡死。此外,使用jQuery开发的网站,会因为大量的DOM操作,需要书写大量的代码,从而变得难以维护。

我们需要有一种更优雅的方式来操作页面,以获得更优秀的用户体验。

为了解决这些问题,前端兴起了组件化开发和MVVM开发模型。

目前对国内影响比较大的当属React和Vue了。2013年,Facebook的前端团队设计了一个崭新的前端框架,它将网页的各个部分拆分成一个个的组件,使用虚拟DOM将页面上的节点存储在内存中,将视图和数据进行绑定。视图的显示完全由数据和模板来驱动,这样当数据发生变化时,开发者不需要考虑如何去进行DOM操作,框架会自动以高效的方式去更新虚拟DOM,然后更新网页内容。开发者只需要专注于数据的操作即可。这样就实现了视图与业务逻辑的分离。

作为国内的一款优秀的前端框架,Vue在前端开发中的地位毋庸置疑。Vue的设计更加符合人们的思维方式,所以上手更快,学习成本更低。但Vue本身并不是严格基于MVVM模型的框架,只是借鉴了MVVM的设计原理。这里就不详述了。

2