Friday, 4 November, 2016 UTC
Summary
In 2015 we first announced Aurelia, a modern frontend framework with an emphasis on convention over configuration, web standards and productivity. Aurelia provides the core capabilities you need to build apps, such as templating, binding, an application model, routing and dependency injection. We've also created tons of plugins for http, i18n, validation, etc. and partnered with various community groups to build even more. However, there's always been something missing. Today we're introducing Aurelia UX, a completely free, open source user experience framework with higher-level capabilities, designed to bring simplicity and elegance to building cross-device, rich experiences.
What is a User Experience Framework?
While a front-end framework deals mostly with the software design of your application, a user experience framework deals mostly with the UI/UX design of your application. Concretely, this plays out in several important ways with Aurelia UX:
Hosts, Platforms and Design Languages
Aurelia UX has the notion of different hosts, platforms and how certain platforms are associated with a particular design language, built-in. These are core concepts within Aurelia UX and they're modeled explicitly. Here's what we are supporting at the beginning:
Hosts
- Web
- Cordova
- Electron
Platforms
- Web
- iOS
- Android
Design Languages
- Material Design
- iOS Design
Styling, Palettes and Theming
Design languages are comprised of various styles and UX metaphors. Therefore, at the core of Aurelia UX, we have a powerful new styling system. The styling system allows you to encapsulate styles within a component, so they don't leak out into the rest of your app or other components. That's a lot like what Shadow DOM provides but Shadow DOM doesn't let you share styles. Aurelia UX's style system does. Of course that's not all it does. It lets you use databinding directly inside your CSS files as well. In fact, if you want, you can have a dedicated "style-model" for your CSS similar to the way you have a "view-model" for your HTML. Here's what the style system provides today:
- Style Encapsulation
- Style Sharing
- Databinding in Styles
- Optional "Style Models"
- Automatic CSS runtime variables for platform, design language and color swatches.
- Programmable media queries. (Use arbitrary bindings to turn styles on/off).
- Loading of different CSS based on the design language.
As mentioned above, all UX styles have access to information about the current platform and design language. That means they have access to all the variables defined by the design language, including the color palette. Additionally, styles have access to a series of color swatches based on Material Design color theory. Yes, Aurelia UX has color theory built-in. And, if you build components with this style system, you can have your component's "style model" defined globally as well as create named variants (scoped at any level of the view or DI hierarchy) or bind style overrides on a per-component basis using the UX theming engine.
Components and Data Visualization
Aurelia UX will come with a core set of components for the UI scenarios that are most commonly required in modern apps. This means things like buttons, input controls, sliders, lists, cards, etc. We'll expand this library over time and ultimately hope to include data visualization as well as complex controls such as a data grid.
Interaction, Movement and Flow
Building an engaging user experience means you have to not only concern yourself with styles and components, but also with user interaction metaphors, information flow and movement within the app. All these things come together to create a great experience. To complete the picture, Aurelia UX will build on top of its components and add these higher-level features.
How does this differ from Aurelia Interface?
In the past you may have heard us talk about Aurelia Interface (AI), a commercial component library that we were working on. Unfortunately, we won't be able to continue our work on AI. After careful consideration and review, we realized that AI was going in the wrong direction and didn't have the versatility or the proper architecture to handle our vision of a UX Framework. With Aurelia UX, we're rebooting our efforts. Here are a few ways that UX is different:
- UX is Open Source! - We're licensing Aurelia UX under the same, permissive MIT License as the rest of Aurelia. This makes Aurelia UX completely free for everyone forever!
- UX Has a Dedicated Team - We've lined up a team of core Aurelia devs to work on Aurelia UX from the very beginning. They are focused on UX only with nothing else to distract them. Other members of the Aurelia team are also jumping in as appropriate to work on specific parts.
- Community Members Can Contribute - Now that Aurelia UX is open source, it means that anyone from the community can contribute to the project! That means greater productivity and more use cases handled based on broader experimentation and usage.
- UX Has a Stronger Core - Features like platform support, design languages, styling, palettes, theming, etc. are built to be used in any application. They support the Aurelia UX components but can be used completely independently. We feel that the styling capabilities of Aurelia UX today already improve application development by themselves.
- UX Has Incremental Releases - Now that we're open source, we can get UX to you sooner. We don't have to wait for all the components to be done. We can deliver to you regular releases as we add features. For example, you can use UX today if you want the styling and theming features mentioned above.
- UX is TypeScript - We're creating a solid API for the UX plugin. We've heard loud and clear that our community wants better intellisense and compile-time type checking in their apps. We've taken that to heart with Aurelia UX. ECMAScript developers do not fear! Our team is split 50/50 between ES and TS, so you can bet that UX is going to work great regardless of what your preferred language is. We're committed to that.
- UX Mirrors Aurelia - Not only is UX a companion for Aurelia itself, but many parts of its architecture and design are built to mirror Aurelia. For example, Aurelia has a
ViewCompiler,ViewEngineandViewFactoryand Aurelia UX has aStyleCompiler,StyleEngineandStyleFactorywhich perform similar functions for CSS as Aurelia performs for HTML. We've worked hard to make the APIs consistent in this way. - UX will Support Server Render - The Aurelia team is working on server-render for Aurelia and Aurelia UX will be written to work well with server-render out of the box.
- UX works with ShadowDOM or Without It - We can provide scoped styles, but also shared styles. This works both inside and outside of ShadowDOM. The underlying engine detects the rendering technique and makes it all work.
As mentioned, there's a dedicated team working on Aurelia UX. Our core component authors are shannonhorn, kawikabader and jaredtm. scriswell will be providing UI/UX/Design review and platform validation. EisenbergEffect will be working on core infrastructure and managing the overall project. As we progress we'll bring other team members in for specific tasks, such as jdanyow to handle component validation and error rendering and zewa666 to ensure strong i18n support.
Using UX Today and Tomorrow
Aurelia UX is in a very early state. Most (if not all) of the components are still yet to be implemented. However, many features are ready and available for use today. These include:
- Web, Cordova and Electron Host Detection
- iOS, Android and Web Platform Detection
- Design Languages
- Color Swatches and Palettes
- Encapsulated and Bindable Styles
- Theming
This is a pre-alpha release. So, those adopting it should be prepared to deal with regular breaking changes. As always, we'll be sure to provide information on changes and new features here on the blog as we progress.
Calling Component Authors
We know we've got a ton of members within our community who have built and want to build components for Aurelia. We're inviting you to join with our core team to build out the components of the Aurelia UX library. If you have interest in this, please get in touch and we'll direct you in ways that you can help us all build an amazing UX framework, together.
Conclusion
We're building some pretty awesome new open source tech. It's got some amazing new features but there's still a lot we're working on. Our core team is dedicating a ton of time and effort but we would love for you to get involved with us in building this. We hope you will check it out and watch the samples as they grow. We look forward to hearing your feedback and working together with you going forward.
Stay tuned for more news, documentation and demos.