这是我参与「第四届青训营 」笔记创作活动的的第7天，今天的课程是「Web标准与前端开发」，老师主要讲解了 前端开发的起源 、 前端开发的架构 、 前端开发的变迁 、 前端应用的领域 、 前端学习路线图 等内容。

关于前端开发

关于前端开发：起源、架构、变迁

前端开发最早起源于一个叫Tim Berners-Lee的人提出的建议。

"Suppose all the information stored on computers everywhere were linked.Suppose I program my computer to create a space in which everything could be linked to everything."

很多人分不清上网的概念，上网其实就是指接入Internet，它是地球上相互连接的计算机构成的网络。计算机网络诞生于上世纪60年代，标志性通信协议是TCP/IP。而Web的标志性协议是HTTP。

Web架构

1989年诞生时，Web由三种技术构成：HTML、HTTP、URL。CSS和JavaScript是几年之后才出现的。

Web技术变迁

只读时代，1989-2004，HTML/CSS/JavaScript

单向发布、静态只读、链接跳转、刷新页面、表格对齐元素、CGI。

这个时代客户端相当于一个阅读器，不能在不刷新的情况下去更新页面。这是Web发展的早期。

体验时代，2005-2010，Ajax/Web API/jQuery

动态交互、社交媒体、用户生成内容（UGI）、单页应用（SPA）、jQuery、YUI。

2005年有一个特别火的概念叫Ajax，它的核心是IE浏览器早在2000年就支持的一个对象XMLHttpRequest。这个对象当时在IE浏览器中，浏览器不用刷新网页，也可以通过这个对象在后台向服务器发送请求。然后在拿到数据后再通过修改DOM的方式把更新的内容展示在网页中。

而到了2005年的时候，因为谷歌Gmail的应用，包括后来的谷歌地图，都使用了Ajax。这个技术能在不刷新页面的情况下响应用户的交互，因此得到了普及，让Web技术从简单的网页向Web应用实现了跨越。

敏捷时代，2010-2021，Fetch/Node.js/Webpack

模块化、组件化转译（transpiling）、打包（bundling）、React.js、Vue.js。

这个时代的转折点在2017年，苹果发布了iPhone手机，互联网也进入了移动时代，用户体验也越来越受到互联网公司的重视。

前端应用的领域

To Business

企业级应用，包括很多互联网公司其实内部都有To B的一些平台，像现在很多的公有云、广告平台等等。它们的表现形式多是一个需要登录的网站，之后有很多提供各种服务的选项，例如可以管理自己的资源、可以监控各种服务的状态等等。这是规模非常大、也非常赚钱的一个领域。

To Customer

网页最早期就是在老百姓之中实现信息共享的一个作用，直达客户的应用都属于此类，包括门户网站、电商平台、在线教育、新闻资讯、生活娱乐等等。此类规模也非常庞大。

To Developer

面向开发者的工具，提高Web开发效率的工具本身也是一个非常重要的方面。整个开发运维的过程都离不开大量工具的支撑，像VS Code之类的代码编辑器等等。

浏览器

浏览器分为桌面浏览器和移动浏览器。

Desktop

Google、Edge、Firefox、Opera、Safari等。

Mobile

Android、iOS。

服务器端的应用

服务器端主要依托Node.js，如今生态已非常成熟。早期还有Express、koa等等这些服务端开发框架。

终端和跨端

命令行/终端：Webpack CLI、Babel CLI、Vue CLI、React CLI。 桌面跨端：Electron、NW.js。 移动跨端：React Native、Flutter。

学习路线图网址

Frontend Developer Roadmap: Learn to become a modern frontend developer 其中紫色标识的是作者非常推荐的学习方向，绿色标识为可选项、与紫色标识比较互补，灰色标识不太推荐。