Intro To Aurelia

Matthew Vogt

Aurelia is a JavaScript client framework for mobile, desktop and web leveraging simple conventions and empowering creativity.

Lead by Rob Eisenberg

Developed by a dedicated team of leads and core developers with hundreds of contributions from the open source community

Highlights

All the usual things you'd expect in a modern application framework

Data Binding and Templating
Routing
Dependency Injection
HTTP Services
Data Validation
Testability

Some reasons you may want to use Aurelia and that set it apart from other frameworks

Open source but comercially backed
Convention over Configuration
Extensible and Integrates with others
Unobsrusive and easy
Self contained

uses the MIT license which is very permissive and popular. Backed by Bluespire.
- Being comercially backed means that you can get support from the company that develops it and you can purchase enterprise support services. This is important for some corporate dev shops that have strict rules about the kinds of software and tools that they can use.
The framework makes basic dicisions for you and stays out of your way. This reduces the amount of code you have to write and helps developers follow solid patterns
It's modular and designed to be customized easily. As such, it works well with other libraries and frameworks. React, Polymer, jQuery and anything else that you like can all be easily used inside an Aurelia application.
You build your components with plain javascript and the framework stays out of your way making it easy to learn and get started with.
everything you need to build an Aurelia applicaiton is packaged with Aurelia and there are no third party libraries that you need to depend on or learn about. Standards-compliant javascript and HTML is all you need

Application building blocks

ES-Next or TypeScript
Host page
Module Loader/Bundler
Bootstrapper/main module
Components

the things you need to build an Aurelia application

You can decide what you want to use, Aurelia has full support for both including type definition files for typescript so you get all the tooling support you like. All the examples here will be in TypeScript
Aurelia doesn't care what you use for your back end so however you want to deliver a page from your server to your browser is up to you.
You need to get javascript to the browser. Aurelia supports SystemJS and WebPack. It also has its own CLI which can handle loading, bundling and a bunch of other stuff.
You need to get your application going. The bootstrapper is the first thing that executes and the main module is where you configure and initialize your application
like many modern js frameworks, Aurelia applications are composed of a hierarchy of components. At a minimum, you need a single root application component.

Host page and loader


<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app="src/main">
    <script src="scripts/system.js"></script>
    <script src="scripts/config-typescript.js"></script>
    <script src="scripts/aurelia-core.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

Main module

src/main.ts


import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use.basicConfiguration();
  aurelia.start().then(() => aurelia.setRoot());
}

When the aurelia bootstrapper loads it looks for that aurelia-app attribute and then loads the module specified by the value of that attribute.
Your main module is required to export a single function called 'configure' that the framework will call. This is where you configure your application and then start it.
This code tells aurelia to use its basic default configuration. There are all kinds of custom configuration options that you can choose from.
When you start the application, you need to tell aurelia to load the root component. By convention, the root component is called "app". If we wanted to call it something else we could and we would pass that name to setRoot()
*** This is all I need to do to bootstrap the app. I don't need to create any other kinds of configuration here or anywhere else to let Aurelia know what I need for this application. It uses conventions to work all that out for you.

App Component

The root container of our application.

In Aurelia, a component is a view and view-model pair. The view is for your UI markup and is written in HTML and the view-model is a TypeScript (or JavaScript) class that contains the UI logic.

by convention, they have the same file name with the .html extension for the view and .ts (or .js) extension for the view-model

src/app.ts


export class App {
	message = "Hello from Aurelia!"
}

src/app.html

app.ts is nothing more than a simple typescript class. It exposes the properties and methods that we want to bind to the UI.
app.html is an html template that contains the layout and static content for this component. Every Aurelia view must have the template html element as its root element.
When we tell Aurelia to load a component by name, it will tell the module loader to go get the view and view-model files for that name. Then it will create an instance of your JavaScript class and bind it to the view.
The ${message} is an example of Aurelia's data binding syntax. This tells it to take the value of the message property and insert it at that location of the template
Then Aurelia will take the html generated from binding the view-model to the view and insert it into the DOM. Since this is the root component, Aurelia will append it to the element that has the aurelia-app attribute. This is also just a convention that can be overridden.
*** you don't need any special annotations for what things this component is dependent on, where or what its view is or even the need to tell Aurelia that this is a component. Conventions do all that for you so the only thing you need to do is implement your application logic

