从项目入口文件分析应用框架的设计及体验

@GuoYongfeng 2017-08-17 07:50:17发表于 iuap-design/blog

从项目入口文件分析应用框架的设计及体验

redux + router

import 'babel-polyfill'
import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'
import routes from './routes'
import './config'
import configure from './store/configureStore'
import myhistory from './history'

const store = configure({ config: global.$GLOBALCONFIG })
const history = syncHistoryWithStore(myhistory, store)
// history.listen(location => console.log('location:', location))
// history.listen(function (location) { return location })


ReactDOM.render(
  <Provider store={store}>
    <Router history={history} >
        { routes }
    </Router>
  </Provider>,
  document.getElementById('root')
);

dva

以下是一段基于 dva 的应用框架使用示例代码:

import dva from 'dva';
import {message} from 'antd';
import createLoading from 'dva-loading';
import './index.html';
import './index.css';

// 1. Initialize
const app = dva({
    onError(e, dispatch) {
        dispatch({type: 'app/logout'});
        console.log(e);
        if (e.message === 'Unauthorized') {
            message.info('Please Login :)', 5);
        } else {
            message.error(e.message, 5);
        }
    }
});

// 2. Plugins
app.use(createLoading({effects: true}));

// 3. Model
app.model(require("./models/app"));
app.model(require("./models/profile"));
app.model(require("./models/editor"));
app.model(require('./models/posts'));
app.model(require("./models/post_detail"));

// 4. Router
app.router(require('./router'));

// 5. Start
app.start('#root');

dva 是将 redux 、react-router、react-redux、redux-saga、react-router-redux、isomorphic-fetch 等方案进行集成封装的一款开源框架,基于elm 的概念,通过 reducers, effects 和 subscriptions 来定义具有一定格式规范的数据模型 model。并且支持插件机制,使用其在封装后还具备一定的扩展性。

所以,从上面的示例来看,逻辑是较为清晰的。同时,这也意味着,使用默认选型后的方案让开发者需要掌握相关的技能,比如对 redux 概念、异步编程方案、函数式编程都知识都是基础和前奏。

koa2

基于 koa2 的代码是什么样的:

'use strict';

import Koa from 'koa';
import logger from 'koa-logger';
import bodyParser from 'koa-bodyparser';
import cors from 'kcors';
import routes from './api';
import passport from './auth';


const app = new Koa();
app.use(logger());
app.use(cors());
app.use(bodyParser());
app.use(passport.initialize());
app.use(routes);

export default app;

koa 是基于 node.js 的框架,需要深入理解和实践 plugin 和 middleware中间件的思想。

vue

基于 vue2 + vuex 的启动代码:

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './config/routes'
import store from './store/'
import components from './components/' //加载公共组件

import './css/common.css'
import './less/common.less'

Object.keys(components).forEach((key) => {
    var name = key.replace(/(\w)/, (v) => v.toUpperCase()) //首字母大写
    Vue.component(`v${name}`, components[key])
})

Vue.use(VueRouter)

const router = new VueRouter({
    routes
})
router.beforeEach(({meta, path}, from, next) => {
    var { auth = true } = meta
    var isLogin = Boolean(store.state.user.id) //true用户已登录, false用户未登录

    if (auth && !isLogin && path !== '/login') {
        return next({ path: '/login' })
    }
    next()
})

new Vue({ store, router }).$mount('#app')

这是一种完全使用 vue 全家桶的做法,插件机制也能通过 use 这个 API 看到。不过整体来看,没有 dva 来的清爽。

tinper-mox

  1. 一段基于 tinper-mox 的应用框架使用示例代码:
import React from 'react';
import { createMoxApp } from 'tinper-mox';

// 1. root component 根组件
import App from './App';

// 2.model 引入创建的数据模型
import user from './models/User';
import todos from './models/Todos';

// 3.connect 连接
createMoxApp({
    component: App,  // Root Component
    container: '#app',  // DOM Container
    models: {
        user,
        todos
    },  
    middlewares, 
    relation
});

从一定程度上,tinper-mox 的理念更多是希望结合 vue + vuex 和 dva 两种方案的优点,并提供更加简单易懂的使用方式,前提是默认的方案及功能都有,并且具备扩展能力。