大前端

DOM tree

Virtual DOM tree

Canvans渲染

Widget Tree

Web统一UI渲染层

混合应用Cordova、Ionic 、小程序（H5 + 原生）

布局Flexbox

渲染架构

Javascript原生渲染（React-native、weex、Virtual View、快应用）

自绘原生（Flutter）

PWA （Web增强）

全平台、全渠道Taro

核心是跨平台技术

跨渠道渲染

小程序端

前端应用拆分成一个个更小、更简单的能够独立开发、测试、部署的小块，并明确它们之间的依赖关系

定义

微前端

可穿戴设备

VR/AR

Serverless（FaaS）

无服务器运算

前后端一体化

音视频（5G）

“大”前端的结构

NodeJS

Deno

JS运行环境

JIT即时编译

AOT预编译

编译器

React 18

React 16

React 15

React

Vue 3

Vue 2

Vue

Angular 13

Angular 12

Angular

Svelte

框架

Webpack5

Webpack4

Webpack3

Webpack

Rollup

Vite

工程构建

工具

qiankun

single-spa

MicroApp

Garfish

Midway Serverless

Serverless

Fabric

Formly

Form-Render

imove

xstate

stateview

低代码拖拉拽

React-native-fast-image

Android Glide

ios Nuke

ListView

开源解决方案

Javascript（Typescript）

C++

Rust

编程语言

React-native

图形转换、文字渲染、位图渲染方面都表现卓越，并提供了开发者友好的 API

Skia 图形库

Flutter 关注如何尽可能快地在两个硬件时钟的 VSync 信号之间计算并合成视图数据，然后通过 Skia 交给 GPU 渲染：UI 线程使用 Dart 来构建视图结构数据，这些数据会在 GPU 线程进行图层合成，随后交给 Skia 引擎加工成 GPU 数据，而这些数据会通过 OpenGL 最终提供给 GPU 渲染

Flutter

终端开发

前端工程化

BFF

在计算机系统中，图像的显示需要 CPU、GPU 和显示器一起配合完成：CPU 负责图像数据计算，GPU 负责图像数据渲染，而显示器则负责最终图像显示

基本原理

图像处理

补间 (Tween) 动画

动画效果

开发技术栈及开源方案

提升代码可复用

提高交付效率

“大前端”价值

组件库

模块化

脚手架

编译构建

团队技术建设之前端工程化

利用低代码平台提效

管理系统微前端集成

各大厂商 API 的梳理、权限的治理

多渠道流量分发-小程序

前端中间件BFF

虚拟化技术3D渲染

多语言

合规（例如欧洲GDPR）

不同市场发布

国际化业务Web建设

元宇宙体系下前端架构

页面性能优化

降本增效方法论

前端热点专项

服务监控体系

用户监控体系

NPS客户体验

埋点信息收集

技术数据指标体系

业务数据指标体系

前端用户体验建设

基金会项目包括：jQuery、Node.js、Appium、Dojo 和 Webpack

2019年成立OpenJs基金会

Nodejs

大事记

组织

社区

前端杂话

大前端