Get the Newsletter

Aurelia Beta Week - Day 5 - Aurelia Interface

Posted by AureliaEffect on November 20, 2015

On the final day of our beta week announcements, we wanted to leave you with a sneak peek of what we are working on for the future. One of the most common requests we've heard from the community is the desire for a component library. I'm happy to say, we've been thinking of that too...since the very beginning. We've dubbed our component library "Aurelia Interface".

What is Aurelia Interface?

Aurelia Interface is a collection of Custom HTML Elements which can be used to build applications. The custom elements are built with Aurelia and designed to work seamlessly with the Aurelia Framework. However, we'll also release them as a set of standards-compliant Web Components, so they will be usable in other contexts.

The first version of Aurelia Interface will include a fairly typical set of standard components: buttons, inputs, labels, lists views, card views, progress bars, etc. For our first release, we'll provide two themes: Material Design and iOS. You'll be able to pick which theme you want...or let Aurelia Interface select the most appropriate theme at runtime based on the platform. This means that you can build your app with a standard set of components and when your app runs on Android it will be themed as Material Design and when it runs on iOS, it will themed as iOS. Furthermore, you can even override and customize theming on a per component, per-platform basis...including using your own themes. Naturally, these components are not only for mobile applications, but by leveraging our Material Design theme, they provide a nice foundation for beautiful browser-based applications as well.

Aurelia Interface goes far beyond simple theming though. The major UX characteristics of the various platforms are also represented. We do this via first-class integration with the Aurelia Router, augmenting it with native-style transitions, appropriate for each run-time platform. In the same spirit as Aurelia, Aurelia Interface is highly extensible and customizable. It can even serve as a solid foundation for your own cross-platform, themable components.

In order to make some of this more concrete, we've put together a short teaser video where I demonstrate several components, showing them side-by-side on Android and iOS. We also take a look at a little bit of markup, so you can see what the development experience is like.

Note: We're still polishing all of the little platform details to make this just right but this video should get you excited about our current progress.


Unfortunately, we can't give you a release date yet, but if you sign up for our mailing list we'll be drawing our first beta slots from there. For us, delivering a quality component library is very important, so we don't want to rush things. We will be keeping you up to date on the progress of this library and let you know when we are nearing release and how you can get it when it's ready. When we do release the library, we'll most likely bundle it with some learning opportunities, so you not only get the interface components but some solid training...perhaps in the form of a virtual conference.

The Business Model

There will be two parts to Aurelia Interface. There will be an open source part and a commercial part. Most of Aurelia Interface will be commercial. That said, we plan to make it very affordable, even for independent developers and hobbyists. We've built a substantially powerful open source platform with Aurelia and we want to create a sustainable business around that platform. As part of that, we're building several optional, commercial addons to accompany the framework. Aurelia Interface is one such addon. As Aurelia developers, you are under no obligation to purchase our interface library. There are a number of other options available. However, we hope that our product will deliver so much value for its price, that when the time comes, you'll gladly become a patron of our work.

Aurelia Interface is a major undertaking. As part of the development efforts, we've built some foundational technology such as a modern, flexbox-based CSS layout framework and various platform detection features. We'll be open-sourcing these parts of Aurelia Interface as part of the core Aurelia framework so that it's easier for everyone to build cross-platform components. We'll also be taking the modal dialog work that I showed in the demo video above and integrating it into our existing Aurelia dialog plugin. Finally, the work we've been doing on Aurelia Interface has already brought a number of feature improvements to the core Aurelia framework as part of our development process.

Wrapping Up

Thanks for joining with us this week as we launched our Beta. We've been excited and encouraged by the process. It's an important milestone for us, one that's part of a long-term vision of transforming and improving web development for all of us. We look forward to seeing what amazing things you'll build in the months and years to come.