2.0.0-canary.6 • Published 3 years ago

@symph/joy v2.0.0-canary.6

Weekly downloads
67
License
MIT
Repository
github
Last release
3 years ago

@symph/joy

介绍

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

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

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

特征

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

安装和开始

运行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, Inject } from "@symph/joy/controller";
import HelloModel from "./models/HelloModel";

@controller((store) => {
  // 标明这是一个Controller
  return {
    message: store.hello.message, // 绑定model中的数据
  };
})
export default class ThirdHelloController extends Component {
  @Inject() // 声明依赖的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

快速连接:

联系我们

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

@ampproject/toolbox-optimizer@babel/code-frame@babel/core@babel/plugin-proposal-class-properties@babel/plugin-proposal-decorators@babel/plugin-proposal-export-namespace-from@babel/plugin-proposal-nullish-coalescing-operator@babel/plugin-proposal-numeric-separator@babel/plugin-proposal-object-rest-spread@babel/plugin-proposal-optional-chaining@babel/plugin-syntax-bigint@babel/plugin-syntax-dynamic-import@babel/plugin-transform-modules-commonjs@babel/plugin-transform-runtime@babel/preset-env@babel/preset-modules@babel/preset-react@babel/preset-typescript@babel/runtime@babel/types@hapi/accept@next/polyfill-nomodule@next/react-dev-overlay@next/react-refresh-utils@squoosh/lib@symph/core@symph/react@symph/server@tsed/schemaamphtml-validatorargast-typesasync-retryasync-semababel-loaderbabel-plugin-dynamic-import-nodebabel-plugin-syntax-jsxbabel-plugin-transform-definebabel-plugin-transform-react-remove-prop-typesbabel-plugin-transform-typescript-metadatabrowserslistbuffercacachecache-loadercaniuse-litechalkchokidarcomment-jsoncompressionconfcontent-dispositioncontent-typecookiecrypto-browserifycss-loadercssnano-simpledeldevaluedotenvdotenv-expandescape-string-regexpetagfile-loaderfinally-polyfillfind-cache-dirfind-upfreshfs-extraget-orientationget-portgzip-sizehandlebarshttp-proxyignore-loaderimage-sizeis-animatedis-dockeris-wsljson5jsonwebtokenless-loaderloader-utilslodashlodash.currylru-cachemerge2mini-css-extract-pluginmkdirpnanoidnative-urlneo-asyncnode-fetchnode-html-parserorapath-browserifypath-to-regexppnp-webpack-pluginpostcsspostcss-flexbugs-fixespostcss-loaderpostcss-preset-envpostcss-scssprocessprop-typesraw-bodyreact-isreact-refreshrecastresolveresolve-url-loadersass-loaderschema-utilssemversendsource-mapsource-map-loaderspeed-measure-webpack-pluginstream-browserifystring-hashstrip-ansistyle-loaderstyled-jsxtapableterserterser-webpack-plugintext-tablethread-loadertypescriptunfetchunistoreuse-subscriptionvm-browserifywatchpackweb-vitalswebpackwebpack-bundle-analyzerwebpack-sourcesyargs
2.0.0-canary.6

3 years ago

2.0.0-canary.4

3 years ago

2.0.0-canary.3

3 years ago

2.0.0-canary.5

3 years ago

2.0.0-canary.2

3 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.7

6 years ago

1.2.6

6 years ago

1.2.5

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.2.0-alpha.3

6 years ago

1.2.0-alpha.2

6 years ago

1.2.0-alpha.1

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.6.1

7 years ago

0.6.0

7 years ago

0.5.6

7 years ago

0.5.5

7 years ago

0.5.4

7 years ago

0.5.3

7 years ago

0.5.2

7 years ago

0.5.1

7 years ago

0.5.0

7 years ago

0.4.6

7 years ago

0.4.5

7 years ago

0.4.4

7 years ago

0.4.3

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.4

7 years ago

0.3.3

7 years ago

0.3.2

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.15

7 years ago

0.2.14

7 years ago

0.2.13

7 years ago

0.2.12

7 years ago

0.2.11

7 years ago

0.2.10

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.0.1

7 years ago