前端设计综述

1. 架构模式的变迁

架构模式

• mvc
• mvp
• wpf
• mvvm

1.2 工具和框架

• jquery/dojo
• angular
• react
• vue

2. 设计语言

针对企业应用，狭义定义来说，设计语言就是针对企业应用的一套UI设计处理规则；
通过统一的处理规则，来达到应用在编写、展现、交互等方面的风格统一。

2.1 material design

Google Android material

• android风格衍生出来的设计语言
• 被广泛采用的一套设计语言，bootstrap等
• 有很多UI库都宣传是基于该模式设计的

2.2 fluent design

微软设计中心

• windows和office风格的设计语言
• 提供多种跨平台的设计指导
• 提供了针对figma和sketch的设计包
• 提供了React的UI库

2.3 edge-to-edge flat design

Apple有自己的扁平化语言（flat）／edge-to-edge

2.4 Ant design

• 阿里巴巴公司设计语言
• 提供vue & react的实现组件库

3. 前端工程化

3.1 前端开发需要什么？

• html
  校验、压缩
• js
  校验、混淆、压缩、模块化、polyfill、[预编译]等等，还需要一个小型的server
• css
  预编译、压缩、polyfill等

3.2 基于任务(TASK)的构建工具

• grunt
• gulp

3.2 基于依赖的构建工具

• webpack

4. 面向未来

4.1 TypeScript的价值？

• 动态类型脚本语言的痛苦
• 软件架构设计

4.2 跨平台应用开发flutter

5. 总结

1. 架构模式的变更，促成了框架不断的推陈出新；
2. 流行与时尚，促进了设计语言的变更；
3. 设计师的观点不同，早就了各异的设计语言；
4. 框架+设计语言等于UI库；UI库百花齐放；