koa-cola:只需一个react组件,同时支持单页应用(SPA)和服务器渲
koa-cola是一个基于koa和react的服务器端SSR(server side render)和浏览器端的SPA(single page application)的web前后端全栈应用框架。 koa-cola使用typescript开发,使用d-mvc(es7 decorator风格的mvc)开发模式。另外koa-cola大量使用universal ("isomorphic") 开发模式,比如react技术栈完全前后端universal(server端和client端均可以使用同一套component、react-redux、react-router)。 koa-cola的开发风格受sails影响,之前使用过sails开发过大型的web应用,深受其约定优先配置的开发模式影响。 特点
如何使用koa-cola支持node.js的版本包括7.6和8,建议使用8,因为8.0使用的最新的v8版本,而且8.0会在今年10月正式激活LTS,因为koa-cola的async/await是原生方式使用没有经过transform,所以不支持node7.6以下的node版本。
视频演示 对比next.jsnext.js是一个比较流行的也是基于react的SSR的应用框架,不过在react技术栈,next.js只支持component和react-router,并没有支持redux,在服务器端,也没有太多支持,比如controller层和express/koa中间件,服务器端只是支持简单的路由、静态页面等,koa-cola则是提供前后端完整的解决方案的框架。 在数据初始化,两者有点类似,next.js使用静态方法getInitialProps来初始化数据: import React from 'react' export default class extends React.Component { static async getInitialProps ({ req }) { return req ? { userAgent: req.headers['user-agent'] } : { userAgent: navigator.userAgent } } render () { return <div> Hello World {this.props.userAgent} </div> } } koa-cola提供两种方式来进行数据初始化,更加灵活。 而且,next.js不支持子组件的数据初始化:
koa-cola则只需要加上decorator "include",完全支持所有的子组件的数据初始化。 import * as React from 'react'; var { asyncConnect,include } = require('koa-cola').Decorators.view; // Child1,Child2 是asyncConnect的组件,并且会进行数据初始化 var Child1 = require('../components/child1').default; var Child2 = require('../components/child2').default; export interface Props {} export interface States {} @asyncConnect([]) @include({ Child1,Child2 }) class MultiChildren extends React.Component<Props,States> { constructor(props: Props) { super(props); } render() { return <div> <Child1 {...this.props} /> <Child2 {...this.props} /> </div> } } export default MultiChildren; koa-cola不但可以支持component的数据初始化,还可以合并page和component的reducer,使用同一个store,page和component的redux无缝结合。详细可参考多子组件的redux页面例子源码和在线Demo Examples使用官方react-redux的todolist作为基础,演示了官方的和基于koa-cola的例子(完整的mvc结构) demo依赖本地的mongodb online demo 使用方法:
更多详情请查看官方文档 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |