听红宝书译者谈Web视角下的前端开发

Web视角下的前端开发

  • ⏳序言
  • ⏰一、关于前端开发
    • 1. 起源、架构、变迁
      • (1)起源
      • (2)架构
      • (3)变迁
    • 2. 前端应用的领域
      • (1)所面向群体
      • (2)所面向领域
    • 3. 语言、框架、工具
    • 4. 浏览器、网络、服务器
    • 5. 前端学习路线图
  • ⏱️二、关于Web标准
    • 1. 了解Web标准组织
      • (1)四个概念
      • (2)概念细述
        • 1)W3C
        • 2)Ecma TC39
        • 3)WHATWG
        • 4)IETF
    • 2. W3C与Ecma会员
    • 3. W3C规范制定流程
    • 4. Ecma TC39规范制定流程
  • 🕰️三、结束语
  • ⏲️往期推荐

⏳序言

前段时间参加了青训营,很荣幸听到了红宝书作者——李松峰老师的课,同时呢,在一次班会上,还见到了李老师真人👋

除此之外呢,还拿到了李老师犀牛书的亲笔签名😉

犀牛书亲笔签名

废话说太多啦!下面就让我们跟着李老师的步伐,一起来探索 Web 世界的前端开发~

⏰一、关于前端开发

1. 起源、架构、变迁

(1)起源

Web 起源于 1984 年,当时 Tim Berners-Lee 发布了一篇论文,随着这篇论文的发表,随之也代表了 Web 的诞生。

我们来看一下作者写的一句话:

“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

下面附上论文的网页版和 PDF 版本:

👉论文网页版

👉论文 PDF 版

很多人分不清 “上网” 是上的哪个网?即使在互联网的诞生地也是如此。Web的普及和深入人可见一斑。

上网,其实指的是接入Internet,它是地球上相互连接的计算机构成的网络。计算机网络诞生于上个世纪的 60 年代,标志性通信协议TCP/IP

 2019年3月-30th Anniversary of Web

(2)架构

1989年诞生时,Web由三种技术构成: HTMLHTTPURL

CSSJavaScript 是几年之后才出现的。

架构

(3)变迁

对于 Web 来说,有三个比较重要的变迁时期。分别是:

  • 只读时代
  • 体验时代
  • 敏捷时代

如下图所示:

变迁

2. 前端应用的领域

(1)所面向群体

对于前端应用来说,主要面向三类用户。分别是: to Bto Cto Dto B 表示的是面向商业to C 表示的是面向用户to D 呢,表示面向开发者

(2)所面向领域

前端应用的领域之浏览器

前端应用领域之浏览器篇

前端应用的领域之服务器

前端应用领域之服务器

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

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

3. 语言、框架、工具

我们用两张图来看看实际开发中常用的一些编程语言、框架以及工具。具体如下图:

语言、框架和工具

语言、框架和工具

4. 浏览器、网络、服务器

除了上面谈到的,我们还要了解到浏览器中的一些内容。如下图所示:

深入理解现代浏览器

文章传送门:深入理解现代浏览器

同时,我们也要了解一些 HTTP 相关的知识。如下图:

12-HTTP概览

文章传送门:An overview of HTTP

5. 前端学习路线图

对于前端来说,学习路线依据下图:

前端学习路线图

对应网站链接:https://roadmap.sh

在这个网站中,基本上涵盖了所有方向的学习路线图,大家可以根据自身需求进行查看~

⏱️二、关于Web标准

1. 了解Web标准组织

(1)四个概念

对于 Web 标准来说,我们需要了解以下几个概念:

  • W3C: World Wide Web Consortium
  • Wcma: Ecma International
  • WHATWG: Web Hypertext Application Technology Working Group
  • IETF: Internet Engineering Task Force

(2)概念细述

下面我们就上面这四个标准来了解一些相关的内容。

1)W3C

  • 官网:https://www.w3.org
  • Github:https://github.com/w3c
  • 规范查询:https://www.w3.org/TR

2)Ecma TC39

  • 官网:https://www.ecma-international.org
  • TC39:https://tc39.es
  • Github:https://github.com/tc39
  • Discourse:https://es.discourse.group

3)WHATWG

  • 官网:https://whatwg.org/
  • Github:https://github.com/whatwg
  • 规范查询:https://spec.whatwg.org/

4)IETF

  • 官网:https://www.ietf.org/
  • Github:https://github.com/ietf

2. W3C与Ecma会员

  • W3C目前在全球有 444 家会员,其中北航总部(中国区)会员46家。
  • Ecma的AM(Associate Member)会员目前有18家,中国公司有字节跳动、360、阿里、华为、腾讯等5家。

3. W3C规范制定流程

现在,我们来了解一下 W3C 规范的制定流程,具体如下图:

w3c规范制定流程

文档传送门:w3c规范制定流程

4. Ecma TC39规范制定流程

继续,我们来了解 ECMA 规范的制定流程,具体如下图:

ECMA规范制定流程

文档传送门:ECMA规范制定流程、ECMA规范核心术语

🕰️三、结束语

到这里,我们就简单的了解了 Web 视角下的前端开发。不知道大家对 Web 前端开发有了一个更深入的了解呢?

如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😛

⏲️往期推荐

👉值得关注的HTML基础知识

👉css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!

👉前端只是切图仔?来学学给开发人看的UI设计

👉紧跟月影大佬的步伐,一起来学习如何写好JS(上)

👉紧跟月影大佬的步伐,一起来学习如何写好JS(下)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307869.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在家办公这半年,让我开始热爱生活

距离上次更新公众号已经过去一年多了,感觉自己成了“年更姚”。不过好在这个公众号的读者大多是同事朋友(加起来也没有多少好么喂),本身对我也没用太高的期待吧。今天想聊聊远程工作这件事。不过我并不想聊团队成员之间如何远程协…

