4.2.1 前端技术导读
本节将简要介绍 Web 原理和前端技术的理念,为了让读者对接下来要学习的技术有初步的认识。
Web 原理概述
参考本模块的 4.1WEB 开发入门 模块,理解大致的工作原理。
前端到底是什么
省流
前端一开始是以文本文档为中心的,后来发展成了组件化的形式。
为了讲清楚为什么前端会变成现在的样子,我们就要去整理前端的发展历史。
Web 的最早的起源可以追溯到上世纪九十年代 [1]。那时候的网络规模比较小,而且网速也很慢。当时的 web 是以文本为中心的,网站就是文本文档,最多加一点样式,而不是今天我们看到的动态网页。就像下图展示的一样。
http://info.cern.ch/NextBrowser1.html
在这样的情况下面,使用 HTML (Hyper Text Markup Language, 超文本标记语言) 这种文本标记语言作为网页的主体就是很自然的行为。而为了给网页加上样式,又引出了 CSS (Cascading Style Sheets, 层叠样式表) 这种样式描述,告诉浏览器这个文档应该怎么渲染出来。
随着 Web 的发展,网站需要实现一些功能。于是 JavaScript 被发明出来作为网页的脚本,并且逐步成长为一门现代化的编程语言。也因为 JS 本义只是为了给静态网页添加非常基础的功能,它也留下了很多设计缺陷,我们随后不得不去提这些。
而随着 Web 的迅速发展,当时的模型显然已经不能满足现在日益复杂的需求,现代前端技术越来越依赖于组件化。HTML 标签不再是直接被编写的代码,而是框架生成和管理的生成产物,一些 HTML 和 CSS 片段被作为 “组件” 来组织,并且复用。
但是 Web 的准则是 “不要破坏 Web”,即新的标准必须兼容已有的网站。而且 W3C 的标准一直是以维持页面的文档结构为主的,对于组件化这种高级特性也无力支持。因此,前端的发展中出现了框架来组织项目,将 HTML CSS JS 三件套作为框架的生成结果,而不是开发使用的范式。这个我们后续会接触,也许学完框架之后回头看这段话会有新的感触。
我到底要学习什么
在这个教程,我们会先学习 HTML+CSS+JS 的传统前端三件套,了解前端开发是如何和浏览器打交道的。
接下来的部分会带大家了解 NodeJS 以及配套的工具链,使用现代化的前端开发框架来组织和开发项目,了解它们为什么要这样通过一些看起来很奇怪的模板生成 HTML 和 CSS ,而不是直接写。
具体的学习路线参考了 roadmap.sh: Frontend Developer 的内容。