前端开发的前世今生

今天我们来稍微聊一下现代前端开发的过去和现状。

前端开发的历史

CGI

在互联网刚刚开始兴起的时代，静态的html网页功能实在有限，前端脚本javascript 也不过是用于表单输入验证这样的简单功能。开发者想在网站上开发强大的功能就得使用动态生成的网页。
公共网关接口（Common Gateway Interface，CGI）就是早期动态网页的简单实现，基本原理就是让服务器不仅仅提供静态的html文件，而且可以根据输入参数用程序生成结果，简单，直接，有效。

Server Page

随着互联网的发展，需要的网站功能越来越强，对应的动态网页也就越来越复杂。这时候“Xxx server page” 这样的技术应运而生，其主要特点是把后端脚本嵌入到html页面代码中来生成动态网页，其实说白了就是一个语法糖，让生成动态网页的代码更直观容易理解。其中最有代表性的有：

• JSP, 全称java server page, J2EE的最基础功能之一, Java 在互联网和企业级应用开疆扩土的功臣，可以运行在tomcat 或者jetty这样的java web容器之上。
• ASP，全称active server page, 是微软推出的技术，运行于微软的IIS服务器之上。
• PHP，被人戏称为“世界上最好的编程语言”，至今还顽强的生存着。

RIA

动态生成的网页，从后端来看可以动态填充数据已经不错了，但前端表现力和灵活性未免差了一些。为了提高用户体验和绕开当时笨拙缓慢的javascript脚本，人们发明了RIA（Rich Internet Applications）富互联网程序，做法就是人工给浏览器安装RIA 运行时插件，扩展浏览器的功能以运行RIA的程序。记得当时听说过的实现有：

• Flash / Flex, 这个是n年前处于统治地位的插件，地表最强，没有之一
• Java Applet / Fx，Java applet 曾经是早期的java流行的原因之一，但终究未成气候。后来晚些时候又推出了 java Fx，但反响并不强烈。
• SilverLight，既然是软件技术竞争，又怎么可能少了微软，这个SilverLight就是微软晚些时候推出来的和Flex, Java Fx竞争的。

虽然上述技术曾经是打得你来我往甚是热闹，但架不住技术大潮的方向没有选择RIA，比如业界领军的苹果当年就坚持不支持flash。覆巢之下岂有完卵，曾经热门的技术终究逐渐销声匿迹了。

AJAX

"xxx server page"的技术虽然兴盛一时，但混合前后端代码的开发方式确实有些混乱和不直观。我们都知道解耦合和分层是软件设计中降低复杂度增加可读性的基本操作方法。在这里仍然适用。有一种名为AJAX （ Asynchronous JavaScript and XML）的技术静悄悄地发展。在 AJAX 中，JavaScript 代码向服务器发起请求，但不会令浏览器刷新页面，也不会改变网页。这种技术可以实现异步更新网页的部分内容，而不需要重新加载整个页面，从而提高用户体验。
直到后来行业巨头谷歌用它打造了前后端分离模式下的Gmail和google doc，这项技术一下子火爆起来。然后就有了老前端们所熟知的JQuery。个人感觉JQuery的名字可能就来自于它的核心功能之一：封装了AJAX调用功能。

前端组件化和工程化

AJAX火了数年，期间前端也变得越来越复杂，面临越来越多的挑战。再后来就出现了我们现在所熟知解决方案：前端组件化和工程化。下面我们会介绍一下现代前端开发的模式。

现代前端开发模式

前端工程化

随着前端复杂度的提升，传统写javascript 脚本和css的模式开发难度逐渐加大，难以为继，然后就出现了前端开发工程化的趋势。
前端开发工程化是指将前端开发过程中的一系列流程和工具进行规范和自动化，从而提高开发效率、减少重复劳动、降低出错率。其核心概念包括模块化、打包构建、自动化部署、自动化测试和持续集成等。旨在提高开发过程中的开发效率，减少不必要的重复工作时间，让开发人员更加专注于业务逻辑的开发。
前端开发工程化的主要实现方式有：

