Eficy

Eficy, a front-end orchestration framework.Can orchestrate any React components library through JSON configuration, simple configuration can generate complete page.

Recommended for use with component libraries: AntD

English | 简体中文

✨ Features

• Use JSON to orchestrate any React component library to quickly form a usable page
• Built-in Mobx Store, no need to care about store changes for page development
• Built-in request mechanism, simple configuration can complete data request
• Built-in two-way binding for easy configuration page synchronization in real time
• Refine the scope of component changes, and view component rendering performance in real time
• Support Plugin customization, can uniformly configure HOC, easily achieve front-end OOP
• suitable for large multi-page applications
• Works seamlessly with AntD 4.0+

🖥 Environment Support

• Modern browsers and Internet Explorer 11+ (with polyfills)
• Server-side Rendering
• Electron

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install @eficy/core --save

yarn add -S @eficy/core

Import from Script:

<script src="https://unpkg.com/@eficy/core"></script>

🔨 Usage

Render to DOM：

import * as Eficy from '@eficy/core';
import antd from 'antd';

// config global default componentMap
Eficy.Config.defaultComponentMap = Object.assign({}, antd);

Eficy.render(
  {
    '#view': 'div',
    style: {
      padding: 10,
      background: '#CCC',
    },
    '#children': [
      {
        '#view': 'Alert',
        message: 'Hello this is a Alert',
        type: 'info',
        showIcon: true,
      },
    ],
  },
  '#root',
);

Render as ReactElement：

import * as Eficy from '@eficy/core';
import antd from 'antd';

// config global default componentMap
Eficy.Config.defaultComponentMap = Object.assign({}, antd);

const App = () => {
  return Eficy.createElement({
    '#view': 'div',
    style: {
      padding: 10,
      background: '#CCC',
    },
    '#children': [
      {
        '#view': 'Alert',
        message: 'Hello this is a Alert',
        type: 'info',
        showIcon: true,
      },
    ],
  });
};

In Browser use:

<link rel="stylesheet" href="https://unpkg.com/antd@4.0.3/dist/antd.min.css" />
<script src="https://unpkg.com/antd@4.0.3/dist/antd.min.js"></script>
<script src="https://unpkg.com/@ant-design/icons@4.0.2/dist/index.umd.js"></script>

<div id="root"></div>

<script>
  Eficy.Config.successAlert = ({ msg }) => antd.message.success(msg);
  Eficy.Config.failAlert = ({ msg }) => antd.message.error(msg);
  Eficy.Config.defaultComponentMap = Object.assign({}, antd, { Icons: icons });

  Eficy.render(
    {
      '#view': 'div',
      style: {
        padding: 10,
        background: '#CCC',
      },
      '#children': [
        {
          '#view': 'Alert',
          message: 'Hello this is a Alert',
          type: 'info',
          showIcon: true,
        },
      ],
    },
    '#root',
  );
</script>

Live Update

export default [
  {
    '#view': 'Alert',
    message: 'quick bind ${models.input.value}', // => will be output as "quick bind value"
    type: 'success',
    showIcon: true,
  },
  {
    '#': 'input',
    '#view': 'Input',
    value: 'value', // => value change will be sync to Alert message
  },
];

Async request rendering

Update view based on async results：

export default {
  views: [],
  requests: {
    immediately: true,
    url: 'https://mock.xiaobe.top/mock/5da6e8bf6aac2900153c9b7e/request/reload',
  },
};

Fill the data according to the async return result：

export default {
  views: [
    {
      '#view': 'Table',
      '#request': {
        '#': 'getTableData',
        url: 'https://mock.xiaobe.top/mock/5da6e8bf6aac2900153c9b7e/table/getlist',
        format: res => ({
          action: 'update',
          data: [
            {
              '#': 'table',
              dataSource: res.data,
            },
          ],
        }),
      },
      pagination: {
        total: 50,
      },
      columns: [
        ...
      ],
    },
  ],
};