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

这是我参与第四届青训营笔记创作活动的的第7天。

一 关于前端开发

起源

1990 年，第一个web浏览器诞生，Tim 以超文本语言 HTML 为基础在 NeXT 电脑上发明了最原始的 Web 浏览器。1991 年，WWW诞生，这标志着前端技术的开始。

架构

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

变迁

• 只读时代(1989-2004)：HTML、CSS、JavaScript
• 体验时代(2005-2010)：Ajax、UGC、jQuery、Web API
• 敏捷时代(2010-2021)：Node.js、Webpack、React、Vue、Fetch

二 前端应用的领域之浏览器

从运营环境的角度来看：首先，浏览器包括桌面浏览器和移动浏览器，以及移动APP中的WebView都是属于浏览器直接渲染Web应用的范畴。桌面浏览器包括Chrome、Edge、Firefox、Opera、Safari这五个主流浏览器。移动浏览器主要是Chrome和Safari，还有国内小程序提供商定制的一些浏览器引擎。

三 前端应用的领域之服务器

服务端的开发主要依托于Node.js这个成熟的JS运行时，npm包管理平台现如今已成为世界最大的程序包管理平台。还有Express、Koa等的Web框架。

同时大家也要关注Deno这个新的JavaScript安全运行时，Deno 专注于提供设计安全的轻量级运行时。它还内置了对TypeScript 的支持，这是Microsoft主导的 JavaScript 类型化超集，在整个生态系统中变得越来越流行。直接这使得 Deno 成为更喜欢使用 TypeScript 提供的类型保护的人的更好的候选人。如果你正在使用 TypeScript，想要一个去中心化的包管理系统，或者你需要强大的安全控制，那么 Deno 是更合适的选择。

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

1. 终端:主要是包括各种前端框架的脚手架,如Vue-CLI、Webpack-CLI等，使得服务 器终端可以便捷的部署服务、交互数据。
2. 跨端:跨端分为桌面跨端和移动跨端，跨端同时整合了终端和客户端功能，桌面跨端框架 有Electron、NW.js等，移动跨端主流有React Native和Flutter。

五 前端应用的领域之语言、框架、工具

• HTML、CSS、JavaScript是前端开发必须掌握的三门语言。HTML负责结构页面，CSS负责为页面提供装饰，JavaScript负责赋予页面动态和交互能力。

其中常见的框架有VUE、React、Angelar三大框架。

六 前端应用的领域之浏览器、网络、服务器

1. 浏览器原理需要从架构、导航、渲染、交互四个层面进入学习。具体到这篇《深入理解现代浏览器》文章学习。
2. 关于网络和服务器，我们要先了解HTTP协议，以及请求和响应。可通过《An overview of HTTP》这篇文章学习。

七 关于Web标准

Web标准主要是由四大标准组织:W3C、Ecma、WHATWG和IETF制定， 代码编程规范可以从官网查询,在官网域名后+TR:

• W3C的规范查询地址:All Standards and Drafts - W3C
• TC39规范查询:TC39 – Specifying JavaScript.
• WHATWG规范查询:Standards — WHATWG
• IETF规范查询:IETF | Internet Engineering Task Force
• W3C每年都回召开公开线上研讨会，大家可以在线上学习: (www.w3.org/participate…)

八 前端学习路线图

给大家推荐一个网址来学习前端这个职业的技能树：前端学习路线图(http://roadmap.sh)

参考资料

字节青训营前端教学视频及PPT