Presentation: Exploring UI Composition in Aurelia

Rob: I work at Microsoft as a Program Manager helping to envision and ship a company-wide, next-generation technical documentation platform. On the side, I lead the Aurelia project, so I also meet with a lot of groups, both inside and outside the company, to provide guidance and help them work through some of the problems of modern progressive web app development.

Rob: Aurelia is a modern JavaScript platform for building apps that work in the browser, on mobile and on desktop. It's really about modern progressive web applications based on open web standards. Aurelia provides a set of core capabilities and patterns that are centered around application development, making it very easy for you to build components, put those components together into screens and put those screens together into apps. It does all this in a way that is maintainable, testable, extensible, and a joy to work with.

One important aspect of Aurelia is that it tries very hard to stay close to web standards. With Aurelia, building apps involves mostly plain, “vanilla” JavaScript. Aurelia encourages the use of ECMAScript 2015 and beyond or TypeScript, both of which we’ve used to build the platform itself. On the HTML side, we adopt a lot of standards too, by leveraging modern DOM APIs and Web Components.

Rob: In Aurelia, everything is a component. There are lots of different ways that you can use these components, but there's a core infrastructure in Aurelia's rendering engine that is essentially all component-based. When we want to build an app, the app is actually just a component. It's composed of screens, usually different screens that you navigate to in the app, but those are just components and those screens are composed of widgets or reusable UI pieces that are just components. Regardless of whether you're building an app, an individual screen or some fancy widget, the programming model in Aurelia is all the same. It's components all the way down.

This idea of building your app out of these component building blocks gives you a very easy way to understand how to put your apps together because there's essentially one overarching concept that you learn. If you're using a router to navigate, or are creating a custom button, or you're creating a modal dialogue, or if you're doing some kind of dynamic rendering over data, the approach, from an engineering perspective, is the same for every scenario. You’re building components the same way but the framework is composing them together in different ways. That's extremely powerful.

On top of this, the framework itself doesn't rely on any kind of inheritance. When you create components, you don't have to inherit from any kind of base class. Aurelia favors plain JavaScript, so you just create a plain class and a simple HTML template, and that becomes a component. Components can leverage Web Component Shadow DOM slot composition, so you can easily aggregate components and bring components together in different ways to very quickly and simply build complex applications.

Rob: This talk is mostly geared toward engineers and architects. Engineers, regardless of whether they have a server or a client background, should see familiar patterns while learning something new. They will see a lot of connections to previously server or desktop-only techniques and I think they’ll find a lot of interest in the direction that the web is moving.

I am going to talk about Aurelia’s component model but I'm going to tie that in strongly to what's happening with the modern web and Web Components because that's the core of Aurelia and something we deeply value. I think architects will find this interesting from an overall standpoint.

Rob: Today, Cordova and Electron are used in combination with Aurelia. We have three typical hosts: the browser host, the Electron host and the Cordova host. You would first use Aurelia as the application platform to structure and implement the app. Then, you drop it into any of these three hosts, depending on your deployment strategy.

Rob: I want them to walk away with a component mindset and understand the power of a component model that supports various, rich flavors of composition. When you have the kind of capabilities that Aurelia provides and you think in these terms, it’s natural to imagine a lot of possibilities for how you can optimize your app development as well as your entire organization. For example, is there an opportunity for the organization to unify around a component library that can work at the micro level? I’m talking about non-application specific pieces. For example: here’s how we're going to handle lists in our apps; here's how we're going to handle buttons, etc. These are the kinds of things that you end up having to spend engineering resources on for every single project. There is a lot that can be gained across projects by sharing these non-app-specific components. Next, I’d want them to zoom out from that micro level and think about whether they have opportunities to share higher level components too. Examples of this might be common user management components or even whole experiences that are shared across a suite or family of apps.

Basically, I want them to realize that these sort of things are possible today. You can have components from the very smallest piece of your app all the way up to the app itself being a component that is embedded within another app. By building this way and thinking this way you can then look at different levels of the app structure and find different granularities of reuse across projects as it makes sense.

Rob: It's super hard to predict the future. The thing that I tend to focus on is staying in sync with web standards. The web is going to outlive any framework or library, so it’s best to invest there. That’s a big motivator for why Aurelia works so hard to stay close to standards.

If I had to single out one thing though, it's the movement around Progressive Web Apps. I'm hopeful they’ll help us move away from an app store model and more towards web apps as a first class content type on the web. This means that search engines will understand what a PWA is. Instead of going to an app store, you would just jump into your normal internet search engine, search for an app and straight from the search results page, click to install it. The progressive web app would install like any native app on whatever device it is that you're running on. This isn’t here yet, but various things are moving in this direction, and it's a future I would love to see. That's the future I'm excited and hopeful about, though we’re only in the beginning of that transition now. I would be keeping an eye on PWAs, definitely.