Get the Newsletter

Aurelia 2018 Q3 Report

Posted by Rob Eisenberg on November 4, 2018

The third quarter of 2018 was filled with major advances in our vNext Aurelia implementation along with a few cool new updates in today's Aurelia. Read on to hear about what we've accomplished and what's next as we round out 2018 and head into 2019.

Platform Features and Capabilities

We continue to make significant enhancements in today's Aurelia. During the last few months, we've added some pretty major capabilities to our core platform.

Introducing Aurelia Script

Today, we're happy to introduce you to Aurelia Script. For the past several years, the only supported way to use Aurelia was with a module loader or bundler. This meant that Aurelia was more difficult to integrate into traditional, existing web projects and that the barrier for entry was high, because you had to master NPM, Webpack, CLIs, etc. just to get a "Hello World" Aurelia application up and running. With Aurelia Script, we now offer an official single-file build of Aurelia that you can reference from a normal script tag in your HTML. There's no need for any transpilers, bundlers, build process, or any tooling at all. Here's an example of how you might use Aurelia Script through CDN to startup an app:

    
  <html lang="en">
    <head>
      <title>Aurelia Script Tag App</title>
    </head>
    <body>
      <script src='https://cdn.jsdelivr.net/npm/aurelia-script@1.3.0'></script>
      <script>
        const aurelia = new au.Aurelia();
        aurelia
          .use
            .standardConfiguration()
            .developmentLogging();
        aurelia
          .start()
          .then(() => aurelia.setRoot('app.js', document.body));
      </script>
    </body>
  </html>
  
  

We'll be following up with a whole post devoted to Aurelia Script soon, providing more examples and details on how to use it.

Introducing Aurelia's ESM Loader

You may have heard that browsers are now starting to support the import() API, which is the initial gateway to the browser's, standard, built-in module loader. Aurelia's original architecture was built in anticipation of this (4 years in the making) and so we're very happy to announce aurelia-loader-esm . In much the way that we've supported RequireJS, SystemJS, Webpack, and others with loader plugins, we now support the new standard loader as well.

In addition to supporting the standard loader as an option for existing apps, this new loader is built into Aurelia Script from the beginning.

Let Bindings Are Here

In the last few months, we were able to deliver a long-time requested feature to Aurelia's template engine: let bindings. This is an Aurelia vNext feature, which after working out the syntax and semantics in vNext, we were able to port back to the current version of Aurelia with the same behavior. The let element can be used to declare view-specific computed properties within a template. Here's an example of what you can do:

    
  <let fullname="${firstName} ${lastName}"></let>
  <div>
    First name:
    <input value.bind="firstName" />
    Last name:
    <input value.bind="lastName" />
  </div>
  
  Full name is: "${fullname}"
  
  

The let element turns its own attributes into computed properties that you can use anywhere within the view. Any time a dependent property of the let property changes, the let will automatically update relevant computed properties. This provides developers with a highly terse, very efficient, and maintainable way to create view-specific computed properties without needing to change the model or make performance tradeoffs.

Sandbox All The Things!

We've been working hard to make it easier for you to build Aurelia demos and share them with the community and the world. To that end, we're proud to share that Aurelia is now an official patron of CodeSandbox.io. Along with this announcement, we're launching two sandboxes that you can use to build demos with: a JavaScript sandbox and a TypeScript sandbox. You can fork these sandboxes to build and share Aurelia demos with everyone today!

What's Next

More CodeSandbox.io Integration

Now that we've got basic sandboxes set up, we're working with CodeSandbox.io to get official templates setup as well. Once that's done, you'll be able to create a new Aurelia app from a template rather than needing to fork an existing sandbox.

New Tutorials Are Coming

With the the new sandboxes and the availability of Aurelia Script, we believe we can rework our getting started tutorials to be simpler and easier to learn from. Watch for updated tutorials as we round out 2018.

Plugins

In addition to work on the core platform, we're continuing to invest in our official plugins. Several of our plugins have had notable updates in the last few months.

Aurelia Dialog

This quarter we released Aurelia Dialog 1.0.0 and then began working on 2.x which is currently released as Aurelia Dialog 2.0.0-rc.3. One of the main focuses of 2.x was to enable dialog scenarios based on new templating features, primarily the ability to register resources using classes directly. Our plan is to promote 2.0.0-rc.x to 2.0.0 after further community feedback on the changes.

Aurelia i18n

The i18n plugin was fully converted to TypeScript during the last quarter. We've bumped the major version for this release, so we're now at 3.0.0-beta.2. We've made a number of improvements to the core of the i18n plugin as part of this work as well.

Aurelia UX

Q3 was a light period for Aurelia UX, however, we have added a major new feature that enables easier, more-powerful theming. The updated style engine now allows UX Design Styles to be set through new applyTheme and applyThemeGroup APIs:

Here's an example of what the configuration might look like for light and dark themes:

    
  {
    "light": [
      {
        "themeKey": "design",
        "controlBackground": "#fff",
        "controlForeground": "#212121",
        "appBackground": "#fafafa",
        "appForeground": "#212121"
      },
      {
        "themeKey": "toolbar",
        "shadow": "none",
        "background": "transparent",
        "foreground": "#333"
      }
    ],
    "dark": [
      {
        "themeKey": "design",
        "controlBackground": "#373740",
        "controlForeground": "#fff",
        "appBackground": "#33333d",
        "appForeground": "#fff"
      }, 
      {
        "themeKey": "toolbar",
        "shadow": "none",
        "background": "transparent",
        "foreground": "inherit"
      }
    ]
  }
  
  

