Components
Components are the tools that you use to build Responsive UI applications.
There are design components for designing your application and development components for building your application.
- There are two flavors of development components: web components and Angular components.
- There are design components for Figma and Adobe XD (for now, although we will eventually drop all support for Adobe XD).
Componentization
Some web applications follow the simplistic approach of applying CSS classes to native HTML elements. A logical UI component is often implemented as a block of HTML with CSS classes applied to some of the elements.
Working with the UI at this lowest level (HTML and CSS) is a simple approach, but has drawbacks that can seriously affect maintainability of your applications over time and reduce consistency across applications.
Responsive UI helps avoid these pitfalls, providing a simpler development interface while maximizing maintainability and consistency across Jack Henry products.
One important goal for Responsive UI is to maximize consistency across Jack Henry products that our customers use. A high level of consistency across our applications helps our users more quickly and easily understand and use our products.
To support this, Responsive UI uses a componentized approach for UI elements and their appearance. Each UI element has a corresponding development component (a.k.a. “control”) that provides a simple API – a set of properties and events – that allows you to easily use the component in your UI.
This modular approach helps maximize consistency across Jack Henry products and increase scalability and maintainability. Here’s how:
Your developers are working with packaged components with meaningful names and properties rather than blocks of undifferentiated divs. This makes it easier to more quickly understand the meaning of your code, leading to less bugs and easier maintenance.
There’s less HTML for your developers to type into their views. Each component internally emits the proper HTML and CSS needed for the logical component, similar to a macro expansion. This also means there’s less potential for developers to make mistakes. It’s easier and less error-prone to write one line of HTML correctly than to write say 10 lines of pure HTML, for every instance of the component, in every view, across every application.
There’s less HTML/CSS to download over the wire. Components expand their HTML/CSS in the browser at runtime, which means less bytes coming down over the wire. This helps your application download faster.
Your products are protected from enhancement changes over time. The DOM elements for any logical component are subject to change in each new release of Responsive UI.
- To enhance a logical component in a non-componentized system, you would have to find and update the HTML for every instance of that logical component, in every view, across every application. And we know that not every developer is going to do that in every view across every product, so over time, a non-componentized system would lose cohesiveness and correctness, and it would become harder to track down why.
- But in a componentized system like Responsive UI, you simply load a new release and every instance of that component in every view will have the correct new HTML/CSS.
This helps ensure that all product teams are using the same look and feel for each component, which helps maximize consistency across our products.
The appearance is baked In
Another important concept with Responsive UI is the fact that the appearance for each UI element is baked into the component, using CSS.
In more generic design systems used by the masses, it’s common for an application to override the default appearance of specific UI elements. This is perfectly acceptable, as each application may need to create its own specific appearance separate from the generic design system.
But at Jack Henry, we sell a suite of products. Our customers benefit from cohesion and consistency across our products they use. If each product team were to reinvent the wheel in terms of appearance, then each product that our customers use would have a different look and feel, resulting in less cohesion and usability.
To address this, Responsive UI bakes the appearance of each UI element into its component using the enterprise CSS. The enterprise CSS is distributed as part of each Responsive UI release and manages all of the themed colors, fonts, sizes, geometries, opacities, internal spacing… everything that gives a consistent look and feel for these components across different Jack Henry products and different devices.