The Eisenberg Effect

Aurelia Q&A

Introduction

Rob Eisenberg

Rob Eisenberg

Sr. PM Manager at Microsoft leading the APEX Online Experience Platform team. Creator of Aurelia. Opinions are my own.


Aurelia Q&A

Posted by Rob Eisenberg on .
Featured

Aurelia Q&A

Posted by Rob Eisenberg on .

Last week Aurelia was announced and we've seen a number of recurring questions crop up on twitter, email lists, forums and elsewhere. This post attempts to provide some answers.

Can I go to production?

What!? No. Please do not do that yet...not for real. Remember that Aurelia is in an "early preview" stage. This basically means that we are beyond Alpha but not quite Beta. What we would love for you to do is check out the video, run through the guide and see what you think of the developer experience. Send us feedback. Tell us what you like and don't like, what is intuitive vs. what is hard to learn. Share with us what you think we nailed vs. what is missing or not quite right.

There are some very good reasons we don't want you to go to production just yet:

  • Deployment - We haven't finished our work on application bundling. It's proceeding well, but not ready just yet. As a result, you can't really deploy your app in a way that results in an acceptable number of http requests. Well, you can if you have some serious experience in this area, but we want to provide you with an official solution...and we haven't finished that yet.
  • Testing - There are parts of Aurelia that have very solid test coverage and there are parts that are still lacking. We won't feel comfortable recommending production deploys until we have additional test coverage.
  • Performance - I've got more to say about Aurelia's performance below. On this point though, performance might be quite good for your scenarios...but it might not. We'd like to do more work on this before we recommend production deploys.

What is the testing story?

We've got a great testing story. Aurelia helps you modularize your code by encouraging the use of ES6 modules and by providing a robust dependency injection container. As a result you can easily test individual components and leverage the DI to inject mocks/spies as needed. Since Aurelia favors the use of view-models, that also means that more of your code will involve state-based testing rather than interaction testing, greatly simplifying the process.

The latest version of our starter kit has Karma+Jasmine set up for unit testing and Protractor+Jasimine set up for end-to-end testing. All you have to do is add your own tests

Note: We aren't finished with the work we are doing around testability. We've got a bunch of additional ideas which you'll see in the coming months.

What is performance like?

First, it's important to note that there are different aspects of a framework like Aurelia which exhibit different performance characteristics. I'll list a few below along with comments on each.

  • Initial Render - The amount of time it takes to initially render the UI. In this area we aren't nearly as fast as we'd like to be. You probably won't notice it on desktop, but you probably will on mobile. We haven't focused on this at all yet, but we do have a solid list of known improvements that should yield massive improvements. Expect to see lots of work in this area soon.
  • Data Updates - The amount of time/work it takes to update an existing UI based on changes in data. Here we are quite fast. This is because we have an observer system that batches changes on the browser's Microtask Queue. As a result, we can easily out-perform a dirty checked system or a virtual DOM system.
  • Animation - Smooth, native-like animations. Aurelia doesn't have animation features built in just yet (aside from what you can do with straight CSS). That's one reason why we aren't at Beta. So, "animation performance" technically doesn't apply to us. However, we hope to integrate with a number of popular animation libraries and we'll work on making that as efficient as possible.

To summarize, some things are quite fast and some aren't but we've barely even begun work on performance, so expect big improvements in the coming months.

Can I integrate with React?

Certainly. It's actually very easy to create an Aurelia Custom Element that, rather than using our templating engine, uses React internally for all its rendering. You could even provide bindable attributes in HTML that trigger the internal re-render. Oh...and since 6to5 supports JSX...you can mix that together with your Aurelia component in the same file. Here's a fictitious example:

export class MyElement {  
    static metadata(){ 
        return Behavior
            .customElement('my-element')
            .withProperty('foo')
            .noView(); 
    }

    static inject() {
        return [Element];
    }

    constructor(element) {
        this.element = element;
    }

    bind() {
        React.render(<MyReactElement foo={this.foo} />, this.element);
    }

    fooChanged(){
        this.bind();
    }
}

You can now use it like this in your Aurelia views:

<my-element foo.bind="some.property"></my-element>  