What's Next

Aurelia Router

We've been doing a lot of work on our router during the last couple of months. We're close to a new release that fixes bugs, adds some new features, converts the source to TypeScript, and adds a host of new tests. Be on the look out for that soon.

i18n and Store vNext

Our i18n and Store plugins are some of our most used and most powerful plugins in our ecosystem. During the last quarter we've landed both in TypeScript, preparing the way for vNext. Over the next few months, we'll be porting these plugins to our vNext infrastructure so they are ready to go on day one when vNext releases.

Tooling

In the last month, we released what is probably the most significant update to the Aurelia CLI in a long time. This new update includes our own auto-tracing bundler which allows you to have all the runtime power of RequireJS or SystemJS, while leveraging a similar bundling capability to Webpack, but without the complexity. If you haven't had a chance to check it out yet, you can read the release blog post or head over to the CLI docs for more in-depth information. We're very excited about this new technology, how it will simplify development with Aurelia, and what we'll be able to do with it in the future.

What's Next

Updated Skeletons

When we initially launched Aurelia, we launched with a number of skeleton projects that you could use to get started. Since then, our CLI has taken the center stage, providing many more options for developers building real apps. Unfortunately, while the CLI has been advancing, our skeleton projects have gone slightly out of date. To improve this, we're adding a new capability to the CLI that enables us to easily generate all the existing skeletons we have today. This will allow us to make the CLI the single source of truth while also providing up-to-date skeleton downloads for those who want them.

vNext Support

You'll find more information on vNext progress below, but we also wanted to mention here that we'll be working to add support for vNext to the CLI as one of our next tooling tasks.

Aurelia vNext

Q3 has been an amazing time for vNext development . While we're still not quite ready for the community to start building with it, we've passed some major milestones and have made massive progress.

JIT Support

In our vNext Announcement we discussed how Aurelia vNext is composed of a Kernel, Runtime, JIT, AOT, Debugger, and Plugins . We're pleased to announce that during Q3 we got the JIT up and running with implementations of most of the compiler's features. This enabled us for the first time to build and run a simple Aurelia application without needing to hand-code the Aurelia runtime's equivalent of "byte code".

JSX and createElement

We've added a powerful new API to Aurelia vNext called createElement. The createElement API matches the React.createElement function signature and enables Aurelia vNext to optionally use JSX for its views and support a render method. That said, most Aurelia developers will be more interested in the fact that the new createElement API is the supported, new, low-level API for dynamic UI composition and the basis for the vNext compose element. In vNext, compose (and createElement) can pass through arbitrary bindings, supports slotted composition and can more consistently compose custom elements and views, including views created on-the-fly. It can do all of this both synchronously and asynchronously, depending on your needs.

Lifecycle Improvements

In today's Aurelia, you might be surprised to see how large the separation between the binding and templating engines is. This was originally done in the spirit of ultra-modularity, but after almost four years, we have yet to see anyone use templating without binding or binding without templating. So, for vNext, we're integrating templating and binding more deeply. By doing this we can improve performance as well as create a more consistent component lifecycle. The new design also enables us to better handle the complex combinations of templating and binding behaviors that are present in real applications. We're pretty excited about the lifecycle work and what it will mean for Aurelia vNext.

Loaders and Bundlers

A core value of Aurelia has always been ease of integration with 3rd party libraries. Today's Aurelia is very good at this, better than any other framework, with one rather important exception. Due to early decisions in Aurelia's design, it requires a lot of work to support new module loaders and bundlers. This was most evident in the amount of work it took us to initially support Webpack. In vNext, we've made some different design decisions, which enable easier support of new loaders and bundlers. Beyond that, we've setup tests for vNext already, to ensure that it works properly with all the major players. Today we have vNext tests for Aurelia CLI (RequireJS/SystemJS), Browserify, FuseBox, Parcel, and Webpack . Also, in the same spirit of Aurelia Script for single-script tag development with today's Aurelia, vNext also supports single-script tag development from day one.

Testing and Publishing

We want our next major version of Aurelia to be the most stable, most validated, and most dependable front-end framework available, so we're investing heavily in testing and CI/CD infrastructure. As of this post, I'm pleased to share that Aurelia vNext is at 91% test coverage with over 48,000 unit and integration tests! We also have a series of e2e tests that we run against all the above-mentioned loaders and we're currently leveraging BrowserStack to ensure cross browser support. These tests are fully automated and run on every pull request. Additionally, we're now publishing automated nightly builds on NPM and making milestone-based pre-alpha releases as well.

Remember, even though we're beginning to publish pre-release builds of vNext on NPM, Aurelia vNext is not yet ready for real use. It's still undergoing significant breaking changes and developer documentation is not yet ready. In other words, don't use it yet. We promise to make a big deal about it when it's ready.

Wrapping Up

The third quarter of 2018 was probably one of the most significant periods in the history of Aurelia's development. With major new scenarios being opened up by Aurelia Script and the amazing progress speeding forward on vNext, we're more energized and excited for the future than ever before. Thanks for joining us on this ride and if you're new here, we welcome you to one of the most exciting places in front-end.