Development
Responsive UI provides the following for developing responsive web apps…
-
Web components that allow your team to build and maintain responsive UI applications that implement the UI patterns.
-
CSS-based enterprise theming provides the appearance for all development components, for 10 different enterprise themes.
-
A library of enterprise icons is included as part of the development components.
-
A sample application that illustrates the enterprise UI patterns in a solution that you can examine and run.
- You can copy code from the sample application solution and paste it into your own applications.
- You can download the sample application solution here and access a running copy of the application here.
-
A starter template solution that provides the basic scaffolding your responsive app will need.
- This can help save time whenever you start a new project.
- You can download the starter template solution here.
Responsive UI component technologies
The Responsive UI development components are available in 2 different technologies. You can use either technology in your applications, or even a blend of both.
Web components
Web Components are a standards-based set of technologies for creating custom UI components that run in the browser without requiring a framework like Angular or React.
We rewrote the Angular components as web components in the summer of 2021 to decouple them from Angular. These web components are available as a separate deployment package that you can use in your responsive applications.
While our web component sample application is built using Angular, you should be able to use the Responsive UI web components in applications built with any modern web UI technology.
Angular components
The Responsive UI dev components were originally written as Angular components. These Angular components are still available and supported.
Your application must be built with the Angular framework in order to use the Angular components.
Today, these components are a separate codebase from the Responsive UI web components. In the near future, we’ll transition the Angular components to thin wrappers around the Responsive UI web components, which will get us back to a single codebase while still preserving the existing Angular-based interface in use today. We’ll be working closely with product teams using Responsive UI today to ensure that we make that transition as smooth as possible.
You can learn more about the web components project here.
Responsive UI development models
Responsive UI supports 3 different models for building responsive web apps.
AA model: Angular app with Angular components
In this model, your application is built using the Angular framework and uses the Responsive UI Angular components.
Install the jharesponsive package to get the Responsive UI Angular components into your Angular application.
AWC model: Angular app with web components
In this model, your application is built using the Angular framework and uses the Responsive UI web components.
Install the rui-wc package to get the Responsive UI web components into your Angular application and the rui-angular package to get the Angular support for those web components into your Angular application.
XWC model: Non-Angular app with web components
In this model, your application is built using a technology other than Angular and uses the Responsive UI web components.
Install the rui-wc package to get the Responsive UI web components into your non-Angular application.