Aurelia Interface Update

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.

Status Report

So, where are we in all this? As I mentioned, we started by building everything I've talked about above in the beginning, but it wasn't shippable. Right now, we are in Phase Two. Specifically, we are nearing the end of the second Stage of Phase Two - Molecules. We've put the fabric in place, created our v1 elements and are nearing completion of the core structural components. The full Aurelia Core Team is now involved in the process and is using, testing and building with Aurelia Interface. They've been providing great feedback, which we are using to refine the library.

Let

You would probably like to see what some of this looks like. We could show you many, many things, but that would be quite tedious at this point, so we've selected two things from our Elements stage (ai-switch and ai-checkbox) and two things from our Molecules stage (ai-card and ai-list.)

ai-switch and ai-checkbox

In each of these videos we show the same basic features. First, you can see both the Android and iOS versions, side-by-side. At the top, we start out by showing the default theme of each element. Below that you see a series of ai-slider elements which are data-bound to various visual properties on the element above. You can see that as we drag the ai-slider we are able to change, in real-time, every aspect of the element's style.

What's really neat about AI is that we've got a powerful theming system. It can be as simple as changing the color palette across the entire library, to as customized as changing individual styles on each control and applying various combinations of themes and styles throughout your app. Beyond that, not only are visual styles bindable, but the themes themselves are. This means that if you create an ai-switch theme, applied to all switches in your app, then change a property of that theme, all associated switches will update their appearance in realtime. We've built our styling and theming fabric to rival that of the most powerful native platforms today.

ai-card and ai-list

Next, in each of these videos, we demonstrate structural components. Both the ai-card and the ai-list bring together many other components into a standard UX structure. These videos show scrolling over a series of card and as well as a list.

As you might expect, these structural components also have interaction patterns, such as the one demonstrated in the ai-card transition animation. In our up-coming Stage 3 of development, we'll be adding a number of additional interactions throughout, including gesture support.

Wrapping Up

I know you want to know when you can get your hands on it. We're not quite ready to announce a date just yet. As you can see, things are proceeding quite well. We've got our core team testing the bits that are complete. We're continuing to polish and work through our final stages of development. We'll keep you posted as we progress and look forward eagerly to getting you building amazing apps with Aurelia Interface soon.