把握前端开发历史脉络

Posted 2022-03-08 恒生LIGHT云社区

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了把握前端开发历史脉络相关的知识，希望对你有一定的参考价值。

作者: 商见曜

把握前端开发历史脉络

把握前端开发历史脉络_javascript

#光源计划#

前言

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

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

前端的起源

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

架构

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

把握前端开发历史脉络_chromium_02

变迁

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

自从 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 模块被浏览器运行，也许有一天，我们可以在浏览器上运行大型游戏也说不定？（网速咋办啊）

框架

我们学习一门框架，往往是出现了一些问题然后我们去找解决方案，不经意了解这门框架 / 工具可以正好可以解决这个问题。但我建议，当我们去学习一门优秀的框架的时候，我们可以多去了解一些它的作者，了解一下作者对这个工具的设计初衷，了解这个人的技术愿景，因为这种人往往都是颠覆、或者说极大的改变了行业的人，是行业的引领者。以下是一些优秀的框架和他们的作者。

把握前端开发历史脉络_javascript_03

前端的学习路径

那很粗浅的了解了一下前端发展的历史，我们该怎么学习前端呢？这里我推荐一个网站 roadmap。以下是一张截图，图里紫色的标是必须掌握的，绿色的标是推荐学习的，灰色的标是什么时候用到再学就可以的，而没有标的就...

把握前端开发历史脉络_node.js_04

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