宏观泛前端
宏观泛前端
Web 发展
从静态走向动态
Web 诞生
最早的网页是欧洲粒子物理研究所的科学家为了方便查看和共享文档，而基于 XML（Extensible Markup Language） 创造的，这也是为什么前端最重要的全局对象被称为 document，而不是 context/page/application 的原因。当时的网页只具备文本、图片的显示和页面间相互跳转（Hyper Link）的功能，因此被称为 HTML （Hyper Text Markup Language）。
当时的Web，功能十分简单，开发也不复杂。开发者把写好的网页放在服务器指定位置（Web服务根目录）下，将文档地址分享给使用者，使用者在浏览器中输入文档地址即可访问网页。
CGI
早期的 HTML 作为静态文件，即使不同网页的差异只在于部分区域，那么有多少种不同的可能，就需要准备多少份文档，这对开发者来说非常不友好。而且，网页也不提供前后端之间的数据交互。
CGI（Common Gateway Interface）的出现改善了这一情况。CGI 是一种服务器拓展功能，可以将从数据库或文件系统获取的数据，与 HTML 静态模板拼接后生成的网页返回给客户端，从而实现了网页的动态生成。在接收到用户请求后，CGI 还可以返回相应处理后的网页。
CGI 被认为是服务端脚本语言的鼻祖。然而，它也有着非常致命的缺陷。首先，CGI 每收到一个请求，都会新开一个进程进行处理，性能很低。当请求量成千上万时，服务器可能无法支撑以致崩溃。其次，黑客很容易通过不完善的 CGI 程序入侵开发者的服务器，系统安全无法得以保证。
CGI 的出现给当时刚起步的 Web 提供了一个发展方向。在这之后，PHP、JSP、Ruby、Python 等各种服务端语言层出不穷，不仅弥补了 CGI 的缺陷，而且在性能和开发效率上也有了很大提升。 从此，Web 从静态走向动态。
从后端走向前端
Web 发展初期
在 Web 发展初期，前后端是如何协作的呢？ 由于网页是在服务端使用脚本语言和 HTML 模板渲染出来的，所以前端可以书写这种模板，交给后端使用，之后联调保证模板套用无误。有时甚至不需要前端来写模板，只需要提供一些 CSS 样式表就可以了，模板由后端自行编写和调用。 在这种开发环境下，前后端耦合紧密，项目开发需要很高的协作成本。
除此之外，当一个页面的交互请求发送到服务端之后，依旧需要经历路由解析、数据处理、服务端渲染、返回网页等步骤。页面上哪怕只有一小块数据需要更新，浏览器也需要重新请求和渲染整个页面。 为了优化性能，开发者往往会使用一些特殊的策略。比如，将页面上可能发生更新的区域拆分为一个个子网页，然后在父页面上使用 iframe 来展现这些子网页。当一块区域需要更新时，只需要重新请求对应的子网页就可以了，因此也实现了父页面上的“局部页面刷新”。
这种做法虽然提高了一些性能，但是使页面看上去更像一件“打满补丁的旧衣服”，而且存在很多问题。比如，在开发方面，页面该如何拆分、页面改版时该如何理解和维护原有设计；在性能方面，这种局部刷新也未实现精准刷新，iframe 的加载还会带来额外的性能损耗。于是，从事 Web 的前辈们开始探寻其他一些解决方案，比如 jsonp 和 Ajax（Asynchronous Javascript And XML） 。
JSONP
Ajax
在 JS 中，开发者可以通过 XMLHttpRequest 对象，在不重新加载页面的情况下与服务端交换数据；之后使用 DOM 对象，可以很轻松地将数据渲染到页面上。
早期，Ajax 并未得到很多重视。直到 2005 年，Google 发布了全面使用 Ajax 打造的 Gmail。人们惊讶地发现，原来使用异步数据交互的体验是如此的好。从此，Ajax 得到广泛应用。 得益于 Ajax 的推广，前后端分离的趋势日渐明显，前端不再需要依赖后端生存，所有数据都可以通过异步交互来获取。在取得一个完整定义的数据接口后，前后端甚至可以在零协作成本的情况下并行完成开发任务。
SPA
随着硬件设备不断发展，客户端的计算能力愈加过剩，越来越多的业务逻辑开始放到前端处理，比如页面路由。 过去要跳转一个地址，需要经由服务端的路由解析处理后，返回对应的页面。而在使用 BOM 的一些无刷新跳转特性后，前端可以实现改变浏览器地址栏而不向服务端发送请求，因此也可以实现页面路由。在这种应用中，服务端只需要提供一个页面入口，所有的视图更新都将在这个页面上发生，因此又被称为 单页应用（SPA）。
纵观 Web 发展史，从模板引擎到 ajax、从后端路由到前端路由，这一路走来，技术重心已逐渐转移到前端。
从前端走向全端
Node.js
2009年2月，一位名叫 Ryan Dahl 的开发者在博客上宣布准备基于 Google V8 引擎创建一个轻量级的 Web 服务，并为之提供一套组件库。 同年5月，Ryan Dahl 在 GitHub 上发布了最初版本的 Node.js。 从此，JavaScript 进入了服务端语言的行列。开发者很容易使用 Node.js 搭建一个后端服务，实现从前端到全栈的升级。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。得益于 JavaScript 事件驱动和运行环境提供的事件循环机制，Node.js 在处理高并发任务上具有独特的优势，常用作中间层来提供数据缓存、网站路由、服务端渲染等功能。
Hybrid 应用
除了在服务端语言中开辟了一席之地的 NodeJS 外，以在客户端中嵌入 WebView 的 Hybrid 应用同样拓宽了前端发展的道路。 Hybrid 应用 以客户端为骨架，以 H5 为主体，页面将在 WebView 中展示。这种应用充分利用了 B/S 架构的优势，比如，一些用于 WebView 中的页面同样可以在浏览器或其他环境使用，减少了重复开发成本；当 WebView 中的内容发生变更时，用户无需下载和安装更新包，即可访问新的内容，提升了用户体验。
小程序
这几年来，随着各种 小程序 的问世，Web 前端技术早已超脱了浏览器和 Hybrid 应用的范围。前端工程师很容易基于已有技术栈快速上手和开发小程序类微应用。以微信小程序为例，框架使用 WXML 代替 HTML，WXSS 代替 CSS，开发语言由 HTML + CSS + JS 变为 WXML + WXSS + JS。而且，与 Vue & React 相近，它们也是 MVVM 模式。
对于开发者来说，小程序实现了一栈多用，降低了技术学习成本；对于用户来说，无需下载安装的小程序实现了“随用随找，用完即走”的快捷和易用；对于中小型商家来说，小程序降低了应用的使用门槛，提高了用户使用量。然而，小程序依旧需要依托第三方应用平台，无法直接访问操作系统底层，性能相对较差。
快应用
2018年3月20日，业内传出一则消息，小米、中兴、华为、金立、联想、魅族、OPPO、vivo、一加、努比亚十大手机生成厂商联合，开始共建快应用开发平台。
快应用 与小程序一样使用前端技术栈进行开发，应用无需下载和安装即可使用，入口位于手机的应用商店。与小程序相比，快应用的 SDK 并不依赖于第三方应用平台，而是直接依赖操作系统底层，性能相对更好。
electron
在移动端进行布局的同时，前端工作者们还把目光放到了桌面客户端上。
Electron 从 2018 年开始发布，它允许开发者使用 JavaScript/HTML/CSS 构建跨平台的桌面应用程序，并同时提供了一套 SDK 和一个 IDE。开发者可以调用 SDK 与操作系统底层进行交互；在 IDE 上编写的代码，经过编译之后，可分别生成适用于 Mac/Windows/Linux 的软件包。如果你能搭建一个网站，那么你就能建一个跨平台的桌面应用程序。
时至今日，得益于前端技术一栈多用的廉价成本，许多中小型公司也有能力将产品布局到多端了，一个成熟的产线架构已然走向全端。