Skip to content

Home

Jump to bottom
Rob Eisenberg edited this page Nov 17, 2016 · 3 revisions

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 so we're building 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.

Some Interesting Facts About Aurelia UX

  • 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 - Since 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 Strong 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 - Since 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, ViewEngine and ViewFactory and Aurelia UX has a StyleCompiler, StyleEngine and StyleFactory which 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.

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.

Clone this wiki locally