前端知识-应用框架
应用框架
应用框架的任务包括: 引入状态管理方案, 做一套统一的布局, 抽象一个更好用的数据请求方法, 优化打包效率
应用框架的覆盖面:
- 基于React生态的Next.js, UmiJS, Modern.js;
- 基于Vue生态的Nuxt和Quasar;
- 自成一体的Astro和Angular;
- 专注于桌面应用的Electron, Tauri;
- 适用于小程序的Taro, uniapp;
- 应用于移动原生应用的React Native, Flutter和Ionic
应用框架包含的功能:
- 路由(routing) 规定页面的组织方式, 布局和跳转方式, 帮助框架更好地进行分包, 以提升运行时的加载效率
- 样式(styling) 是框架提供的一组CSS开发方案, 通常会包含CSS预处理器, CSS Modules, CSS-in-JS 和CSS框架
- 数据获取(data fetching) 通常包含内置请求库, 缓存, 服务端渲染等经过框架优化的方案
- 测试(testing) 专为框架制定的一套环境和测试工具, 方便开发者更优雅地编写测试代码
- 插件(plugin) 是框架为了方便开发者扩展其功能预留的口子, 通过它可以自定义构建行为
- 部署(deploying) 是框架提供的生产应用上线方案, 包含不同构建产物的生成配置, 静态资源部署, 全站应用部署方式等
应用架构是应用的组织范式, 关注不同范式间的优缺点.
常见应用架构方案有:
- MPA(Multi Page Application), 多页应用. 好处是业务划分清晰, 迭代变更影响面较小; 坏处是每次打开一个新页面都要等待加载
- SPA(Single Page Application), 单页应用. 一定程度上解决了用户在多个页面间切换需等待的问题, 但首次加载时白屏时间较长
- PWA(Progressive Web App), 渐进式Web应用. 采用Service Worker和离线缓存技术, 是最接近小程序的架构形式, 提供了类似原生应用的体验, 且白屏时间较短. 缺点是依赖浏览器, 无法像小程序一样访问原生平台功能
- MFE(Micro-Frontends), 微前端. 将多个独立开发的前端应用组成整体的架构风格. 能够帮助巨型单体应用持续迭代, 以及提高跨团队协作开发效率. 缺点是技术复杂度高, 用户体验差, 调试困难
- Islands, 群岛架构. 类似于微前端, 但粒度可以细化到组件级别, 并拥有更好的性能. 缺点是支持群岛架构的应用框架较少
一种应用框架可以支持不同的应用架构, 比如UmiJS支持SPA, MPA和MFE, Quasar支持SPA, PWA, Electron
