前端开发模式的发展历史

1,080 阅读3分钟

首先我们来问一下自己:前端开发模式是如何一步一步发展到今天的?为什么现在我们前端开发需要安装 nodenpmwebpack 等工具?如果不用这些技术,那如何做前端开发呢?

要回答上面的疑问,我们就把时间倒回到1995年,来看一下整个前端发展的27年当中,有哪些标志性的事件。

  • 1995年 Brendan Eich 发明 Javascript,标志着前端开发的诞生;
  • 2005年 Ajax(Asynchronous Javascript And XML) 广泛使用,标志着前端开发模式进入到前后端分离的时代;
  • 2008年 V8 引擎的发布,标志着 Javascript 有可能脱离浏览器进行使用;
  • 2009年 nodejs 的发布,标志着前端进入到一个飞跃的时代;
  • 2010年 npm0.1 版本发布,标志着模块化开发正式诞生;
  • 2013年 webpack1.0 版本发布,标志着现代前端开发模式正式形成;
  • 2013年 React1.0 版本发布及 2014年 Vue1.0 版本发布,标志着前端开发模式正式进入到 MVVM 时代;

从这些标志性的事件,我们可以总结出前端开发模式进化过程,如下图所示:

16e1e0fb-5133-4897-960e-341c282e2918.png

第一阶段: 前后端混合模式(1995-2005)

这个阶段前端代码包含在后端代码中,浏览器不会请求前端资源,而是请求到后端的控制器中,然后通过服务端渲染的方式把页面资源返回给浏览器,Javascript 仅仅实现页面的交互逻辑。

第二阶段: 前后端分离(2005-2013)

这个阶段借助 ajax 技术实现了前后端分离,浏览器会直接请求前端资源,前端通过 ajax 向后台请求数据,后台通过api的形式给前端调用。从此前端脱离后端独立存在,这个时候开始出现前端工程师这一职业。

第三阶段: 模块化开发(2013-2014)

这个阶段借助于 npm 的模块化管理,可以上传和下载模块,从而实现了模块化开发方式。同时借助 webpack 的打包功能把 js, css, img等资源统一打包成一个 bundle.js 文件,浏览器加载的时候就加载一个或几个资源,极大了提升了网页性能。

第四阶段: 模块化 + MVVM(2014年-至今)

React/Vue 等前端框架的出现,我们不会再去写 html, css 等代码了,而是写 vue 或者 jsx 的代码,最后利用 webpack 的 loader 工具把这些文件统一打包浏览器能识别的 js 文件。

总结

前端开发模式的发展是为了解决前端项目中遇到的问题而不断发展的。以往一个前端项目只需要几百行代码,现在一个中等量级的项目都是几万行代码,要管理如此多的代码唯一的解决方案就是模块化

今天前端有这样的规模的核心原因就是因为模块化,其他的所有的工具如 npm,webpack 都是围绕模块化这一个点来突破的。即使,今天的 react/vue 等前端框架提出的组件化开发,其实也是在模块化的基础上发扬光大的。模块化在前端开发模式发展中扮演重要角色,下一节我们将要学习模块化。