前端架构-单页面应用

前端架构原理

本章前半部分讲解了MVC、MVVM架构的原理,针对此部分内容,我整理了两篇文章:

前端架构选型

框架选型需要考虑的因素:

  1. 框架情况调研
    • 是否能满足大部分应用的需求?
    • 是否有丰富的组件库?
    • 社区支持怎么样?
    • 替换成本
  2. 团队是否能快速的掌握框架。
    • 根据不同基础的团队,降低学习成本。
  3. 框架的生态系统。
    • 足够的功能组件、库支持,保证开发专注于业务。
  4. 浏览器的兼容性。
    • 业务方向限定选择范围。
  5. 后期维护成本和难度。
    • 越大型的项目,越需要大而全的框架。
  6. 最小的迁移代价。
    • 框架间迁移项目
    • 框架的向下兼容性。

大而全还是小而美

  1. 大而全。(例如:Angular)
    • 优点:功能全,开箱即用,文档详细,规范准则多,代码质量高。
    • 缺点:体积大,上手成本、难度高,规范准则多。
  2. 小而美。(例如:React)
    • 优点:灵活性高,可定制度高,上手成本、难度底。
    • 缺点:维护成本高,代码质量低。

React

优点:不需要DOM操作、组件化思想、JSX模板、多平台领域支持。
缺点:为优化DOM操作而生,需要依赖其他库完成项目搭建。

Angular

优点:开箱即用,自带完整应用所需要的所有要素;完善的开发规范、指南。
缺点:需严格按照规范编码,相应的框架问题不易修改。

Vue

优点:上手难度低,可轻量化引用,
缺点:多依赖,维护成本高

启动前端应用

通用流程:

  • 寻找合适的脚手架(star)
  • 选择合适的UI框架/组件库。创建自己的组件库
  • 确认浏览器支持范围
  • 明确响应式设计需求
  • 服务端渲染。(作用:SEO、更快的页面渲染速度)

《前端架构:从入门到微前端》——知识点整理。


 本篇
前端架构-单页面应用 前端架构-单页面应用
前端架构原理本章前半部分讲解了MVC、MVVM架构的原理,针对此部分内容,我整理了两篇文章: 架构模式-MVC 架构模式-MVVVM 前端架构选型框架选型需要考虑的因素: 框架情况调研 是否能满足大部分应用的需求? 是否有丰富的组件库
2020-03-18
下一篇 
架构模式-MVVM 架构模式-MVVM
MVVMMVVM是Model-View-ViewModel的简写。 简介与原理 MVVM是一种架构模式,并非一种框架,是一种思想,一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。 前端MVVM
2020-03-15
  目录