前端技术的十八年风雨

今日头条长视频《前端技术的十八年风雨》内容摘要，了解前端技术发展的历史脉络。干货满满~欢迎点赞收藏！

前端技术的十八年风雨

• 2006前
  • 技术趋势
    • 前端现状
      • 静态页面
      • 切图仔
      • 美工
    • 后端主导Web开发
  • 前端技术
    • Dreamweaver
    • 模板
• 2006
  • 技术趋势
    • 前端现状
      • 前端承担一部分页面交互处理任务
      • 给后端打辅助
    • 后端主导Web开发
  • 前端技术
    • DIV
    • JQuery
      • 封装JS
        • 处理HTML
        • 处理事件
        • 创建动画
        • AJAX
    • CSS
      • Sass
        • 功能
          • 变量
          • 嵌套规则
          • 混合继承
          • 函数
        • 预处理器
        • 编译器转化成CSS
  • 后端技术
    • JSP
    • PHP
      • “Web最好的语言”
    • Ruby
    • .Net
• 2009
  • 技术趋势
    • 前端工程化萌芽
  • 前端技术
    • ES5发布
      • 统一了标准
      • 增加方法特性
    • Node.js出现
      • 基于Chrome V8引擎
      • 用JS来写服务端程序
      • 非阻塞I/O模型
        • 高效处理并发
    • 自发出现规范
      • CommonJS(Node.js)
      • AMD(RequireJS)
      • CMD(SeaJS)
    • Less
      • 受Sass启发
• 2010
  • 技术趋势
    • 移动应用出现
    • 响应式Web设计
    • 前后端分离
      • 静态页面
      • 页面路由
      • 交互逻辑
    • 前端工程化
      • 民间自发努力
      • 完成工程化
  • 前端产品
    • AngularJS
      • 创新技术
        • 双向数据绑定
        • 依赖注入
        • 模块化
      • 历史作用
        • Web开发革命性变化
        • 奠定SPA框架基础
      • 评价
        • 精英框架
        • 后端思维设计前端框架
        • MVC思想
        • 学习曲线陡峭
        • 不太流行
  • 后端产品
    • Express
      • 创新技术
        • Node.js后端框架
          • Web应用
          • API
      • 历史作用
        • 用Node.js开发后端应用开始流行
    • NPM
      • 创新技术
        • Node.js包管理工具
          • 安装
          • 共享
          • 管理
      • 历史作用
        • 强大开源社区生态
• 2011
  • 技术趋势
    • 前端UI框架出现
  • 前端产品
    • Bootstrap
      • UI响应式框架
        • 宫格响应式概念
        • 预制丰富样式和组件
        • 前端UI框架前驱
• 2012
  • 技术趋势
    • 前端大型项目开发成为可能
  • 前端产品
    • TypeScript
      • 使能JS型项目开发
    • Webpack
      • 模块打包工具
    • Grunt
      • 模块打包工具
• 2013
  • 技术趋势
    • 前端开发组件化方向
  • 前端产品
    • React
      • 用途
        • 构建SPA交互界面
          • 虚拟DOM
          • 组件
          • 单向数据流
          • JSX语法
      • 意义
        • 改变前端开发方式
          • 组件化
          • 高性能
          • 高效率
    • Gulp
      • 构建工具
    • Koa
      • ExpressJS的下一代
        • 目的
          • 解决ExpressJS的缺陷
        • 优点
          • 异步编程
          • 代码清晰
          • 应用灵活
  • 跨平台产品
    • Electron
      • 技术组成
        • Chromium
        • Node.js
      • 用途
        • 跨平台桌面应用开发框架
        • 使用Web技术构建原生桌面应用