When the component it databound, it will render itself for the first time with the bound values. Any time the bindings update, the component will re-render itself internally.

How are Web Components used?

Web Components consist of four specs:

  • HTMLTemplateElement - Used to create UI "templates" out of inert DOM which can be instantiated and used as needed.
  • HTMLImports - Used to transform HTML into a sort of "package manifest" enabling easy inclusion of external dependencies.
  • ShadowDOM - Enables a "hidden" or "shadow" DOM in which developers can declare non-semantic UI used for internal rendering of custom elements.
  • Custom Elements - Enables the document.registerElement API for creating custom elements along with a streamlined lifecycle.

Note: Some people also call out Scoped CSS as part of Web Components as well, though it mostly falls under ShadowDOM.

Aurelia's views are built using HTMLTemplateElements. Since IE still doesn't support this, we provide our own Polyfill. Aurelia's views are loaded using HTMLImports, but this is abstracted so that you can change the loading strategy. Aurelia custom elements can optionally render to ShadowDOM, but we have an Aurelia-specific fallback implementation so you can still use content selectors without ShadowDOM and any element specifying ShadowDOM will still function on browsers that don't support it.

The only spec we don't leverage directly is Custom Elements. There are multiple reasons for this, but let's just say that if we were to do that, we would lose a lot of control over templating, rendering and binding which would make this framework much less stable, performant and testable. An easy to understand example of this is the fact that you can't use dependency injection with custom elements. That said, it's likely that by v1 release we will enable you to export your Aurelia elements to a standard Custom Element format for use outside of Aurelia.

So, we use 3 out of 4 of the specs internally and expect to support the 4th in some fashion by release. We've abstracted the use of these technologies in various ways and provided fallbacks so that browser support is not necessary. I've got a lot more to say about Web Components....they have serious flaws and I believe they should not be standardized or implemented in their current form (it's not the idea of Web Components that is bad...it's the actual spec). The topic deserves an entire blog post...which I will write soon. Regardless, Aurelia works well with all Web Component specs today.

Can I compose UI without a router?

Yes, indeed. To do this you can leverage Aurelia's compose Custom Element. Here's an example from the docs that shows how you can render different view-models and views over a heterogeneous list named items:

<template repeat.for="item of items">  
    <compose
      view-model="widgets/${item.type}"
      model.bind="item">
    </compose>
</template>  

Why jspm for package management?

If you haven't checked out JSPM yet, you really owe it to yourself. It's a package manager designed with ES6 modules in mind from the beginning, so it's a perfect fit for use with Aurelia. Also, the JSPM command line directly integrates with the SystemJS module loader. By having deep integration between the package manager and the loader, you can have a truly elegant development experience. Just the other day I needed to leverage the LogEntries JavaScript api in my application for logging, so I executed this command to install their library from Github into my project:

jspm install github:logentries/le_js  

After that I imported their library in my code like this:

import LE from 'le_js';  
LE.info("JSPM makes ES6 modular development easy...");  

That's really all there is to installing a library from NPM or Github and importing it for use in your own code.

Note: You don't have to use JSPM or SystemJS. You can use any package manager and any loader. We've got support for Bower and Require-based APIs as well out of the box. You can plug your own stuff in too.

Note: I have no affiliation with LogEntries, but this was a real world scenario from my consulting this week, so I thought it appropriate to share.

What is your roadmap?

As mentioned previously, we are currently in an "early preview" stage. Next we want to go to an official beta. For that to happen we need three things:

  • More Testing
  • Performance Optimizations
  • Add Missing Features

We'd like to have the API mostly locked down for beta so that we can just focus on bug fixes, stability and additional performance improvements for the v1 release. I can't make promises about when this will happen. There are a number of external factors that could affect this, but we hope the beta work won't take more than 3-4 months. If you are thinking about starting a new project with Aurelia today, and are concerned about whether or not it will be ready in time for your launch, please get in contact with us and we can explore your situation to discover if timing is likely to be right.

Note: You may wonder what features are missing. This amounts to a few things in the databinding engine we'd like to add, integration with animation systems and some other "odds and ends".

Can I use this with PhoneGap/Cordova?

Yes. We've got PhoneGap working with require.js as the loader without any problems. There seems to be an issue with using system.js currently, but we'll work with that project to sort out any problems.

