作者: [商见曜](https://developer.hs.net/user/19631)

来源： [恒生LIGHT云社区](https://developer.hs.net/thread/1982)

把握前端开发历史脉络

![E7A82937-8ABF-4b8f-A4BB-2E208690E5E1.png](https://developer.hs.net/storage/attachments/2022/01/20/EOFsndIJiKoi8hfhIk0C3iXxKpawCodbuGbtmFQY.png)

[#光源计划#](https://developer.hs.net/topic/30)

## 前言

当你接触一个新事物的时候，你应该先去了解它的历史。

## 前端发展的起源、架构、变迁

### 前端的起源

一切的开始源于 Timothy John Berners-Lee 在 1989 年发表的一份声明：他在短短十几页的声明中，提出了一个“万维网”的构想 -- 世界上的电脑互相连接起来。这是 Web 的起源。而在他发表这份声明前，他已经做了一些相关工作了：创建了一个以超文本系统为基础的项目，方便研究人员分享及更新讯息的原型系统，叫 ENQUIRE。1989 年 3 月，他写下了他的初步构想，并在 1990 年重新开发配置系统。他使用与 ENQUIRE 系统相似的概念来创建万维网，为此他设计并构建了第一个网页浏览器，他的软件还可以作为编辑器（称为 WorldWideWeb，能在 NeXTSTEP 操作系统上运行），他还设计了世界上第一个网页服务器，CERN httpd（超文本传输协议守护进程的缩写）。

### 架构

从他的构想与实践中，我们发现一开始网页的架构是这样的：HTML 是内容，http 是传输工具，而 URL 是内容的可访问地址，css 和 JavaScript 一开始是不存在的。而 Web 的架构则很清晰明了：网页与服务器通过计算机网络连接。

![jgs.png](https://developer.hs.net/storage/attachments/2022/01/20/Y353CiHxK4byQ4UytVlgpAXl0dgMhtUFWZyuXZWX_thumb.png)

### 变迁

前端的变迁看起来是非常有趣的。

自从 1989 年 Web 出现之后，其实并没有独立的前端开发岗位，大多数都是后端开发兼任或者设计兼任的。无论 css 和 JavaScript 两者的出现都没有改变这一现状，网页依然是傻傻的，每次改变都需要同步到后端，然后后端返回一个完整的网页我们才能更新网页。

直到一个技术 Ajax 的诞生。虽然在 2000 年的候 IE 就自己实现了 XMLHttpRequest 这个技术，但是它被正确使用和被大众接受还是在谷歌推出了 Gmail 和 Gmap 这两款产品的时候。Ajax 的出现标志着前端获得了更多的自主权，前端可以做更多的工作，“网页应用”的概念第一次被提出。这时期一些经典的库出现了比如 jQuery。

最近的一次变迁这是由苹果公司造成的 \-\- 他们发布了 iphone 手机，极大的拔高了用户体验的概念，这时候前端的工作职责也更多了，开始出现独立的“前端开发岗位”。而随着基于 V8 引擎的 nodejs 出现，前端工具更加丰富，以前后端的一些模块化，工程化等概念也开始引入前端。这时候一些工具和框架开始大行其道，比如 webpack，react，vue 等。

## 前端的工作领域

### 浏览器

浏览器作为最开始的网页浏览工具，也是 JavaScript 的诞生环境，也是我们日常使用的工具，我们大多数是通过浏览器去访问我们想要去的地方的。而现在的浏览器早已不是曾经的“百花齐放”逼得人搞兼容性搞到癫狂的时代了，现在的浏览器从内核上来说只有三款了（国内的浏览器我真不了解）：Chromium--Chrome、Opera、edge，Gecko--Firefox，Webkit-Safari。而 chromium 占比已经达到了 69%（2021 年），实际性的垄断地位。（而 Safari 在苹果生态上很难撼动）

### 服务器

前端在服务器开发？这句话看起来就很荒谬，但是随着 nodejs 的出现，这句话就不再荒谬。随着 nodejs 生态的发展，npm 包管理工具已经是世界上最大的包管理工具了，超过 130 万个包使用 npm 管理。经典的 nodejs 服务器框架有 express、koa 等，它们的出现使得只学习 JavaScript 就可以胜任前后端的开发工作，使得“全栈开发”这个概念得到进一步的实践。

而在 nodejs 出现十年的时候，它的作者 Ryan Dahl 回忆自己在设计 node 的时候有“十大失误”，并提出 node 的孪生弟弟 deno，全新的 Rust 语言开发，弥补遗憾，值得关注。

### 终端、跨端

终端，一般来说就是 Teminal cli 工具，比如 vue cli，create-react-app 等，这也是前端开发可以选择的方向。而跨端的话，对于桌面端来说，现在有 electron、NW.js 这两个比较热门的框架来作为开发工具，而对于移动端来说，还有 react-native、flutter 等。

## 前端的业务场景

### TO B(business)

b 端一般是面向企业、机构、银行、政府等，这类业务场景一般是构建平台，搭建网站，提供服务。用户上这个平台的时候可以购买、使用、监控、管理他们的服务，这类业务会有很多业务逻辑要写，可信度的要求也比较高，这类业务很赚钱。

### TO C(customer)

c 端一般都是面向普通人，或者说专注于人的基本生活习惯，吃喝玩乐、兴趣爱好等，它就比较偏向潮流、时尚，极大的提高用户体验的地位，这类的业务场景百花齐放，但是核心是用户体验，而且搞这类的企业一般比较年轻（可能），会更加以人为本。

### TO D(developer)

d 端就是面向我们程序员自己，自产自销。一般都是为了解决开发痛点，然后自己提出解决方案，为社区开源，获取名利来持续运营，典型的例子：尤雨溪。这类的要求比较高，但是基础工资和后续在业内的发展上限是极高的。

## 前端的语言、框架

### wasm

从 js 诞生之后到现在，浏览器中能运行的语言就只有 HTML、Css、Js 三门语言，已经持续 20 多年了。但是在 2019 年的年底，wasm 规范通过了社区认证，主流的浏览器都已经关于 wasm 达成了一些共识。它脱胎于 asm.js，更加的开放、安全、快速。从此以后，c++/c 等其他语言的模块就能通过编译为 wasm 模块被浏览器运行，也许有一天，我们可以在浏览器上运行大型游戏也说不定？（网速咋办啊）

### 框架

我们学习一门框架，往往是出现了一些问题然后我们去找解决方案，不经意了解这门框架 / 工具可以正好可以解决这个问题。但我建议，当我们去学习一门优秀的框架的时候，我们可以多去了解一些它的作者，了解一下作者对这个工具的设计初衷，了解这个人的技术愿景，因为这种人往往都是颠覆、或者说极大的改变了行业的人，是行业的引领者。以下是一些优秀的框架和他们的作者。  
![3A8A5816-4BC0-41dd-BA05-450D0A282DA6.png](https://developer.hs.net/storage/attachments/2022/01/20/RggOH9OW7Uove3qAitdl7wlsI7BCMb6mq1ASrg42_thumb.png)

## 前端的学习路径

那很粗浅的了解了一下前端发展的历史，我们该怎么学习前端呢？这里我推荐一个网站 [roadmap](https://roadmap.sh/frontend)。以下是一张截图，图里紫色的标是必须掌握的，绿色的标是推荐学习的，灰色的标是什么时候用到再学就可以的，而没有标的就...  
![85AB44E3-FF43-4b45-9246-C088355963BC.png](https://developer.hs.net/storage/attachments/2022/01/20/JDZH0o9ZvY4ylGLSVlG9kKlh0j93UKg2Y5rVrau7_thumb.png)

从这张图里我们可以看一些基本的知识。学习前端要学习计算机网络知识，这是前后端联调的基础；需要学习 html+css+js 经典套餐，这是二十年来的必经之路；学习版本管理 git，因为协作是我们工作顺利的保障；学习一个包管理工具 npm/yarn，（不适用 npm 的应该不算应用吧 hh）；学习一种构建工具 webpack 老牌强队了，esbuild 是超快的速度，而 vite 是新兴的产物；学习一门前端框架，react 和 vue 都是一时之选。.. 就像那句话，保持学习。

## 总结

今天向大家介绍了一下前端的起源，它的工作领域，主要的业务场景，发展，和学习路径，希望大家看完之后有所收获，对大家理解前端开发这个岗位有所帮助。

## REFERENCES

1.  [wiki-蒂姆·伯纳斯-李](https://zh.wikipedia.org/wiki/%E8%92%82%E5%A7%86%C2%B7%E4%BC%AF%E7%BA%B3%E6%96%AF-%E6%9D%8E)
2.  [www三十年](https://www.36kr.com/p/1723347714049)

## Recommended reading

1.  [诞生文献-Information Management: A Proposal](https://cds.cern.ch/record/369245/files/dd-89-001.pdf)
2.  [深入理解现代浏览器](https://github.com/75team/w3c/blob/master/articles/20190603_cncuckoo_%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E7%8E%B0%E4%BB%A3%E6%B5%8F%E8%A7%88%E5%99%A8.md)
3.  [http概览](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)

## more Information

大家了解了以上信息，对 web 标准的关注可以了解一下 web 标准组织

-   [w3c](https://www.w3.org): world wide web consortium
-   [ECMA](https://www.ecma-international.org): Ecma International
-   [WHATWG](https://whatwg.org/): Web Hypertext Application Technology Working Group
-   [IETF](https://www.ietf.org): Internet Engineering Task Force

---

想向技术大佬们多多取经？开发中遇到的问题何处探讨？如何获取金融科技海量资源？

恒生LIGHT云社区，由恒生电子搭建的金融科技专业社区平台，分享实用技术干货、资源数据、金融科技行业趋势，拥抱所有金融开发者。

扫描下方小程序二维码，加入我们！

![](https://oscimg.oschina.net/oscnet/up-2ffc37e7e18e069c0d68ff447ee4acb6751.png)

ITPub博客

把握前端开发历史脉络

最新文章