All articles
Contents

    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:

    SDK Showcase

    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:

    DataTableComponent

    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

    image|652x500

    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!

    Jmix is an open-source platform for building enterprise applications in Java