开始
前前后后玩了不少前端框架，今天推荐一套感觉用起来很舒服的前端架构：UMI+MOBX+ANTD。主要是针对PC端的。ANTD也可以改成ANTDMOBIE，用来开发移动端网页。UMI所说也有支持react-native的计划，意味着以后可以利用这套框架开发APP。
快速搭建
umi架构图umi作为这套架构中的核心部件，基于react，内置了许多一般常用的组件，比如react，preact，webpack，react-router，babel，jest等。意味着你只需要添加一具umi的依赖，就可以使用它内置这些所有的组件，并且，不需要去注意它们之间是否有什么冲突，因为这是umi已经测试好的。（有没有SpringBoot的感觉？）
约定式路由
玩过next或nuxt的，都应该对约定式路由不陌生。（这玩意儿杂这么顺手呢？）。umi也支持约定式路由，不需要自己去写路由，pages下的目录和文件会自动生成路由配置。同时，也支持使用$来生成动态路由。同时，umi也支持配置式路由。这里有一个有趣的点是，umi允许你以yaml的格式，在某个文件上添加注释，来影响路由的行为或约定，扩展路由。
全局layout
umi有很多类似于SpringBoot的感觉，比如，它也遵循约定优于配置的原则。src/layouts/index.js约定为全局的根组件。你不需要去显示的引入它，这是一个默认的约定。同时，它也是一个全局路由。这意味着，你可以在这个文件里，完成权限校验等相关的工作，另外，比如ANTD的多语言选择，也可以在这里完成。
全局样式
gobal.less被约定为全局样式，你可以在这里覆盖一些默认的样式，也可以自定一些通用的全局样式。这个文件也是约定的，不需要你显示的引入。当然，你也可以global.css，global.sass或global.scss。
HTML模板
document.ejs为默认的html模板。在这里，你可以设置全局的title等信息，也可以引入一些其它的样式或js文件，比如说iconfont的样式文件等。
.js为默认的错误提示页模板。通过它，你可以覆盖默认的页面。
支持Redux
redux是一种思想，而不是框架或技术。放在具体的前端应用来说，就是把一个完整的页面分成视图、动作和状态。状态即数据，视图即展示给用户的样式，动作即和用户的交互。有点类似于SpringMVC的分层思想。通过分层后，前端的架构更加清淅，代码的组织方式也更加合理明确。这里，我们引用mobx来配合umi使用。（当然，dua也可以。官方推荐是dua。）mobx通过创建一个额外的store文件用于写状态和动作相关的内容，再通过注解的方式把视图和状态、动作绑定起来，用起来也是有非常的舒适感。（尤其是用于JAVA注解的人）。
支持MOCK
这套框架支持mock。你只需要在mock文件夹下添加相应的文件，文件中根据接口，以对象的形式，定义好mock数据，就可以直接使用。特别时候前后端分离的开发模式，尤其是有文档优先习惯的团队使用。
TIPS
接下来，分享一下在使用这套框架时的实践小技巧给大家。
package.json
我目前项目的package.json文件如下：
在umi，mobx，antd的基础上，引入antd-img-crop作为切图工具，braft-editor作用富文本编辑器，cross-fetch作为异步请求工具，引入了moment配合antd的日期组件使用，引入md5，作加密用。
启动端口
注意package.json文件中的start命令行，在这里，可以设置启动时的端口。
代理，路径别名，主题
.umirc.js为基础配置文件，在这里，可以配置antd的主题，通过less变量的形式配置。可以配置别名，这样就不需要在文件中使用一堆../之类的相对路径。可以配置代理，解决与服务端交互时的跨域等问题。
全局配置
.umirc.js是框架的全局基本配置。为了使用上的方便，我另定义了一个config.js，用于作一些业务角度上的全局配置，如登录验证码启用，短信发送间隔，默认首页等。
可配置首页
默认情况下，pages/index.js即为网站的首页，为达到首页可配置的网站，我在index.js的constructor构造方法中，通过读取配置的方式，进行了一个跳转的判断，以达到首页可配置的目的。
优雅的消息提示框
在异步请求时，通常需要通过message的方式，给用户弹出一些消息提示。有时候会发现，同时进行多个异步请求时，会同时弹出多个提示。事实上，从用户角度来说，同时弹出多个提示是没有什么意义的。用户反而会不清楚，到底哪个操作（接口）出了问题。所以，利用antd的message组件，封装了一个message工具类，通过全局变量的方法，以达到同一时间只有一个message提示弹出的目的。
最后
前后端分离的大背景下，越来越来富前端化。大量的优秀的前端框架的涌现，总有种挑花眼的感觉。其实，最适合自己的，自己用得最顺手的，才是最好的。如果你已经有了一套自己用得最舒适的框架，可以拿出来分享，如果你还在寻找，那么可以尝试一下这套框架。复制package.json，执行npminstall即可。umi也提供了一个脚手架，帮助快速搭建umi应用，不过它默认提供的支持redux思想的组件是dua，而不是mobx。后续会有一个以此框架作为前端架构的开源项目发布，欢迎老铁们到时候星星点亮哟。