Presentation: Exploring UI Composition in Aurelia

Track: Modern Browser-Based Apps

Day of week:

Slides: Download Slides

Level: Intermediate

Persona: Front-end Developer

What You’ll Learn

  • Learn about Aurelia, a modern javascript platform for building apps.
  • Discover how a component based approach to build apps provides new opportunities.
  • Hear what is happening around open web standards and composition in a modern framework.

Abstract

It’s long been said “favor composition over inheritance”. But how does that play out in a modern front-end framework? In this talk, we’ll look at Aurelia’s approach to UI composition through an exploration of its component model. We’ll see how both conventional and explicit configuration models work together to provide a clean system for developers, all based on modern JavaScript decorators and metadata. We’ll also see how Aurelia expands this approach by adding its own unique dynamic composition capabilities.

Question: 

QCon: What's the main focus of your work today?

Answer: 

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.

Question: 

QCon: What is Aurelia?

Answer: 

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.

Question: 

QCon: In your abstract you say composition over inheritance. We've heard that for a long time. How does that play into developing or working with Aurelia?

Answer: 

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.

Question: 

QCon: What is the persona that you're talking to?

Answer: 

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.

Question: 

QCon: Earlier, you mentioned something along the lines of browser, mobile and desktop applications. Is that going into things like Cordova and Electron to be able to enable that or is there something else that Aurelia supports?

Answer: 

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.

Question: 

QCon: You mentioned engineers and architects. What do you want that persona to walk away from your talk with?

Answer: 

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.

Question: 

QCon: If a senior developer comes up and says what's the next big thing, what should I be focused on, what would you say?

Answer: 

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.

Speaker: Rob Eisenberg

Sr. Program Manager @Microsoft / Creator of Caliburn.Micro, Durandal and Aurelia

Rob Eisenberg is a Developer Experience Engineer, JavaScript Expert, and .NET Architect. He publishes technical articles regularly at http://eisenbergeffect.bluespire.com and has spoken all over the world concerning Web and .NET technologies, Agile software practices and UI engineering. Currently, Rob is working as a Sr. Program Manager for Microsoft, helping to lead the effort in building docs.microsoft.com. He also leads the Aurelia project, a next generation JS client framework that leverages simple conventions to empower creativity. You may also know him as the creator of Caliburn, Caliburn.Micro and Durandal. 

Find Rob Eisenberg at

Similar Talks