Hi, we want to present you with the BETA version of the next major release of frontend tools and libraries.
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:
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
One-to-One and One-to-Many composition attributes are now represented by the new
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.
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.
FileUpload now allows to open an image preview:
ImagePreview component can also be used separately, outside of the file upload field.
The release also contains numerous bug fixes and improvements, raw changelogs are available on GitHub:
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
New versions will be already picked up if you install the generator from
npm or use it with
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).
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.