【第二届青训营-寒假前端场】- Web标准与前端开发

01.关于前端开发

起源、架构、变迁
前端应用的领域
语言、框架、工具
前端学习路线图

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

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

Tim Berners-Lee, inventor of the World Wide Web

假设所有存储在各处计算机上的信息都被连接起来。

假设我可以给我的电脑编程来创造一个空间，在这个空间里，一切事物都可以相互关联。”

——万维网的发明者蒂姆·伯纳斯·李

很多人分不清“上网”是上的哪个网？即使在互联网的诞生地也是如此。Web的普及和深入人心由此可见一斑。
上网指接入Internet,它是地球上相互连接的计算机构成的网络。计算机网络诞生于上个世纪的60年代,标志性通信协议是TCP/IP.

1989年诞生时，Web由三种技术构成：

HTML
HTTP
URL CSS和JavaScript是几年之后才出现的。

关于前端开发：前端应用的领域

To Business
To Custom
To Developer

关于前端开发：前端应用的领域之浏览器

Desktop：
Mobile：

关于前端开发的应用领域，接下来再从运营环境角度看一看。首先，浏览器，包括桌面浏览器和移动浏览器，以及移动App中的WebView，都属于浏览器直接渲染Web应用的范畴; 桌面浏览器包括Chrome、Edge、Firefox、Opera、Safari这五个主流浏览器，事实上随着谷歌Chromium开源项目的不断攻城掠地，也随着开源运动的不断属性，浏览器的多样性正在减少。因为Edge和Opera都已经选择站到了谷歌的阵营，所以事实上只有Chrome、Safari和Firefox三个浏览器。目前，Chrome浏览器的市场份额达到67.55%，具有事实上的垄断地位。移动浏览器主要是Chrome、Safari,还有国内小程序提供商定制的一些浏览器引擎。换句话说，前端不仅要开发在浏览器和WebView中运行的网页，也要开发在小程序运行时上跑的小程序。

关于前端开发：前端应用的领域之服务器

其次，服务器，服务端的开发目前主要还是依托于Node.js这个成熟的JS运行时,npm包管理平台已经成为世界最大的程序包管理平台,2019年6月超过100万。当然，还有Express、Koa等Web开发框架的生态。最后，大家也要关注DeDeno这个新的 JavaScript安全运行时。Deno号称是安全运行时。而且Deno也是Node.js之父San Dahl一手打造的。在发布Deno的时候,Ryan Dahl曾经痛陈"Node.js十大遗憾"。

关于前端开发：前端应用的领域之终端和跨端

命令行/终端
- Webpack CLI
- Babel CLI
- Vue CLI
- React CLI

桌面跨端
- Electron
- NW.js

移动跨端
- React Native
- Flutter 第三,终端和跨端，这个应用领域通常是开发者工具, 比如命令行工具里的Webpack、Babel、React、Vue都有CLI（Command-line Interface)版,而桌面跨端主要有EIectron 和NW.js ,目前世界上最流行的编码环境VSCode就是基Electron 一个Web应用。

关于前端开发：语言、框架、工具

HTML：structure
CSS：presenation/appearance
JavaScript：dynamism/action

前面我们从用户和运行环境两个视角, 了解了前端应用的领域。接下来再快速地了解一下前端开发相关的语言、框架和工具。

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

关于前端开发：浏览器、网络、服务器

最后，我们学习前端开发，一定离不开前端代码运行的环境。那就是浏览器、网络和服务器。这里推荐一篇长文"深入理解现代浏览器”，这篇文章以Chrome作为现代浏览器的示例，图文并茂在讲解了浏览器的工作原理，解释了在地址栏输入URL之后,回车，都会发生什么。一定要多读几遍，而且要经常读读，这样才能理解、记牢。