• 脚手架项目：模板化的于快速搭建项目基础的工具，它可以通过简单的指令或命令来生成项目的基础代码和配置，从而避免重复编写相同的代码框架和基础配置。
• 工具集：用于前端开发编译部署等生命周期中的各种工具软件

那么工程化具体的功能有哪些呢：

• 模块化: import,
• 项目配置：package.json, lock文件
• IDE工具集：VScode及其插件
• 构建：检查(lint), 编译(Babel), 打包(webpack, vite)
• 测试：单元测试(如Jest), 集成测试(如Cypress)
• CICD: 如Jenkins
• 监控告警：如google firebase, Sentry

前端组件化

前端组件化其实是解耦合，封装，内聚，复用代码等编程思想的一种有效的实现的方法。而具体实践则是由React, Vue为代表的框架来实现。甚至还出现了浏览器原生的组件化标准即web components（但它一直不温不火的）
组件化的流行还带来了如下小趋势：

• JSX 使用类似HTML/XML的方式来编写组件，JSX虽然只是语法糖，但却是改变前端开发思维方式的重要一步，更直观的代码，大大平缓了学习曲线。
• CSS In JS：既然是组件，自然会有将界面逻辑和界面样式都封装到一个组件的需求。Styled Component等CSS in JS的方案，使得外观和逻辑代码可以轻松结合在一起封装成组件。
• Theme: 现代UI组件库往往提供自定义Theme和切换Theme的能力。使得我们可以在组件外观绑定的同时给予UI风格一致的灵活性。

单页应用

SPA即single page application，是最典型的React/Vue组织前端页面的方法，即整个前端应用其实是一个页面，里面页面切换使用前端路由，浏览器层面并未发生真正的页面跳转。使得应用能够与用户交互，无需重新加载整个页面，代码逻辑也是一个整体，更像一个应用程序而不是分散的网页。
前端路由本质是对 url 的 hash 值进行改变和监听，通过切换对应页面组件的 dom 结构来实现多个页面的效果。前端路由可以将不同的路由对应到不同的内容或页面，使得页面不刷新，提高用户体验，也是实现SPA的基石。

##前端适配
现代前端以及不仅仅指狭义的网页开发了，往往要兼容和适配多不同终端：

• 多种运行时：
  • 浏览器
  • 原生App(iOS, Android，鸿蒙
  • APP内嵌Web View
  • 兼容性APP(Flutter)
  • 小程序(微信，京东，支付宝…)
• 多种设备
  • 电脑
  • 平板
  • 手机
  • 其他可穿戴或者嵌入式设备

微前端

微前端是一种发挥着 多个团队通过独立发布功能的方式来共同构建现代化 web应用的技术手段及方法策略。
微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，这样才能确保微应用真正具备独立开发、独立运行的能力。

更多相关技术

游戏开发

除了上面介绍的经典前端应用外，其实游戏也是一个很有价值的方向。

• WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起在浏览器中运行。WebGL的出现大大拓展了前端绘图能力，使得在浏览器，小程序或web view中3D绘图变得可行，而且速度也不错，这是web 游戏能够实现的根基。
• 游戏引擎，不少游戏引擎支持浏览器环境运行，比如著名的Cocos，轻量级的PixiJS，以及曾经火爆的白鹤引擎（白鹤是优秀的国产游戏引擎，市场占有率非常高，但后来大概是因经营原因停止更新了，很可惜）

Web Assembly

如果我不想用javascript 或者typescript怎么办？试试Web Assembly吧。
WebAssembly是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C++和Rust等低级源语言提供一个高效的编译目标。
因为它的安全性，隔离性以及语言无关性，Wasm 运行时可以以近似原生性能安全地隔离和执行用户空间代码，所以Web Assembly也可以用在其他需要沙箱机制的地方，比如Envoy Proxy 就率先使用 Wasm 作为扩展机制作为对数据平面的编程。

小结

本文大概介绍了前端开发的前生今世，希望能对不熟悉的人和新手前端有所帮助。任何意见和建议，都欢迎留言讨论。