3.7. Frontend User Interface

The Frontend UI is a CUBA Platform block serving as an alternative to the Generic UI. Whereas Generic UI is designed primarily for internal (back-office) users, Frontend UI is targeted for external users and is more flexible in terms of layout customization. It also uses different technologies which are more familiar to frontend developers, and allows easy integration of UI libraries and components from vast JavaScript ecosystem. However, it requires better knowledge of modern frontend stack.

Frontend UI can be powered by one of the following technologies:

  • React

  • React Native

  • Polymer (deprecated)

  • Your favorite framework (such as Angular or Vue): you can use a framework-agnostic TypeScript SDK for that

We provide several tools and libraries that you can use in order to build your Frontend UI application (or frontend client as we call it):

Frontend Generator

The Frontend Generator is a scaffolding tool that can be used to speed up the process of developing a frontend client. It can be used from CUBA Studio or as a standalone CLI tool. It can generate a starter app and add the pieces you need such as entity browser and editor screens. It can also generate a TypeScript SDK.

Component and utility libraries for React and React Native

There are two libraries for React and React Native powered frontend clients that are both used in the code generated by the Frontend Generator and can be utilized on its own. One is CUBA React Core which is responsible for core functionalities such as working with CUBA entities. It is used by both React and React Native clients. The other is CUBA React UI which contains the UI components. It uses Ant Design UI kit and is used by the React client.

CUBA REST JS library

CUBA REST JS is a library that handles the interactions with Generic REST API. Frontend clients use Generic REST API to communicate with the Middleware. However, you don’t have to manually send the requests from your code. If your frontend client is based on React or React Native then CUBA React Core components will often handle this communication for you utilizing CUBA REST JS under the hood. If you are using a different framework or need more flexibility, you can use CUBA REST JS directly.

TypeScript SDK

TypeScript SDK is generated by the Frontend Generator and is a TypeScript representation of project’s entities, views and facades to access REST services. The SDK can be used to develop a frontend client using your favorite framework (if it happens not to be one of the frameworks supported out of the box) as well as for Node.js-based BFF (Backend for Frontend) development.

To learn more about these tools and developing a frontend client see the Frontend UI manual.