React MVC全棧框架 -@symph/joy,MVC依賴注入、服務端渲染、靜態化、零配置等

@symph/joy

介紹

官網:https://lnlfps.github.io/symph-joy

@symph/joy讓我們輕鬆的進行前端應用開發,零配置可用,簡單清晰的業務和數據管理模塊,已集成大量最佳實踐的優化方案,即使你纔剛接觸React,也可以輕鬆創建高可用、可維護的前端應用。

該項目已在生產環境大量使用,如有任何疑問、使用幫助、bug反饋、特性討論,請和我們聯繫(郵件:[email protected]; QQ羣:929743297),或者到github創建issue,歡迎加入。

特徵

  • 零配置可用,優化的默認配置,快速開發,已集成react、redux、react-router4和ES6、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>

到目前爲止,一個簡單完整的前端應用已經創建完成,可以開始工作了。還有很多神奇的特性,請查看 詳細使用指南

文檔

https://lnlfps.github.io/symph-joy

快速連接:

聯繫我們

郵件:[email protected]
QQ羣:929743297

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章