这是我参与「第四届青训营」笔记创作活动的第2天

关于前端开发

起源

前端开发是一个随着Web标准不断健全和完善发展起来的职业由 Tim Berners - Lee（万维网之父） 提出的一个建议:

"Suppose all the information stored on computers everywhere were linked.Suppose I counld program my computer to create a space in which everthing counld br linked to everything."
// 假设存储在所有地方的计算机上的所有信息都是链接的。假设我对计算机进行编程，以创建一个空间，其中任何事物都与所有内容相关联。
关于他提的这个建议的论文：cds.cern.ch/record/3692…

架构

// 所以服务器是什么？服务器也是电脑，服务器是为电脑提供服务的电脑，它同样由CPU，主板，内存条，硬盘，机箱，电源等硬件组成。举个栗子，你和心爱的ta都是人，但你学计算机，所以你有一个更能体现你特点的名字：程序员，而这个名字好比服务器这个名字，你们有了一项特定功能（？）用途（？）所以你们有了特别的名字
参考文章：《服务器到底是个什么东西？跟电脑有啥区别？》 zhuanlan.zhihu.com/p/266686905

// 是不是很眼熟，电视剧里头都能看见，特别是那种商业间谍悬疑片

变迁

// 根据老师的个人见解命名

只读时代——1989~2004 HTML\CSS\Javascript

单向发布
静态只读
链接跳转
刷新页面
表格对其元素
CGI ( Common Gateway Interface，通用网关接口 )

// CGI是一个Web服务器主机提供信息服务的标准接口。
CGI其实是一个接口规范或协议，按照CGI接口规范开发的程序都可以叫做CGI程序。而通常所说的CGI指代其实是CGI程序，也就是实现了CGI接口标准的程序。
// 参考文章：《 CGI是什么》 zhuanlan.zhihu.com/p/286302523

体验时代——2005~2010 Ajax\Web API\jQuery

动态交互
社交媒体
用户生成内容（ UGC: User Generated Content ）
单页内容（ SPA：Single Page web Application）
jQuery
YUI( Yahoo! UI Library )

// UGC并不是某一种具体业务，而是一种用户使用互联网的行为，即由原来的以下载为主变成下载和上传并重。比如bilibili,微博，知乎，豆瓣等等，用户可以从这些网站发现自己喜欢的内容，也可以记录上传自己的视频，图片，文章，然后分享给其他参与者一起浏览
参考文章：《都在说UGC，它究竟是什么？》 zhuanlan.zhihu.com/p/39996800

// SPA就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序
参考文章：《什么是单页面应用（SPA）？大白话介绍》 blog.csdn.net/qq_36196059…

// JQuery是JavaScript 框架,实际上就是对现有的JavaScript的一种扩展，轻量级。其本身是一个基于插件的JavaScript库，它的各种功能可以通过新的插件进行增强。JQuery为Web编程提供了一个抽象的层，使得它可以兼容于任何浏览器，并且大大简化了原先用JavaScript做的工作
参考文章：《前端开发进阶：jQuery是什么?为什么这么受欢迎？》 zhuanlan.zhihu.com/p/132561105

// YUI是开放原始码的 JavaScript 函数库。是一组工具和控件，用JavaScript写成, 为的是用DOM脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序
百度百科：baike.baidu.com/item/YUI/79…

敏捷时代——2010~2021 Fetch\Node.js\Webpack

模块化
组件化
转译
打包
React.js
Vue.js

前端应用的领域

To Business
To Customer
To Developer

前端应用领域之浏览器

桌面浏览器和移动端浏览器

前端应用领域之服务器

// 服务器、服务端的开发目前主要依托于Node.js。但也要重视Deno这个JS安全进行时。Deno是由Node.js之父Ryan Dahl一手打造，并且在Deno发布时，Ryan Dahl痛陈“Node.js十大遗憾”

前端应用领域之终端和跨端

命令行/终端
桌面跨端
移动跨端

框架

语言、工具

Webassembly：

// WebAssembly 是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它不是一种语言，而是规定了一种虚拟指令集，可以作为各个语言的编译目标，然后通过 wasm 的虚拟机运行到浏览器还有其他各个平台中。
参考文章：《 WebAssembly入门》 zhuanlan.zhihu.com/p/278028242

浏览器、网络、服务器

《深入理解现代浏览器》 github.com/75team/w3c/…
《 An overview of HTTP 》 developer.mozilla.org/zh-CN/docs/…

学习路线图

roadmap.sh/frontend

关于Web标准

Web标准组织

W3C
Ecma
WHATWG
IETF

Web标准与前端开发｜青训营笔记

关于前端开发

起源

架构

变迁