take a quick look at the example

Data Binding

Data binding to HTML element attributes






Blog
Twitter
LinkedIn

Databinding is an important part of an application framework. It allows us to keep our application logic separate and disconnected from the UI so that we can test it better. It also means that we don't have to write a bunch of code for getting data in and out of the UI or for reacting to UI events.
attribute binding syntax: attribute name dot binding command equals expression.
demonstrating the 4 different attribute binding commands:
- .bind is the default that you'll probably use most of the time. The framework picks the most appropriate type of binding to use. two-way for form elements and one-way for almost everything else
- .two-way means the data flows in two directions. When either of the attribute value or view model property value change, the other will be updated
- .one-way means the data only flows from the view-model to the view.
- .one-time means the data only flows from the view-model to the view only one time. This is an optimization for cases where you know the data won't change so it'll instruct the framework stop observing the view-model property
also shows that the binding expression can access nested properties of the view-model
you can bind practically any value to practically any html attribute

Data Binding

Data binding to HTML element events

Templating

Repeating


Hello, ${friend}! 

	${person.name}

Conditional Display


some content
some content

Aurelia's Templating system is powerful and lets you do lots of things to compose your UI.

repeating

binds to an iterable object and repeats that template for each item . You'll usually use arrays but you can also bind to Map and Set objects

friends is an array of strings

people is an array of person objects

conditional display

binds to a truthy object, two ways to show or hide content

if will remove the element from the dom

show will apply display:none style

other things you can do with the templating system

You can bring in reusable chunks of HTML and inject them into your template
you can bind any arbitrary object to any arbitrary html template effectively allowing any view-model to be bound to any view
you can use specialized vew-spy and compile-spy attributes which emit Aurelia's internal objects to the console allowing you to see what it's doing to help with debugging
you can create custom elements and attributes allowing you to create re-usable portable and self-containd application pieces

*** Notice in all of our templating and data binding syntax there aren't any funny symbols by our attribute names like perenthesis and square brackets and stars and hashes. Just words that make sense.

Routing

Basic root route configuration in app.ts


import {RouterConfiguration, Router} from 'aurelia-router';

