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

141 阅读3分钟

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

起源:计算机网络诞生于60年代,标志性通信协议是TCP/IP; 1989诞生时,主要由HTMLHTTP、URL三种技术构成

Image1.gif

设计者
Web技术:Tim Berners-Lee - WikipediaW3C-Tim Berners-Lee
互联网技术:Vint Cerf - Wikipedia

论文
Information Management: A Proposal
📎Information_Management_A_Proposal.pdf

Information Management: A Proposal的提案涉及欧洲核子研究中心加速器和实验的一般信息管理。它讨论了有关复杂演化系统的信息丢失问题,并得出了基于分布式超文本系统的解决方案。

应用领域

用户:Buiness Customer Developer
平台:各大浏览器、移动端、小程序
服务端

Deno:基于V8引擎的JavaScriptTypeScriptWebAssembly现代运行时环境
Node.js:基于Chrome的V8的JavaScript 引擎构建的 JavaScript 运行时
Koa:Express团队打造的下一代网络应用程序框架
Express:一个最小且灵活的 Node.js Web 应用程序框架

命令行、终端

Webpack CLI:JavaScript打包、插件生态丰富、自定义配置会相对复杂
Babel CLI:JavaScript编译器,编译2015+语法以兼容更低版本浏览器,通过Polyfill引入支持使用最新语法与特性
Vue CLI:基于Webpack零配置Vue项目启动器
Create React App-React CLI:React一键安装Create项目

桌面跨端

Electron:使用 JavaScriptHTMLCSS 构建跨平台的桌面应用程序
NW.jsHTML5CSS3WebGL 编写原生应用,支持调用Node模块
Flutter:基于Dart支持mobile, web, desktop, and embedded多端
React Native:React声明式UI框架,支持IOS和Andriod原生应用

小程序端

Uniapp / Taro / mpvue

多平台可以考虑用框架、最好是原生,微信开发者社区活跃

变迁

只读时代(1989-2004)
技术HTMLCSSJavaScript 特点:单向发布、静态只读、链接跳转、刷新页面、表格对齐元素、CGI
体验时代(2005-2010)
技术AjaxWeb ApijQuery 特点:动态交互、社交媒体、UGC、SPA、jQuery、YUI
敏捷时代(2010-2022)
技术FetchNode.jsWebpack 特点:模块化、组件化、转译、打包、框架、低代码、微前端

语言、框架、工具

语言HTMLCSSJavaScriptTypeScriptWebAssembly
框架了解框架作者、通过社区、视频关注框架初衷、理解框架定位、应用、原理

2022 JavaScript Frameworks

Top-JavaScript-Frameworks.png

工具
编辑器Visual Studio Code / WebStorm
编译BabelSWC
打包
2022-JavaScript Build Tools
ESbuild:快速JavaScript打包器
TSdx:TypeScript包开发的零配置
Snowpack:更快的前端构建工具
Webpack:Javascript打包器
Rollup:下一代 ES 模块打包器
版本管理Git

前端知识图谱

前端开发图谱Frontend Developer
前端知识图谱

截屏2022-07-31 下午4.21.54.png

浏览器、网络、服务器
深入理解浏览器原理(值得阅读)

fetching_a_page.png

浏览器GPU渲染-合成图层
深入了解现代 Web 浏览器
解析器中的错误处理和奇怪情况简介
HTML解析模型概述

Web标准

web标准内容:W3C、Ecma International、W3C和Ecma International会员、W3C和TC39规范流程
Web标准组织官网W3CEcma InternationalWHATWGIETFietf es group
Web标准GithubW3CEcma InternationalWHATWGIETF
Web标准规范W3CEcma InternationalWHATWGIETF

Web标准制定流程
  • W3C制定流程: WD(草案)-- CR(候选) -- PR(提议) -- REC(推荐)

截屏2022-07-31 下午4.41.11.png

W3C与Ecma International会员

Member List / members / china-members

参考

你应该了解的前端标准化
W3C规范制定流程

总结:本文笔记因平台提示报错导致好不容易记录的内容全丢失了,然后带着记忆重新编写,😔,建议每一位创作者在刷新网页时一定要备份,防止自己的话费的时间和心血丢失。