前端框架体系学习

89 阅读2分钟

前端框架

前端生态圈,多的是围绕视图库展开的,因为视图库就是前端框架的基础。因此,严格意义上来说,Vue、React都不是框架,只能算得上一个视图解决方案。

概念

前端框架,其实就是一个将技术栈方案、基础设施整合沉淀下来的方案,暴露标准、一致性的接口,提供了一个前端的组合配置和注入容器。当前较流行的框架:Angular、Next.js、Nuxt、Umi...

特点

要么更开放,几乎什么事都能干的插件机制;要么更决断,只提供必须的,其它的不需要管太多或者不必管;

优点

  • 提高效率,重业务开发;
  • 降低学习成本;
  • 预处理提高产品质量:统一的性能优化、安全性处理等;
  • 可维护性:便于升级迭代、标准化开发;

缺点

  • 灵活性降低;
  • 滞后性增强;
  • 冗余代码增多;

建设任务

前端工程化

应用类型

  1. SSR
  2. CSR:单页、多页应用,静态导出
  3. 微前端
  4. 其它平台:Electron、原生应用、混合应用、小程序等;

开发

  1. 项目管理
  2. Hot Reload
  3. 接口:Mock、代理
  4. 快速编译
  5. 调试:SourceMap、移动端调试
  6. 开发辅助:调试工具、生成器

OA

  1. 规范检查
  2. 测试套件
  3. 安全
  4. 性能优化:压缩、按需加载、prefetch等
  5. 兼容性

构建

  1. 文档
  2. Code spliting
  3. 买点
  4. 转义:Babel、TypeScript、Scss、静态资源等;
  5. 埋点

部署

  1. 部署模式:CDN、serverless、离线包、纯静态
  2. CI、CD

发布

  1. 监控
  2. 体验质量
  3. 测试

开发方案整合

  • 视图框架
  • 项目组织
  • 状态管理
  • 路由
  • 数据源
  • 主题
  • 国际化
  • 权限系统:鉴权、授权
  • 微前端
  • 基础组件库
  • 可访问性