Overview

Intention

The main aim of the library is to facilitate creating data driven UI in React.js with both front-end and back-end data sources.

Use cases:

1. Easily implement data driven spreadsheets(grids) with capabilities of:
   • Sorting and pagination
   • Table cells inplace-editing
   • Records selection and bulk operations
   • Automatic synchronization of multiple forms and grids with a shared data model
   • Synchronization of grid data between client and server
   • Exporting of table records into JSON and CSV
   • and more
2. Implement form validation: Form Service + Validator
   • synchronous client side validation in React
   • async server side validation
   • typical validation Rules out of the box
   • complex validation rules for dependent fields(e.g. combination of fields ‘name’ + ‘surname’ must be unique)

Library Elements

<UIKernel.Grid
  model={model}
  cols={columns}
  ref={(grid) => this.grid = grid}
  {/*some other props*/}
/>

//somewhere else
this.grid.someGridMethod();

1. GRID - means for creating data driven spreadsheets. It consists of independent front-end end back-end parts:
   • At front-end there is React Grid component which accepts as properties model with Grid data model (either client-side Collection model or XHR Model which syncs data with a server) and columns with table columns configuration object. Also React Grid component accepts some other table configuration properties and has some useful methods.
   • There are also special adapters to adapt Grid model to From model.
   • At back-end there is useful express.js API which helps to make communication with front-end easier. But it isn’t mandatory to use express.js - you can implement similar REST API with any other framework and back-end platform. Here is an example how to use server-side API
2. Forms - means for managing your your React forms behaviour
   • At front-end there is
     • Form service helps to manage your React forms behaviour(especially add validation there)
     • Form model helps to manage your forms data model
       • Client model - works locally
       • Form XHR Model - interacts with a server API
   • At backend there is useful express.js API which helps to implement REST API for synchronization of form data model between front-end and back-end parts of your app. But it isn’t mandatory to use express.js for this purposes as well.

3. Validator - provides a handy way to validate your form fields(wherever at front-end or back-end)

4. Editors - several frequently used React widgets(DatePicker, SuggestBox, etc.)

5. Lists data model and corresponding express.js API which helps to implement provision of data for lists widgets like Select and SuggestBox.

Module structure

UIKernel library has the following structure:

UIKernel = {
  gridExpressApi,
  listExpressApi,
  formExpressApi,
  createValidator,
  toCSV,
  applyGridFilters,
  Grid,
  Form,
  ValidationErrors,
  createValidator,
  exportGridData,
  toJSON,
  Models: {
    Grid: {
      Xhr,
      Collection
    },
    Events,
    Form,
    FormXhr,
    List: {
      Xhr
    }
  },
  AbstractModels: {
    Form,
    Grid,
    List
  },
  Adapters: {
    Grid: {
      ToFormUpdate,
      ToFormCreate
    }
  },
  Editors: {
    Select,
    SuggestBox,
    DatePicker,
    Checkbox,
    Number
  },
  ArgumentsError,
  ThrottleError,
  Validators: {
    boolean,
    date,
    enum,
    set,
    float,
    regExp,
    notNull,
    number,
    notEmpty
  }
}