How do I develop with other languages?

We want to encourage you to learn and use ES6, the next version of JavaScript (and ES7 in the near future as well) but you aren't limited to using ES6. Another great choice is TypeScript, an open source language from Microsoft that seeks to combine ES6 with a structural type system and strong tooling support. TypeScript isn't quite aligned with ES6 features yet, but they are moving in that direction quickly, so it makes a great combination with Aurelia.

You can also use AtScript, an extension of ES6 via the Tracuer compiler. AtScript extends JavaScript with Type and Metadata annotations. Aurelia can take advantage of this type info to power its dependency injection and the metadata to power its behavior system. To tell Aurelia you want to do this, all you have to do is add the atscript attribute to your app's host element or call the plugin API to install AtScript support with this aurelia.use.atscript();

If you want to use plain ES5, there's no problem there either. We'll add some convenience functions to the mix if you want, in order to smooth out the ES5 experience. To get those add the es5 attribute to your app's host element or call the plugin API to install ES5 support with this aurelia.use.es5();

Because Aurelia is built around standard JavaScript idioms, you can really use any language you want.

How do I develop with tool X?

Tools today have various support for ES6. I've used Sublime with an ES6 plugin and that worked quite well for me. I know others have been successful with WebStorm as well. Visual Studio is missing support for ES6, but does have fantastic TypeScript support, so this is an obvious winning combination. You can vote for ES6 features here. Recently I've been trying out Atom which seems to work pretty well too.

Can I migrate my Durandal/Angular app to Aurelia?

Yes you can. We've got several members in our community who have already successfully migrated both Durandal and Angular applications. We've asked them to make notes as part of this process and we intend to combine them to form the basis of an official migration guide in the near future.

How do I get support? Can I get commercial support?

There's no commercial support at this time. As we approach Beta we're lining up a number of partnerships as well as our own business plans so that those interested in this option will be able to obtain various forms of support. We know that for many of you, having a commercial support option is a requirement. We want to make sure your needs are met.

In the mean time, if you need help on an issue today, the best way to get assistance is to hop into our gitter channel and ask a community member.

Another MV* framework?

In a very real sense, this isn't another framework. Aurelia is the next generation implementation of Durandal, a SPA framework that's been around and successful for a number of years. Aurelia significantly evolves the ideas of the previous version and brings it into alignment with the future web. Even though Durandal users will find it very familiar we felt it was a significant enough change to warrant a new name.

Note: Interestingly enough, some ideas in Aurelia come from my work on Caliburn and Caliburn.Micro...ideas which I started development on almost 10 years ago. One fun example is Aurelia's dependency injection container...which started as a port of Caliburn.Micro's SimpleContainer.

How can I contribute?

Its really easy to contribute. First, just try it out and send us some feedback. If you've got more time, consider helping us to track down and fix bugs. We love pull requests and we love to hear your creative ideas too. We're very open to pretty much any type of help you want to give. Not just hacking the core framework. It's a tremendous help to write sample apps, blog posts, answer questions in the gitter channel, translate our documentation into other languages...there are many ways to get involved. If you are inclined, we welcome you. If you aren't sure how to help, get in touch and we'll make some recommendations.

How can I learn more?

As always, begin by watching the video and reading the get started guide. They go hand in hand. After that, you may want to read our preliminary documentation. Finally, if you have questions as you work, join us in our gitter channel where members of the community can easily help each other.

We plan to continue releasing regular content like this through the Durandal blog. As we rev up, various members of our team will begin writing here and I think it will be a tremendous opportunity to disperse knowledge not only on Aurelia but also on SPA development in general. We hope it will be a great resource for the community as we move forward.

Additionally, I've had the opportunity to record several podcasts since the announcement. Each one has taken a slightly different direction and covers different types of information. The Pete on Software podcast was published today and soon the .NET Rocks and Changelog episodes will be up as well. There's much more planned, so stay tuned!

Rob Eisenberg

Rob Eisenberg

http://www.bluespire.com

Sr. PM Manager at Microsoft leading the APEX Online Experience Platform team. Creator of Aurelia. Opinions are my own.

View Comments...