讲给前端RD的技术史

谨以本文献给非科班出身的前端RD,大体了解前后端的爱恨情仇。本文内容未做严谨考究,如果差错,还请谅解。本文主旨是方便前端RD人员了解当前技术框架的由来和可能的未来趋势。

CS架构和Socket通信

那些年,还没有手机、没有Pad,没有笔记本电脑,甚至没有浏览器。没有浏览器?那与前端有什么毛关系额!

说起前端,很多人第一印象就是页面,以及相关技术HTML、CSS和JS。其实是前端是个广泛的含义,既然有前端,那应该有后端。如果说后端是运行在服务器(一个功能很牛X的计算机)的服务,用于存储、计算核心数据;那么前端可以认为是运行在客户终端的辅助程序,用于上传、展示相关数据。

是的,我们可以认为PC APP是那个时候的前端——Client客户端。那客户端如何和服务端(Server)通讯呢?

用HTTP协议呗?还用问吗?问题来了:如果那时候没有HTTP协议呢?或者说不适合使用HTTP协议呢?

那时候的解决方案是Socket通信。

Socket的意思是插座。“人如其名”,使用Socket通信时,服务端会开启一个端口,时刻监听来自客户端的请求。——就像一个通电的插座等着规格匹配的插头插入。——Client可以通过IP地址(后来有了域名,可以认为是IP地址的名字)+端口的方式找到Server。

Socket通信是在应用层和TCP/IP协议族(主要是传输层的TCP和UDP协议)之间的抽象中间件。Socket大大简化了TCP/IP协议的使用。

只读的WEB 1.0

听说有几个科研工作者,在实验室分享知识种子(论文)使用软盘不方便,便捣鼓出了万维网(WWW)和HTTP协议。结果一发不可收拾,各国顶尖实验室都想接入。

后来个人电脑普及,同时万维网(WWW)也进入大众视野。不过,这时候的WEB是单向的、只读的。用户只能看内容,不能修改。网站内容是网站管理人员事先把内容放在WEB服务器上。——比如IIS、httpd(apache2)和后来诞生的nginx。

此时,不得不提的历史性事件是网景公司(与后来的Mozilla有瓜葛)提升了浏览器性能,并开发了相关脚本语言。——诞生了第一代前端工程师!

大众创作的WEB 2.0

到了WEB 2.0,大大提升了用户的操作权限,用户可以在网站上创作并分享自己的知识成果。诞生了一批WIKI、BLOG类的网站。

这时候的主要技术是PHP(全世界最好的语言)、JSP和ASP。前端切图做页面,后端一路CURD,下班双双把家还。前端作为后端view层的一部分,嵌套在后端代码里。运行时,每次请求页面,应用服务器(比如tomcat)都会动态生成HTML页面。访问用户少还好,一旦多了,单个应用服务器就因为负载过高而崩溃。后来出了不少解决方案,如果:PHP的静态化(把经常访问且内容基本不变的页面生成静态HMTL页面)、JAVA的负载均衡(加机器!加机器!加机器!)。

后来Ajax和红极一时的jQuery诞生,前后端迎来七年之痒。前端可以使用jQuery方便地操作Dom元素,通过Ajax上传数据和获取后端数据。更重要的一点事,前端可以独立出去,部署到WEB服务器,不再需要应用服务器进行动态生成。——这样可以大大降低应用服务器的开销。

前后端分离:前端工程化与微服务化

上面说到,Ajax和jQuery让前后端分离成为趋势,但这条道路不是一蹴而及的。在PHP、JSP和ASP时代,数据可以通过标准标签库(如:JSTL)或者模版语言(如:freemaker)方便的构建页面。前后端分离,意味着前端需要完成这部分工作——把通过Ajax获取的数据构建成Dom结构——我在实践中,曾封装art-template实现了数据自动渲染。——可以认为是一种比较原始的前端MVC方式。

好在,有大牛提出了其他解决方案,MVC、MVP、MVVM层出不穷。市场上常见的方案有React、Angular和傻白甜的Vue。他们也各自发展出了自己的生态,全家桶,满满的都是诚意。

随之而来的问题是:前端代码越来越庞大,前端开发流程越来越复杂(已经不再是当年那个可以直接在web服务器上改程序的年代了)——前端项目越来越像后端项目,需要功能模块设计、开发、编译、部署等流程——前端工程化成了不可不做的工作。

此时,各种前端工程化工具,乘坐nodeJS这趟班车应运而生。前端的问题用前端技术处理,grunt、gulp、webpack,出现在编译环节。自动化部署,借用了后端的Jenkins等工具。

与此同时,后端从给页面添加数据的工作中解脱出来,通过RESTful规范提供一批通用接口,谁爱用谁用。闲来没事,把自己肢解了。把通用的服务拿出来单独去做——自己的数据库,自己的处理逻辑——业务后端在需要时调用相应的服务。这大体就是后端微服务的结构。——高内聚、低耦合——具体后端之间如何相互调用呢?简单的方式就是RESTful,但http头比较浪费性能;也有RPC框架(可以基于HTTP协议也可以是TCP协议),封装了一些操作,方便使用、性能也更好些,感觉像极了Socket。

泛前端——JS革命

这个是现在正在发生,也可能是即将爆发的一个点。

nodeJS的诞生,让前端人员也可以低成本的进行简单的后端开发。——CURD懂不?就是增删改查。后端变得越来越深沉,不做低级的的CURD,去捣鼓大数据和机器学习了。后端把非结构化的数据(自然语言、视频、音频、日志等)处理为结构化数据,通过接口或者业务数据库的方式提供给前端使用。前端根据权限和业务需要去拉去相应数据。

另一方面,VR、AR、物联网和5G兴起,新型终端设备将会不断诞生(VR眼镜、智能音响等),JS很有可能会成为其主流开发语言。而且JS字节码化,也会在商业安全和性能等方面,增加JS的应用场景。

© 2020, 李德涛博客. 版权所有.

发表评论

电子邮件地址不会被公开。

6 + 1 =

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据