跳到主要内容

2.1-前端的发展

Create by fall on 18 Oct 2021 Recently revised in 24 Jan 2025

用技术去放大人们的需求。 ---- Alan Kay

前端历史

First Age

早期,基础建设

1997-2007

时间技术名称
1997ES1
2000ES3
2005Dojo
2006jQuery、Mootools
2007ES4(对于当时来说,太激进了)、Chrome、Ext.js

Second Age

2009-2019

工具完善,开疆拓土到移动端,框架的出现,

时间技术名称
2009ES5、Node.js、coffeeScript、npm
2010Backbone、Angular
2012Grunt、Meteor、Webpack
2013React、Electron、ES6
2014Vue、Gulp、TS1
2015React Native、Babel
2016Rollup
2017年前后Jest、Prettier
2018Parcel
2019Svelte3、Hermes

Third Age

2020-20??

时间技术名称
2020Rome、Deno

开发模式

发展阶段技术栈
基于模板渲染的动态页面PHP、JAVA、Html/css/js
基于ajax的前后端分离AJAX、jQuery、Extjs
基于node.js的前端工程化Angular、React、VUE
基于node的全栈开发
Serverless云开发

基于模板渲染的动态页面

最开始的互联网时代,网页简单,就是一些动态或者静态的页面,使用PHP,JAVA写一些动态模板,通过Web Server(nginx、apache)将模板解析成一个个HTML文件,此时还没有前后端分工,通常是后端工程师顺便写了前端的代码

基于ajax的前后端分离

2005年,AJAX技术正式提出,而基于ajax可以把web分为前端和后端,前端负责界面和交互,后端负责业务逻辑的处理,通过接口进行数据交互。并且再也不必在后端语言里书写难以维护的HTML

网页的复杂度也由后端的Web Server转向浏览器端的JavaScript,也正因为如此,开始有了前端的岗位

前端工程化

基于Node.js的前端工程化

2009年node.js出现,与此同时,出现CommonJS规范和npm包管理机制.之后也出现了gruntgulpwebpack等基于node.js的前端开发构建工具。

2013年前后,web前段三大框架(Vue.js,Angular,React.js)相继发布第一个版本,由原来的基于页面的开发转变为基于组件的开发,开发完成后使用Web Pack进行打包构建,从此前端开发变得规范化,工程化

全栈开发

基于Node.js的全栈开发

前端可以使用自己最熟悉的语言 Node.js 写服务器代码,于是前端开始使用Node.js进行开发,开始由前端向全栈的方向转变

在Node.js诞生的年代,后端逐渐由巨石应用模式向微服务架构进行转变,随着微服务架构的兴起,后端接口逐渐变得原子性,微服务的接口不在直接面向页面,前端的调用逐渐变得复杂了,然后出现了BFF(Backend for Frontend),在微服务和前端中间,加了一个BFF层,由于BFF对接口进行聚合、裁剪后,再输出给前端。而BFF不是后端的本质工作,所以交给Node.js进行实现。

巨石应用:大部分 web 工程是将所有的功能模块(service side)打包到一起,并放在一个web容器中运行,很多企业的Java应用程序打包为war包

微服务架构

一种架构理念,将功能分解到离散的各个服务当中,从而降低系统的耦合性,并提供更加灵活的服务支持,把一个大型的单体应用和服务拆分为数个或数十个的微小型服务,它可以扩展单个组件而不是整个应用的应用程序堆栈,从而满足服务等级协议。

明日黄花

ext.js

渴望像写桌面端应用一样去书写 web 应用的一个框架,最后失败了,被 vue、react 取代

当你用 extjs 开发,你就是在不断的实例化一些组件,然后处理对应的事件,并且 extjs 的 component,model,control让你以纯粹的 mvc 方式来开发。背后组件的渲染以及 dom 的操作,你基本上不用知道。也就是说 extjs 让 web 开发从杂乱的一端走向统一的另一端。但这让学习成本变的非常高,除非你本身也是一个桌面开发者,你会喜欢这个方式。

现在流行的 vue、react 等,其实不少思路都有 extjs 的影子。

观点来源:

作者:菩提树 链接:https://www.zhihu.com/question/23603879/answer/130254841 来源:知乎

参考文章

作者(文章名称)链接