Frontend 20.1 Beta Published

Announcements
,
#1

Hi, we want to present you with the BETA version of the next major release of frontend tools and libraries.

Documentation

For a long time, we kept documentation right in markdown readme files. It was convenient to have a precise version in each branch or published package, but it was hard to split the documentation into fragments, make cross-links or share links to specific versions. So, finally, the documentation has been reworked and is now published on the website:

https://doc.cuba-platform.com/frontend/

Now it also has a built-in search and a version selector.

React: Splitting Packages

Initially, all React-related runtime functionality was concentrated in a single @cuba-platform/react package. That was inflexible and we decided to split it into two separate packages:

@cuba-platform/react-core - relies on MobX and cuba-rest-js. Provides Data Components, MainStore and common utility functions.

@cuba-platform/react-ui - relies on react-core and web UI libraries: Ant Design, moment, react-intl. Provides UI components.

As a result, it is possible to use core functionality with any UI kit (not only Ant Design) and moreover not only on the Web platform!

React Native Template

Now it is possible to scaffold a ReactNative app for your CUBA project using the frontend generator:

Generated app is a foundation for further development. It is connected to a given app’s REST API and contains a TypeScript SDK. UI-wise it contains a scaffolded Login screen and user list example.

See getting started section in the documentation.

React Client Updates

Composition

One-to-One and One-to-Many composition attributes are now represented by the new NestedEntityField and NestedEntitiesTableField components correspondingly. Those are high-level components that display nested entities using EntityEditor component. Editors are rendered automatically using the provided nested entity’s view name.

Paging

Entity browsers scaffolded as Cards or List now contain a configurable paging component. Paging state is reflected to the URL and vice-versa.

Better Data Types Support

  • Numeric attributes (long, decimal, int and double) are now rendered using InputNumber.
  • Previously unsupported temporal types are now supported (localDate, localTime, localDateTime, offsetDateTime, offsetTime)
  • Filters in DataTable now support long, uuid and all temporal type attributes.
  • UUID attributes are rendered as masked fields.

Image Preview

FileUpload now allows to open an image preview:

ImagePreview component can also be used separately, outside of the file upload field.

Other Improvements

The release also contains numerous bug fixes and improvements, raw changelogs are available on GitHub:

Release Cycle

You may have noticed the unusual version format: 20.1. Since there is a bunch of packages it’s been decided to have an artificial umbrella milestone name under which we will release changes several times per year. We dropped the idea of the common version for packages in order to have a certain amount of freedom to release packages separately, thus having a different velocity of development for different libraries.

Usage and Availability

Command Line

New versions will be already picked up if you install the generator from npm or use it with npx.

Studio

To use the new generator in the current version of Studio just specify the generator version ^3.0.0-beta.1 in the front module creation dialog:

We expect the new version of the generator will be used by default in the upcoming versions of Studio (13.3, 14).

Summary

As always, we want to hear your feedback and thoughts on the updates. We will continue to improve the frontend tooling and come up with a roadmap later. If you have any ideas please share them in this thread.

16 Likes
#2
#3
#4
#5

Thanks is exciting news. I have tried here is feedback.

I have created the front module when I run it looks like deployed without any exception but the log-in menu never appeared. Where created the front, I got the attached message but after that when I assemble, run - no error message is found.react-front-project.rtf (9.9 KB)

here is the pet-clinic project after adding the front. cuba-petclinic.zip (7.3 MB)

#6

Hi Mortoza,

First of all thanks for the feedback! I cannot reproduce the problem with provided project. After some digging it looks like MacOS related issue, see the Stackoverflow topic.

1 Like
#7

Thank you so much @minaev, it worked!

A couple of questions,

  1. how can we package the front module for mobile in Apple and Android?
  2. Can we create more than one front module for the same main application?

regards.

#8

Hi
I have created a new sample project (pet-clinic sample security looks like from old version) which is attached where you will find 4 Entities i.e. Customer, Product and SalesOrder & SalesOrderLine.

I am testing this in multitenancy add-on environment.

You will find all 3 screens are there in front and generic UI modules. As usual, all those screens are working in generic UI including customer and product screens in react. However, the screen generated in react for sales order does not have composition (sales order line) to add products in the sales order.

Thanks for looking into this and let me know what is missing here!
testfrontproj.zip (2.3 MB)

#9

Hi
Any comments on my report above?

#10

Hello,

I installed the components for the creation of a React-Native app (with expo). Everything works perfectly and I manage to use the example which is provided.
On the other hand, I am a bit lost to go further with the manipulation of data and components. Can you give me a full CRUD example with React-native.
Thank you so much.

1 Like