• 2014
  • 技术趋势
    • 前端进入了HTML5+CSS3时代
  • 前端产品
    • Vue
      • 技术特点
        • Angular优点
        • React优点
        • 社区活跃
    • HTML5标准
      • 技术特点
        • 满足需求
          • 交互性
          • 多媒体
          • 性能
        • 新特性
          • 语义化元素
          • 表单控件
          • 图形
          • 多媒体元素
          • Web API
    • CSS3
      • 技术特点
        • 新特性
          • 圆角
          • 阴影
          • 渐变
          • 动画
          • 过渡
          • 弹性布局
  • 时代里程碑
    • HTML5
    • CSS3
• 2015
  • 技术趋势
    • 日趋强大完善，涉足互联网每一片土地
    • JS不在是脚本而是一门语言
    • 前端开发者称为真正的工程师
  • 前端产品
    • ES6标准
      • 技术特点
        • JS语法改进
        • 类
        • 继承
        • Promise
        • 模块化标准
    • React Native
      • 技术特点
        • 基于React框架
        • JS语法
        • React语法
        • 原生移动应用
        • 跨平台
          • iOS
          • Android
    • GraphQL
      • 技术特点
        • API查询语言
        • 一个请求获取多个资源
        • 自描述
• 2016
  • 技术趋势
    • 各种轻量级框架出现
    • 开发高效便捷
  • 前端产品
    • Webpack
      • 技术特点
        • 支持ES Module
        • 主流模块打包工具
    • Next.js
      • 技术特点
        • 基于React轻量框架
        • 服务端渲染
        • 静态导出
        • 更好性能
        • SEO支持
    • Nuxt.js
      • 技术特点
        • 基于Vue的轻量级框架
        • 照搬Next.js的功能
    • Svelte
      • 技术特点
        • 现代化前端框架
        • 不采用VDOM
• 2017
  • 技术趋势
    • VDOM
    • CSS原子化
    • 为JS开发大型应用打下基础
  • 前端产品
    • Tailwind CSS
      • 技术特点
        • 原子化
        • Next.js框架的默认组件
        • Sass/Less完成了历史使命
    • Flutter
      • 技术特点
        • 跨平台移动应用框架
          • iOS
          • Android
          • Web
          • Desktop
  • 后端产品
    • Nest.js
      • 技术特点
        • 来源Angular框架
          • 模块化
          • 依赖注入
          • 装饰器
        • 构建服务端应用程序
        • Node.js生态中的框架
        • 支持TS开发大型应用
• 2018
  • 技术趋势
    • 小程序兴起
    • 跨端开发兴起
  • 前端产品
    • 小程序
      • 微信小程序
      • 钉钉小程序
      • 淘宝小程序
      • 飞书小程序
  • 跨平台产品
    • UniApp
      • 技术特点
        • 跨平台应用开发框架
          • iOS
          • Android
          • H5
          • 各平台小程序
        • 基于Vue
    • Taro
      • 技术特点
        • 基于React
        • 跨平台应用开发
        • 照搬UniApp
• 2019
  • 技术趋势
    • 小程序快速开发
• 2020
  • 技术趋势
    • 技术和生态已经成熟
  • 前端产品
    • Vue 3
      • 技术特点
        • 组合开发模式
        • TS支持
        • Composition API
    • Vite
      • 技术特点
        • 前端构建工具
        • 热模块更新
        • 按需编译
        • 填补Webpack性能瓶颈
• 2021
  • 技术趋势
    • 生态系统更加丰富
  • 前端产品
    • SvelteKit
      • 技术特点
        • 对应Next.js
        • 对应Nuxt.js
        • 丰富Svelte生态系统
• 2022
  • 技术趋势
    • 华为鸿蒙开发使用前端语言
  • 跨端产品
    • ArkTS
      • 技术特点
        • 鸿蒙APP开发
        • 基于TS扩展
• 2023
  • 技术趋势
    • 开倒车
  • 前端产品
    • Server Actions
      • 技术特点
        • 属于Next.js 14
        • 在组件编写服务端代码
        • 戏称Next.php
• 2024
  • 技术趋势
    • 渗透进各个领域
    • 投机褪去
    • 平静发展
  • 前端产品
    • “前端已死”
    • “前端永生”