React全栈开发框架@symph/joy (webpack+babel+redux+MVC+依赖注入+Dva兼容+服务端渲染+插件化配置)

@symph/joy

介绍

官网：lnlfps.github.io/symph-joy

@symph/joy让咱们轻松的进行前端应用开发，零配置可用，简单清晰的业务和数据管理模块，已集成大量最佳实践的优化方案，即便你才刚接触React，也能够轻松建立高可用、可维护的前端应用。

该项目已在生产环境大量使用，若有任何疑问、使用帮助、bug反馈、特性讨论，请和咱们联系(邮件：lnlfps@gmail.com; QQ群：929743297)，或者到github建立issue，欢迎加入。

特征

• 零配置可用，优化的默认配置，快速开发，已集成react、redux、react-router4和ES六、7语法支持等
• MVC架构，模块化设计，使用Model简化redux的使用
• 依赖自动注入，专一组件内部实现，依赖关系更明确，方便调用
• 支持服务端渲染，在业务组件内部获取渲染数据，组件内聚更高，便于维护
• 支持静态版本导出，脱离Node.js运行，也可单独导出静态页面
• 全局支持aync语法，复杂的业务逻辑也能轻松找到解决方案
• 使用@装饰器将普通Class申明为Controller或Model等，不侵入业务代码
• 内置网络请求代理服务，解决跨域和服务中转问题，先后端分离开发畅通无阻
• 支持插件化配置，便于功能扩展

安装和开始

运行npm init建立一个空工程，并填写项目的基本信息，固然也能够在一个已有的项目中直接安装。

npm install --save  @symph/joy react react-dom
复制代码

@symph/joy 只支持 React 16及以上版本

添加NPM脚本到package.json文件：

{
  "scripts": {
    "dev": "joy dev"
  }
}
复制代码

而后就能够开始正式工做了，下面从hello world示例开始，首先编写一个Model组件来管理应用的数据和业务。

// /src/models/HelloModel.js

import model from '@symph/joy/model'

@model() // 标明这是一个Model。
export default class HelloModel {
  namespace = 'hello'
  
  // model的初始状态数据
  initState = {
    message: 'Welcome to @symph/joy!'
  }
  
  // async业务方法，从服务端异步获取新的欢迎消息
  async fetchMessage () {
    let newMsg = await fetch('/hello_message');
    //更新model的状态，界面的状态也会自动更新
    this.setState({
      message: newMsg
    });
  }
 
}
复制代码

接下来编写界面，展现欢迎消息。@symph/joy默认使用/src/index.js文件做为应用的启动入口组件，能够在这里初始化基础功能模块和设置子页面路由等。

// /src/index.js
import React, { Component } from 'react'
import {controller, autowire } from '@symph/joy/controller'
import HelloModel from './models/HelloModel'


@controller((store) => {             // 标明这是一个Controller
  return {
    message: store.hello.message,    // 绑定model中的数据
  }
})
export default class HelloController extends Component {

  @autowire()                       // 声明依赖的Model
  helloModel: HelloModel      
  
  async componentDidMount() {
    await this.helloModel.fetchMessage() //调用model
  }
  
  render(){
    return <div>${this.props.message}</div>
  }
}
复制代码

最后运行npm run dev命令，在浏览器中输入访问地址http://localhost:3000，便可看到刚才写的页面。若是须要使用其它端口来启动应用 npm run dev -- -p <your port here>

到目前为止，一个简单完整的前端应用已经建立完成，能够开始工做了。还有不少神奇的特性，请查看 详细使用指南

文档

lnlfps.github.io/symph-joy

快速链接：

• 使用指南
• 配置文档
• 插件列表
• 升级日志

联系咱们

邮件：lnlfps@gmail.com QQ群：929743297