web标准与前端开发 | 青训营

一、关于前端开发

前端的起源和架构

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

• HTML
• HTTP
• URL

CSS和Javascript是几年后才出现的,与HTML一起被称为前端的三驾马车。

前端的变迁

1. 只读时代（1989 - 2004）

HTML/CSS/JavaScript

• 单向发布
• 静态只读
• 链接跳转
• 刷新页面
• 表格对齐元素
• CGI

2. 体验时代（2005 - 2010）

Ajax/Web API/jQuery

• 动态交互
• 社交媒体
• 用户生成内容（UGC）
• 单页应用（SPA）
• jQuery
• YUI

3. 敏捷时代（2010 - 2023）

Fetch/Node.js/Webpack

• 模块化
• 组件化
• 转译（transpiling）
• 打包（bunding）
• React.js
• Vue.js

前端应用的领域

- To Business: 针对组织机构和企业所开发的企业级应用或网站。

- To Customer: 针对客户的门户网站、电商平台等的应用。

- To Developer: 针对开发者，提升开发者开发、调试、运维的速度和便捷性。

浏览器：

Google Chrome、Firefox、Safari、Opera、Brave、 Edge （Desktop）

Chrome、Safari （Mobile）

服务器：

Node.js、Express.js、koa

终端和跨端：

• 命令行/终端：Webpack CLI、Bable CLI、Vue CLI、React CIL
• 桌面跨端：Electron、NW.js
• 移动跨端：React Native、Flutter

总结

前端技术的历史可以追溯到1989年，最初由HTML、HTTP和URL构成，后来加入了CSS和JavaScript，共同构成了前端开发的基础。

前端经历了几个关键时代的演变：

• 只读时代（1989 - 2004）： 这个时期Web主要是静态只读的，以HTML、CSS和JavaScript为基础，用户进行简单的页面浏览和刷新。
• 体验时代（2005 - 2010）： 引入了Ajax技术和jQuery等工具，实现了动态交互和用户生成内容，开启了社交媒体的崛起。
• 敏捷时代（2010 - 2023）： 这一时期前端开发变得更工程化，引入了模块化、组件化、转译和打包等现代化概念，框架如React.js和Vue.js推动了组件化开发的兴起。

前端应用领域包括面向企业的业务应用、面向客户的门户网站和电商平台，以及面向开发者的开发工具和框架。

前端技术也应用在不同的环境中，包括各种桌面浏览器、移动浏览器，服务器端（Node.js、Express.js、koa等），以及跨终端开发（桌面跨端和移动跨端）。

这些演变和应用领域的变化表明前端开发已经成为构建现代互联网应用的关键领域，从最初的简单页面到现在的复杂应用，前端技术一直在不断演进，以满足不断变化的需求。