For some time, we've been working on a component library for Aurelia: a suite of controls that would enable hybrid mobile development on iOS and Android, as well as desktop and browser-based development by leveraging Material Design. In today's update, we'd like to share with you a bit about our journey, where we're at and what the future looks like.

The Aurelia Interface Story

From the beginning, we knew we wanted a first-class component library for Aurelia, something that would rival the native platforms for customization, ease of development and match them for performance. It is an ambitious project but we felt it was of great value to us and our community. So, we brought together a team:

Rob - An experienced UI architect and engineer; leader of the Aurelia Project.

Scott - An experienced UI/UX design expert on iOS, Android, Windows, Mac and the Web.

Joel - A talented UI engineer with experience building rich component libraries.

Patrick - A non-UI-oriented developer, mostly familiar with backend systems.

Each person has a critical part to play. Rob ensures the components are built the best possible way to take advantage of Aurelia while ensuring that Aurelia itself has the core capabilities to enable such a library. Scott meticulously guides the UX of each component and UI paradigm so that they match the native UI Design Guidelines of each platform and meet or exceed native capabilities and experience. He also makes sure that the final API is easy enough for designers with a limited development background. Joel implements many component internals while imagining new capabilities and APIs that aren't even easily handled in native. He’s come up with some really exciting concepts that will be part of Aurelia Interface. Patrick. Well, you may be wondering, what does he do? It's very important actually. He helps to ensure that, while we build a crazy, awesome, highly customizable toolkit...it remains usable not only for UI experts (Rob), UX Experts (Scott) and expert developers (Joel) but also for backend developers, those new to front-end development and...well...those who don't care about any of that and just want to get stuff done and for it to look professional out-of-the-box. (Ok, there's a bit more to Patrick's job than that...he's basically our project manager, handles business development and on top of that he’s our Services Architect.)

So, with our team in place, we started on our journey...

Phase 1

Phase 1 was an exploratory phase. We went crazy building all sorts of components: inputs, lists, cards, navigation, toolbars, tabs, search, action buttons, dialogs, gestures...the list goes on and on. We wanted to get as broad a set of components implemented as we could. However, we didn't implement any one component to 100%. We just wanted to get enough done so that we could stand back and look at all the pieces, understand the unique challenges of such an undertaking and then make a plan to bring it all together in a unified core component library for you.

Phase 2

Once we had everything on the table, we wanted to strategize about how to bring these components into a production-quality state. Phase two is where we're at now. We see our march towards release as having several stages in this part of the development, each one building on the last. I think of them using the following metaphor:

Stage 0 - Fabric

Our own universe has certain fundamental laws. Aurelia interface also has such a foundation. I think of it as the "fabric" that holds everything together. What are those pieces?

Web Standards - Aurelia Interface (AI) is built on web standards and needed to have a strategy for leveraging semantic markup.

Accessibility - There should be a consistent mechanism that enables all components to handle accessibility requirements.

Aurelia - Naturally, Aurelia itself provides the core upon which AI is built.

Cross-Platform Strategy - There needed to be a way to handle correct UI and UX cross-platform for each component, including per-platform overrides and customizations. It should be consistent throughout the library.

Themes - AI needed a consistent way to handle styles and theming across all its components, including color palettes and advanced end-user theming.

Layers - High performance rendering requires a careful approach to HTML content construction and css techniques. Our layers mechanism encapsulates this and makes it available to all components.

Stage 1 - Elements

Once you've got a core component fabric, you can begin to create fundamental elements, building blocks for constructing UI. Many of these are actual Aurelia Custom Elements, and include things like:

ai-button

ai-radio

ai-checkbox

ai-input

ai-switch

ai-field

ai-slider

ai-progress

Stage 2 - Molecules

The fundamental elements then start to come together in various structures, forming more complex arrangements. Examples of these are:

ai-card

ai-list

ai-search-bar

ai-status-bar

ai-segment

Stage 3 - Organs

These molecules can then start interacting to enable higher functionality, such as navigation and dialogs. For example:

ai-navbar

ai-tabbar

ai-dialog

gestures

Stage 4 - Organisms

With these organs properly functioning, we can then bring something to life...a real application.