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

一、本堂课重点内容：

• 前端学习路线
• 应用领域的三大方向
• Web标准规范的制定

二、详细知识点介绍：

• 关于前端开发

  • 起源

    "Suppose all the information stored oncomputers everywhere were linked.Suppose l could program my computerto create a space in which everythingcould be linked to everything." ——Tim Berners-Lee 假设存储在各地计算机上的所有信息都是连接的，假设我可以给我的电脑编程，创造一个空间，在这个空间里，一切都可以联系在一起。”

    “上网”即接入Internet，一个由世界上相互连接的计算机构成的网络，其标志性的通信协议是TCP/IP。

  • 架构

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

  • 变迁

    1989-2004 只读时代（HTML CSS JavaScript）

    2005-2010 体验时代（Ajax Web API iQuery）

    2010-2021 敏捷时代（Fetch Node.js Webpack）

    

  • 学习路线图

    

    学习浏览器推荐阅读：Inside look at modern web browser (part 1) | Web | Google Developers

    深入理解现代浏览器

    学习网络推荐阅读：An overview of HTTP - HTTP | MDN (mozilla.org)

• 前端应用的领域

  总的来说是面向企业、用户和开发者三大方向，为企业提供服务类网站，为用户提供信息分享平台，为开发者提供提高开发效率的工具。

  • 浏览器：包括桌面浏览器和移动浏览器，以及移动App中的WebView，都属于浏览器直接渲染Web应用的范畴;

    桌面浏览器包括Chrome、Edge、Firefox、Opera、Safari这五个主流浏览器，事实上随着谷歌Chromium开源项目的不断攻城掠地，也随着开源运动的不断属性，浏览器的多样性正在减少。因为Edge和Opera都已经选择站到了谷歌的阵营，所以事实上只有Chrome.Safari和Firefox三个浏览器。目前，Chrome浏览器的市场份_x0008_额达到67.55%，具有事实上的垄断地位。

    移动浏览器主要是Chrome、Safari，还有国内小程序提供商定制的一些浏览器引擎。换句话说，前端不仅要开发在浏览器和WebView中运行的网页，也要开发在小程序运行时上跑的小程序。

  • 服务器：服务端的开发目前主要还是依托于Node,js这个成熟的IS运行时，npm包管理平台已经成为世界最大的程序包管理平台,2019年6月超过100万。

    当然，还有Express、Koa等Web开发框架的生态。

    最后，大家也要关注Deno这个新的JavaScript安全运行时。Deno号称是安全运行时。而且，Deno也是Nodejs之父Ryan Dahl一手打造的。在发布Deno的时候,Ryan Dahl曾经痛陈""Nodejs十大遗憾”。

  • 终端和跨端：开发者工具，如命令行工具中的Webpack、Babel、React、Vue都有CLI（Command-Line-Interface）版，而桌面端主要有Electron和NW.js，目前世界上最流行的编码环境VSCode就是基于Electron的一个Web应用。

• 关于Web标准

  • Web标准组织

    

    • W3C: World Wide Web Consortium （通常意义上的Web标准）

      官网：www.w3.org/

      Github：github.com/w3c

      规范查询：www.w3.org/TR

    • Ecma: Ecma International（ECMAScript标准化规范）

      官网：www.ecma-international.org

      TC39：tc39.es

      Github：github.com/tc39

      Discourse（讨论组）：es.discourse.group

    • WHATWG: Web Hypertext Application Technology Working Group

      官网：whatwg.org/

      Github：github.com/whatwg

      规范查询：spec.whatwg.org/

    • IETF | Internet Engineering Task Force

      官网：www.ietf.org/

      Github：github.com/ietf

  • W3C规范制定流程

    The W3C Recommendation Track Process

    

    W3C规范的生命周期：

    • WD: Working Draft，即工作草案

    • CR: Candiate Recommendation，即候选推荐

    • PR: Proposed Recommendation,即提议推荐

    • REC: Recommendation，即推荐标准，推荐标准就是W3C的标住的最终形态，不是强制性标准。

四、课后个人总结：

都说前端入门简单，但要想真正理解每一步，开发者不仅仅需要会三大件，能用框架写点东西，更需要掌握Web标准，了解浏览器的基本工作原理，理解网络的传输，并能够不断探索新的技术和标准，这才是能构成前端工程师的核心竞争力的东西。这节课为之后前端学习做了一个清晰的梳理，也更清楚的意识到要想学好前端，不仅是3-5年的事。

五、引用参考：

青训营-Web 标准与前端开发PPT