前端架构 IMVC 实时热更新模式

 Backbone 框架的逐渐衰退，前端 MVC 发展缓慢，有被 MVVM/Flux 所取代的趋势

React/Vue 和 Redux/Vuex 分别在 MVC 中的 View 层和 Model 层大施展。

IMVC 代码在服务端和浏览器都可运行，单页面和多页页面应用都适用，可以这两种模式之间进行配置项自由切换。配合 Node.js、Webpack、Babel 完成项目开发

IMVC 的工程化设施：

• node.js 运行时，npm 包管理
• expressjs 服务端框架
• babel 编译 ES2015+ 代码到 ES5
• webpack 打包和压缩源码
• standard.js 检查代码规范
• prettier.js + git-hook 代码自动美化排版
• mocha 单元测试

实现代码实时热更新：

目标：一个命令启动开发环境，修改代码不需重启进程 
做法：一个 webpack 服务于 client，另一个 webpack 服务于 server 
client: express + webpack-dev-middleware 
server: memory-fs + webpack + vm-module

CSS 按需加载：

根源：浏览器只在 dom-ready 之前会等待 css 资源加载完成后再渲染页面 
描述：当单页跳转到另一个 url，css 资源还没加载完，页面显示成混乱布局 
处理：将 css 视为预加载的 ajax 数据，以 style 标签的形式按需引入 
策略：用 context 缓存预加载数据，避免重复加载

代码切割、按需加载：

• 不使用 webpack-only 的语法 require.ensure
• 在浏览器里 require 被编译为加载函数，异步加载
• 在 node.js 里 require 是同步加载

命令行任务：

• 使用 npm-scripts 在 package.json 里完成 git、webpack、test、prettier 等任务的串并联逻辑
• npm start 启动完整的开发环境
• npm run start:client 启动不带服务端渲染的开发环境
• npm run build 启动自动化编译，构建与压缩部署的任务
• npm run build:show-prod 用 webpack-bundle-analyzer 可视化查看编译结果

redux 的简化版 relite

简化版的 redux，叫做 relite。

• actionType, actionCreator, reducer 合并
• 自动 bindActionCreators，内置异步 action 的支持

IMVC 的技术选型

• Router: create-app = history + path-to-regexp
• View: React = renderToDOM || renderToString
• Model: relite = redux-like library
• Ajax: isomorphic-fetch

IMVC 的目标是框架层面

• 用法简单，初学者也能快速上手
• 只维护一套 ES2015+ 的代码
• 既是单页应用，又是多页应用（SPA + SSR）
• 可以部署到任意发布路径 (Basename/RootPath)
• 一条命令启动完备的开发环境
• 一条命令完成打包/部署过程