每天都在红绿灯前面梭行,不如自己来实现个红绿灯?

用js实现一个交通灯🔇前言🔈一、需求分析 - 交通灯🔉二、实现版本1. 版本一:简单粗暴版2. 版本二:数据抽象版3. 版本三:过程抽象版4. 版本四:命令式和声明式🔊三、在线online&#x…

Git 常用操作 | 重写 commit 历史

当我们修改完代码,提交了一个 commit,然后发现改错了,怎么修正?这种情况分为两种:修正最近一次提交,和修正历史多个提交。修正最近一次提交如果发现刚刚提交的内容有错误,当场再修改一下再提交一…

leetcode257. 二叉树的所有路径(两种做法)

一:题目 二:上码 1:DFS /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), …

【LeetCode之C#解法】 移动零、爬楼梯

题目官网链接https://leetcode-cn.com/problems/move-zeroes/283. 移动零给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。示例:输入: [0,1,0,3,12]输出: [1,3,12,0,0]说明:必须在原数组上操作,不能拷…

幂等问题 vs 如何判断是否是4的幂

判断是否是4的幂🤹序言🚴一、需求分析 - 判断是否是4的幂等🤾二、实现版本1. 版本一:中规中矩法2. 版本二:按位与3. 版本三:按位与优化4. 版本四:正则匹配法⛹️三、结束语🤼往期推荐…

leetcode404. 左叶子之和

一:题目 二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(n…

切西瓜法实现微信抢红包功能

运用切西瓜法和栅栏法实现微信抢红包功能✅前言☑️一、需求分析 - 分红包问题🆙二、实现版本1. 版本一:切西瓜法2. 版本二:栅栏法✳️三、在线Online🆗四、结束语🆚往期推荐✅前言 在现实生活中,非常常见…

如何给扑克洗牌才能更公平?

如何给扑克牌洗牌才能更显公平性📻前言一、🎙️需求分析 - 洗牌问题二、💿实现版本1. 版本一:常规思维2. 版本二:验证公平性3. 版本三:交换法则三、📺在线Online四、📹结束语&#x…

这些年我是怎么自学成架构师的(转自知乎)

近日在知乎上一则关于程序员能否“自学成才”的问题,引发了激烈的讨论!各种各样的说法都有,最终变成程序员晒学习经历的帖子。作为十多年.NET技术老兵,纯自学成架构师,也来分享下观点:自学当然有效&#xf…

创新视角下的复盘 | 2021/08/01-2021/09/30

🗂️序言 七月份的时候第一次做月度复盘,发现如果只有每日计划,还是比较零散的。月度复盘可以更直观地看到自己的时间规划和及时纠正当下存在的一些问题。 在8-9月份中,有一半在暑假,一半开始于新学期。 &#x1f4…

TIOBE 9 月榜单:C#上涨1.18,Java 同比下滑3.18

喜欢就关注我们吧!TIOBE 已公布 2020 年 9 月的编程语言排行榜。C 近期发展状态不错,依旧在榜单中排第四,但排名比率保持增长,本月为 7.11%。2003 年是 C 的巅峰时期,当年 8 月,它的 TIOBE 排名峰值为 17.5…

储存引擎InnoDB 索引选择 为何是B+树 而不是 B树 哈希表

一:概述 首先需要澄清的一点是,MySQL 跟 B 树没有直接的关系,真正与 B 树有关系的是 MySQL 的默认存储引擎 InnoDB,MySQL 中存储引擎的主要作用是负责数据的存储和提取,除了 InnoDB 之外,MySQL 中也支持 MyISAM 作为表…

初探react,用react实现一个todoList功能

初探react,用react实现一个todoList功能🛰️前言🚀一、react基础1. react简介2. 开发环境搭建3. 工程目录文件简介4. react中最基础的JSX语法🛸二、使用react编写TodoList功能1. 页面构思2. React中的响应式设计思想和事件绑定3. …

《五分钟商学院》个人篇学习总结(上)

【商业知识】| 作者 / Edison Zhou这是EdisonTalk的第285篇原创内容商业篇聚焦的是我们与外部的关系,管理篇聚焦的是我们与内部的关系,而个人篇聚焦的则是我们与自己的关系。与自己斗,其乐无穷,本文是个人篇的上半部分学习总结。本…

Git 实用操作 | 撤销 Commit 提交

有的时候,改完代码提交 commit 后发现写得实在太烂了,连自己的都看不下去,与其修改它还不如丢弃重写。怎么操作呢?使用 reset 撤销如果是最近提交的 commit 要丢弃重写可以用 reset 来操作。比如你刚写了一个 commit:写…

react只停留在表层?五大知识点带你梳理进阶知识

五大知识点带你梳理react进阶知识✉️前言📧一、props1、PropTypes与DefaultProps应用(1)PropTypes(2)defaultProps2、props,state与render函数📨二、React中的虚拟DOM1、什么是虚拟DOM&#xf…

解决 WPF 绑定集合后数据变动界面却不更新的问题

解决 WPF 绑定集合后数据变动界面却不更新的问题独立观察员 2020 年 9 月 9 日在 .NET Core 3.1 的 WPF 程序中打算用 ListBox 绑定显示一个集合(满足需求即可,无所谓什么类型的集合),以下是 Xaml 代码(瞟一眼就行&…

「offer来了」面试中必考的15个html知识点

「面试专栏」前端面试之html篇⚡序言⭐一、题集内容抢先看🌠二、规范相关1、你如何理解HTML结构的语义化2、浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢3、HTML W3C的标准4、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?5、vie…

leetcode700. 二叉搜索树中的搜索

一:题目 二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}*…