What is a UI Component Library?

Today, mobile developers typically need to deliver their application to both iOS and Android devices, among others. The challenge that often arises is how to develop a user interface that can be used across both platforms while maintaining the right look and feel. Does this require the development team to create UIs specific to each platform, resulting in increased time and costs—Or, is there an alternative?

As just mentioned, it’s important that your application looks and interacts appropriately, as though it is native to the platform for which you’re building. This has also been a challenge with some cross-platform frameworks: Their components were not quite good enough to “act natively,” or they did not exist at all.

A modern UI component library—part of a greater design system—is going to have a wide range of building blocks available to the developer. These can range from buttons to input elements, scrolling lists, and more. More advanced components like headers, tab bars, and grids are also necessary. The fundamental challenge of all of this is that the web was not initially designed to be an application platform—it was built to link together research papers. But, as we all know, this use case is certainly no longer the reality. While we have some HTML components available to us, such as buttons, inputs, sliders, radio buttons, and a few more, these are not enough to properly create the user interface for a modern application.

Understanding Components

Due to the previously mentioned challenges, it’s critical to introduce a UI component library into your development system in order to keep up with building a modern application. But what exactly is a UI component?

A component is really constructed in two parts: The first is how it looks (the UI) and the second is how it works (the user experience or UX). Often it is easy to style a component to match the corresponding component in the native UI design library.

But, it is another thing to carefully deconstruct how the component works on the platform. Are there animations that occur upon tapping an element? Think about the ripple effect in Material Design. Or does it change its z-order if an action occurs?

When working from a single code base, each of your components now needs to alter themselves and conform to the platform on which they’re running. This is where the major challenge occurs—You certainly do not want to favor one platform over another. Luckily, there are solutions out there to assist with this issue, which allow you more time spent building the fun, not tedious, parts of your app. By leveraging solutions like Ionic, developers can reduce their development time by using a single code base to build applications across multiple platforms.

Building for Multiple Platforms

There have been quite a few attempts at creating a UI component library for web-based applications. Most have focused on either iOS or Android. For example, I can remember a jQuery Mobile theme that you could apply that did a nice job on changing the visual styling of the components to match the look of early iOS. Unfortunately, this theme fell a bit short in providing the identical UX of an iOS application.

Developers have also turned to UI design libraries like Bootstrap to serve as their component library, only to discover that they were not optimized for use on mobile devices. This lack of UI components is often cited as a major reason developers dislike using Cordova.

Get our free guide

Grab our free Hybrid vs. Native guide to see how you can build cross-platform mobile apps with the web.

Styling and Customization

Another challenge in using a non-native, front-end component library is how "styleable" the component is. While we typically don’t alter the UX of a component, today’s users expect visually engaging applications. It is no longer the norm to take the default components, assemble them and publish your application. You are going to want to customize them with your application’s unique style and brand. So, whatever UI design library you choose, this is a critical factor to consider in your selection.

The open source Ionic Framework is designed to address each of the key requirements outlined above: Cross-platform compatibility, optimized for desktop and mobile, and highly customizable components.

So what does a typical library of Ionic UI components look like? Here is a complete Angular HTML template:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>National Parks</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item
      *ngFor="let park of parkData" 
      detail="true" 
      lines="full" 
      (click)="goParkDetails(park)"
    >
      <ion-thumbnail slot="start">
        <img src="assets/img/thumbs/{{park.image}}">
      </ion-thumbnail>
      <ion-label>
        <h2>{{park.name}}</h2>
        <p>{{park.state}}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

If you have never seen the markup for an Ionic component, they are easy to spot as they all start with ion-. We are not going to look at any specific component in detail, but you should be able to get an understanding of how simple the markup is. Need a list, you can use the <ion-list> component. What about a header that is properly fixed to the top of the screen—Then, use the <ion-header> component and place your other elements inside like the page’s title.

If you look closely, there is only a styling attribute used in this sample. In the <ion-toolbar>, the color of that component is set to primary. This is one of the named color collections that Ionic has defined. By default, it is Ionic’s corporate blue color, but all you need to do is change the CSS variable’s value in the theming file.

Which brings up the question: How does this template adapt to my device’s platform? This is all handled internally by the framework. There is nothing that you or your team needs to do in order for it conform to the base user interface styling for iOS or Android. But, like was pointed out earlier, stock-looking UI components are not what today’s mobile users demand in their applications. This is where the efforts the Ionic team shine: By simply taking the time to craft these components correctly, it is easy to adjust the exposed CSS variables and transform them into the styling that they want. For example, the popular social beer logging app, Untappd is a great example of taking the core Ionic components and then applying their custom brand to them.

Framework Dependencies

Most UI component libraries are designed to work with a specific front-end framework. Angular Material, for example, only works with the Angular framework.

Initially, Ionic’s front-end component library was tightly coupled to Angular as well. But now, with the recent release of Ionic Framework 4.0, Ionic’s user interface component library is built with Web Components, opening up a whole new range of opportunities. While still highly-compatible in Angular, these components can be integrated as stand-alone elements in your vanilla JavaScript applications or with other emerging front-end frameworks. Efforts are also underway to fully integrate them into both Vue and React eco-systems as well. Finally, we have a stable and customizable modern UI library that we can learn from and use across any of our development projects.

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.