export class App {
  configureRouter(config: RouterConfiguration, router: Router): void {
  this.router = router;
  config.title = 'Aurelia';
  config.map([
    { route: ['', 'home'],       name: 'home',       moduleId: 'home/index',    nav: true },
    { route: 'users',            name: 'users',      moduleId: 'users/index',   nav: true },
    { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' }
    ]);
  }
}

You configure routes by implementing a the configureRouter() function in your root component which gets called by the framework

what's happening here:

importing the RouterConfiguration and Router types
Assign the router to a property on the app component so that we can access it later. It has useful features so you can navigate, dynamically add routes, inspect the configured routes or find out if the application is currently routing. It also exposes the Navigation model which you can use to bind to the UI in a repeater to generate dynamic navigation.
the title property on the RouterConfiguration sets the title of the HTML document. This is also exposed in other places so you can dynamically set the title based on the current route or other application state
the map function on the RouterConfiguration is where we configure the routes. It takes an array of route config objects. at a minimum they need three properties:
- route - a string or array of strings which are a url pattern to match the location in the browser
- name - the name of the route so we can refer to it later
- moduleId - the component to activate for this route. Remember the naming convention here. home/index refers to an index.html and index.ts file in the home directory relative to where app.ts is
There are other properties as well. the nav property specifies that this route should go into the NavigationModel so that you can use it for UI binding.
You can also add a settings property which can be any arbitrary data that will get passed to the component when it is activated.
The route can have parameters. Indicated by the :id segment of the route. When the router does its work it will pull that value out of the URL and pass it to your component when it activates

Routing

Router view in app.html

Routing

Activating a component


import {RouteConfig} from 'aurelia-router';

export class UserDetail {
  activate(params: any, routeConfig: RouteConfig): Promise<any> {
    //the id parameter from the route will be in params.id
	
  }
}

Components have a screen activation lifecycle.
implement the activate function to get access to the route parameters and other info about routing including any query string parameters or other things that you may have set when you configured the routes.
the routeConfig argument also has a title property which you can use to set the document title for the browser window.
notice that the activate function returns a Promise. This is optional but very useful. If you do return a promise, the router will wait for it to resolve before continuing with the lifecycle. This gives you the ability to do asyncronous things like load data from an HTTP service.
You can also implement 3 other lifecycle hooks: canActivate, canDeactivate and deactivate.

Routing

Other fun features of the Aurelia router

Push State
Nested Routers
Redirects and Unknown Routes
Navigation Pipeline
Layouts

push state - by default, Aurelia's routes are based on the URL Hash. you can also configure it to use pushState instead.
nested routers - any component can implement that configureRouter function. I could have a user component that routes to /users and in the that component define a /profile route and a /activity route. Routes that you define in a component are relative to that component. in our case the profile component would be activated when the browser goes to the /users/profile location.
redirects/unknowns - any route you configure can be redirected to a specific route. The router can also be instructed to activate a specific component or route if the url in the browser can't be matched to any known route
navigation pipeline - you can hook into steps of the navigation pipeline at the root applicaiton router. this allows you to take global action as routes go through 4 pipeline steps: authorize, preActivate, preRender, postRender. While you are in a pipeline step, you can cancel or manipulate the current navigation instruction
layouts - you can define layout templates for routes. Multiple routes can use the same layout template and a layout template can optionally be bound to a view-model

Dependency Injection

Everyhthing is injectable and most things can be injected

Injecting a service into a component


import {RouteConfig} from 'aurelia-router';
import {autoinject} from 'aurelia-framework';
import {UserService} from 'services/user-service';

@autoinject
export class UserDetail {
  constructor(private userService: UserService){}

  activate(params: any, routeConfig: RouteConfig): Promise<any> {
    return this.userService.getUser(params.id).then(users => {
	  this.users = users;	
	})
  }
}

this is the UserDetail component from the routing example but we've injected the UserService into it
I need to import the UserService so that my component can know something about it
I need to import the autoinject annotation and decorate my class with it. This is typescript specific. This tells the framework to reflect on the constructor parameters and infer the types to inject
- this won't work for plain javascript because there is no type information defined on the constructor. You have to use the @inject annotation instead to specify the types and order of parameters to inject
I need to create constructor parameters.

That's it. Now whenever this class gets instanciated it will be injected with an instance of UserService.

*** notice that we didn't have to configure any providers or do anything special for Aurelia to know what to do.

This is as simple as it gets but there's much more you can do.

you can get access to the DI container and manipulate it if you want
you can create custom object lifetimes for the types that you register and inject
you can create and use child containers
services can be lazy-loaded or have a new instance created every time

Creating a new Aurelia application

Two easy ways to get started: Skeleton Projects and the CLI

Skeleton projects are empty applications pre-configured with everything you need to get started
https://github.com/aurelia/skeleton-navigation

The CLI gives you the flexibility to create a new blank application with more configuration options
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/1

What else?

Useful Links
Aurelia Documentation - http://aurelia.io/hub.html.
Aurelia Blog - http://blog.aurelia.io/ Information about releases, how-to articles, other news.
Jeremy Danyow's blog - https://www.danyow.net/ One of the Aurelia team leads, lots of good posts about how Aurelia works and how to do stuff with it.
The Source Code, obviously - https://github.com/aurelia.
http://builtwithaurelia.com/ - A website that showcases lots of cool stuff folks have built with and for Aurelia.

Any Questions?

Intro To Aurelia

Matthew Vogt

Highlights

Some reasons you may want to use Aurelia and that set it apart from other frameworks

Application building blocks

Host page and loader

Main module

App Component

${message}

Data Binding

Data Binding

Templating

Routing

Routing

Routing

Routing

Dependency Injection

Creating a new Aurelia application

What else?