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

用户9534627805481
112 阅读4分钟

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

重点

  • 前端开发：起源 架构 变迁
  • 前端应用的领域
  • 前端开发：语言 框架 工具
  • 前端开发：浏览器 网络 服务器
  • web标准：W3C Ecma

前端开发

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

起源

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

image.png

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

  • HTML

  • HTTP

  • URL
    ps：CSS和JavaScript是几年后才出现的。

只读时代 1989-2004

HTML CSS JavaScript

  • 单向发布

  • 静态只读

  • 链接跳转

  • 刷新页面

  • 表格对齐元素

  • CGI

体验时代 2005-2010

Ajax/Web API/jQuery

  • 动态交互

  • 社交媒体

  • 用户生成内容UGC

  • 单页应用SPA

  • jQuery

  • YUI

敏捷时代 2010-2021

Fetch/Node.js/Webpack

  • 模块化

  • 组件化

  • 转译transpilling

  • 打包bunding

  • React.js

  • Vue.js

前端应用的领域

领域.JPG

  • to business
  • to customer
  • to developer

浏览器

浏览器.JPG

从运营环境角度看一看，首先，浏览器，包括桌面浏览器和移动浏览器，以及移动App中的WebView，都属干浏览器直接渲染Web应用的范畴:

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

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

服务器

服务器.JPG 服务端的开发目前主要还是依托于Nodejs这个成熟的JS运行时，npm包管理平台已经成为世界最大的程序包管理平台，2019年6月超过100万。当然，还有Express、Koa等Web开发框架的生态。

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

终端和跨端

终端跨端.JPG 这个应用领域通常是开发者工具，比如命令行工具里的Webpack、Babel、React、Vue都有CLI(Com tmand-LineInterface)版，而桌面跨端主要有Electron和NWjs，目前世界上最流行的编码环境VSCode就是基于Electron的一个Web应用。

前端开发：语言 框架 工具

语言

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

框架

框架.JPG

工具

vscode，idea等

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

浏览器

工具.JPG “深入理解现代浏览器”，这篇文章以Chrome作为现代浏览器的示例，图文并茂在讲解了浏览器的工作原理，解释了在地址栏输入URL之后，回车，都会发生什么。 github.com/75team/w3c/…

网络

工具2.JPG HTTP的简介，涉及HTTP请求和响应的过程及概念。 developer.mozilla.org/en-US/docs/…

服务器

本地文件系统，文件操作等在后续课程

前端开发：学习路线图

学习路线图.JPG roadmap.sh/frontend

Web标准

了解标准组织

标准组织.JPG W3C

Ecma TC39

WHATWG

IETF

W3C Ecma会员

w3会员.JPG

W3C 规范制定流程

规范指定.JPG WD：Working Draft工作草案

CR: Candidate Recommendation候选推荐

PR：Proposed Recommendation提议推荐

REC：Recommendation推荐标准

推荐标准就是W3C的标准的最终形态 不是强制性标准

image.png demo：https://w3ctag.github.io/explainers api：https://webidl.spec.whatwg.org/

Ecma规范制定流程

exma流程.JPG

image.png github.com/tc39/ecma26…

总结

详细介绍了前端，对前端有了进一步了解

avatar
文章
阅读
粉丝