TypeScript SDK and React Client Updates

In CUBA, we continuously evaluate more traditional, front-end centric approaches for UI development. We want to share the latest news regarding front-end tools, libraries and code generation.

TypeScript SDK

It's aimed to be used in any JS-based project which communicates with CUBA application using generic REST API, including backends for Node.js.

SDK contains entities (including built-in), enums, views, rest services and queries in order to facilitate working with data in a type-safe manner:

The SDK can be generated via the command line (see the requirements and usage instructions here):

npx @cuba-platform/front-generator sdk:all

You will need typescript 3.2+ in dev dependencies of your project in order to compile the SDK.

More details and examples are available here.

React Client Update

Standalone Front Application

Having front module inside the main app may result in increased build time, and does not make sense if separate people work on frontend / backend.
Now it's possible to generate front application outside the main project using @cuba-platform/front-generator npm package:

npx @cuba-platform/front-generator react-typescript:app

TypeScript SDK Included in React Client

Now React client contains TypeScript SDK which is placed in src/cuba folder.
In order to regenerate SDK to confirm changes in the data model use npm run update-model command.

Data Components

Data components allow loading, updating and deleting entities. Since implemented as MobX stores, they can be used to seamlessly observe changes and trigger automatic React components re-rendering. Here is the minimal example of DataCollectionStore usage:

import * as React from "react";
import {observer} from "mobx-react";
import {collection} from "@cuba-platform/react";
import {FavoriteCar} from "../../cuba/entities/mpg$Car";

@observer
class CarList extends React.Component {

  carsData = collection<Car>(Car.NAME, {view: 'car-view', sort: '-updateTs'});

  render() {
    if (this.carsData.status === "LOADING") {
      return 'Loading...';
    }

    return (
      <ul>
        {this.carsData.items.map(car =>
           <li>{car._instanceName}</li>
        )}
      </ul>
    )
  }
 

DataTable Component

We introduced DataTable React component which is based on Ant.Design's table and allows filtering the displayed data:

The DataTable componet works with data using dataCollection component:

import {collection, DataTable} from "@cuba-platform/react";
  
  carsDc = collection<Car>(Car.NAME, {view: 'car-view', sort: '-updateTs'});  

  render() {
    return(
      <DataTable dataCollection={this.carsDc}
                 fields={['manufacturer','model','regNumber','purchaseDate','carType']}
                 defaultSort={'-updateTs'}
       />
     )
  }

You can generate screens containing data tables using CUBA Studio:

• Right-click on Frontend UI in CUBA project tree and select New > Create Front Component;
• Select Entity Management template;
• Select table in the List type dropdown.

Documentation

Basic documentation on the React client will be placed in README.md of the scaffolded project and is also available here.

Sample

We prepared the React client sample based on Petclinic project. The source code is available here

Security

Universal REST API provides powerful means of dealing with data, thus you should configure security carefully in case if REST API is enabled.
Please read the corresponding chapter of the REST API manual. In the upcoming release we'll provide a new, stricter denying role type. We also consider providing REST API code generation as an alternative to the universal one.

Other

Using System Node.js by default

Since 7.1 release the Gradle plugin by default uses Node.js installed in the system. It helps to reduce the amount of time required for creating the front module and improves interop if node/npm is being executed from the command line. Now it's recommended to have Node.js 10+ installed in your system.

When creating a front module, Studio will detect the availability of Node.js being executable, and if it's not available, it will add fallback downloading configuration to the build.gradle:

configure(frontModule) {
  node {
    download = true
  }

Deprecation of Polymer Client

Polymer team released Polymer 3 just as a migration path to be compatible with npm ecosystem and recommended using lit-html and LitElement for the new projects. Lit-html conceptually utilizes the same principles as React (UI is a function of state), however, it's not battle-proven/well tested yet. So, at the moment we decided to concentrate our efforts on React as it has a broader ecosystem.

Try it out

Please use CUBA Studio 12.1+ plugin and Intellij IDEA Ultimate.

We are looking forward to your feedback on our forum!