1.1前端的起源、架构及变迁
- 起源: 最早从1989年Tim Berners-Lee的一篇建议开始说起,它被公认为web开发技术的起源。这篇建议设想存储在任何一台计算机的信息都是相互链接的,又设想自己写一个程序,让所有的事情都能相互连接到一起(万物互联)
补充:我们平时讲的上网,其实是指接入Internet,它是地球上互相连接的计算机构成的网络。计算机网络诞生于20世纪60年代,标志性通信协议是TCP/IP。
- 架构: 1989年Web诞生时由HTML、HTTP、URL构成
- 变迁:
只读时代(1989-2004,HTML、CSS、JavaScript;这一时期主要是静态页面)
- 单项发布
- 静态只读
- 链接跳转
- 刷新页面
- 表格补齐
- CGI
体验时代(2005-2010,Ajax、Web API、jQuery;Web这一时期在不刷新的情况下动态展示数据)
- 动态交互
- 社交媒体
- UGC
- SPA
- jQuery
- YUI
敏捷时代(2010-至今,Fetch、Node.js、Webpack;重视用户体验)
- 模块化
- 组件化
- 转译
- 打包
- React和Vue
1.2 前端的应用领域
从接触的人员来看
- To Business 企业级应用:银行,互联网公司。做网站提供服务管理资源
- To Customer(用户) 在线教育,生活娱乐等
- To Developer(开发者) 面向开发者的工具、结构,各大工具链,帮助开发者提高开发效率
从浏览器来看
-
桌面浏览器:chrome,edge,firefox等等
-
移动浏览器:android、safari等等
服务器
nodejs、Express、koa等等
终端和跨端
- 终端有Webpack Babel Vue React的CLI
- 跨端:
- 桌面跨端有Electron,NW.js
- 移动跨端有RN和Flutter
1.3 开发中常用的语言框架及工具
- 语言: HTML、CSS、JavaScript WebAssembly可以把C++、C、Rust编写的代码转为二进制文件在浏览器运行。
- 框架: Webpack Babel Vue React TS Nodejs git等等 学习某一框架之前可以先去了解一下该框架的作者和写这个框架的目的
- 浏览器、网络、服务器
- 深入理解现代浏览器 前端在地址栏输入一个地址后,计算机是怎么运行的,这背后都发生了什么,前端人员要知道啥,这篇文章都能帮你解决。
- An overview of HTTP 这篇文章详细讲解了http的运作过程和一些计算机网络的知识。
1.4 前端学习路线推荐
(看了一下真的还挺经典的,里面还有后端的加油!)
1.5 Web标准
-
W3C: World Wide Web Consortium
- 官网: www.w3.org
- Github: github.com/w3c
- 规范查询: www.w3.org/TR
-
Ecma: Ecma International
- 官网: 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/
-
ETF: Internet Engineering Task Force
- 官网: www.ietf.org/
- Github: github.com/ietf