Aurelia in Action
Sean Hunter
  • July 2018
  • ISBN 9781617294785
  • 432 pages
  • printed in black & white

Makes building single-page applications easy and fun.

Alessandro Campeis, Vimar

Aurelia in Action teaches you how to build fantastic single-page applications with the Aurelia framework. You’ll learn about modern design practices and a modular architecture based on web components, perfect for hybrid web + mobile apps.

Table of Contents detailed table of contents

Part 1: Introduction to Aurelia

1. Introducing Aurelia

1.1. What is Aurelia

1.2. Why do I care?

1.2.1. How complicated are the applications we are trying to build?

1.2.2. How important are web standards compliance to the team?

1.2.3. What past development experience does the team have?

1.2.4. How is the team organized?

1.2.5. What kind of commercial and community support do you need?

1.3. What kind of projects make Aurelia shine?

1.3.1. Server-side application with a sprinkling of JavaScript

1.3.2. Client-side-rendered SPA

1.3.3. The hybrid approach: server side with SPA islands

1.3.4. Server-side-rendered SPA

1.3.5. So where does Aurelia sit?

1.3.6. What makes Aurelia different?

1.4. Who is this book for?

1.5. A tour of Aurelia

1.5.1. Binding

1.5.2. Handling DOM Events

1.5.3. Routing

1.5.4. Inside the ViewModel, and what's this about components?

1.5.5. The Aurelia component lifecycle

1.5.6. Loading data from an API

1.5.7. Dependency injection with Aurelia

1.5.8. Data-binding and view render

1.6. Summary

2. Building your first Aurelia application

2.1. Introducing my-books

2.2. Building Aurelia

2.2.1. Option 1 - Download the quick start

2.2.2. Option 2 - Skeleton application

2.2.3. Option 3 - Aurelia CLI

2.2.4. Creating the my-books project

2.3. One-way and two-way data-binding and event delegation

2.3.1. Adding the functionality inline

2.4. Creating components using Aurelia custom elements

2.5. Building services and retrieving data from a REST API

2.6. Maintaining Page State with the Aurelia Router

2.6.1. Configuring the Router

2.7. Moving Forward

2.8. my-books project status

2.9. Summary

Part 2: Exploring Aurelia

3. View resources, custom elements, and custom attributes

3.1. Understanding Aurelia’s templating primitives

3.1.1. Aurelia’s templating primitives

3.2. CSS resources

3.2.1. Setting up the project dependencies

3.2.2. Adding the CSS resources

3.2.3. Styling the my-books views

3.3. Custom elements

3.3.1. Custom element explained

3.3.2. My-books custom elements

3.3.3. HTML-only custom elements

3.4. Custom attributes

3.4.1. Creating a tooltip custom attribute

3.4.2. Single-value binding

3.4.3. Options binding

3.5. my-books project status

3.6. Summary

4. Aurelia templating and data binding

4.1. Templating conditionals

4.2. Repeaters

4.2.1. Aurelia repeater contextual properties

4.3. Data binding with Aurelia

4.3.1. Understanding how data-binding works

4.4. Binding commands

4.4.1. One-way bindings

4.4.2. String interpolation binding

4.4.3. Two-way bindings

4.4.4. One-time binding command

4.5. Handling DOM Events

4.5.1. Trigger

4.5.2. Delegate

4.6. my-books project status

4.7. Summary

5. Value converters and binding behaviors

5.1. Creating a value converter

5.2. Applying value converters to lists

5.2.1. Value converter composition

5.3. Binding behaviors

5.3.1. Throttle and debounce binding behaviors

5.3.2. UpdateTrigger binding behavior

5.3.3. Signal binding behavior

5.4. my-books project status

5.5. Summary

6. Inter-component communication

6.1. Aurelia components

6.1.1. The component lifecycle

6.2. Enhancing my-books

6.3. Enhancing my-books

6.3.1. Aurelia’s three core inter-component communication techniques

6.4. Passing data to child components with data-binding

6.5. Event Aggregator to the rescue

6.5.1. The Event Aggregator pattern

6.5.2. The Aurelia Event Aggregator

6.5.3. Fixing book removal with the Event Aggregator

6.6. Extending my-books

6.7. Custom Events

6.7.1. Browser support for Custom Events

6.7.2. Using Custom Events

6.7.3. Implementing the star-rating component

6.8. Summary

7. Working with forms

7.1. Working with forms in my-books

7.2. Check boxes

7.3. Radio elements

7.4. Selects

7.4.1. Single value select binding

7.4.2. Multiple value binding

7.5. Validation

7.5.1. The Aurelia validation plugin

7.5.2. Aurelia validation overview

7.5.3. Adding validation to the edit-books form

7.6. Summary

8. Working with HTTP

8.1. Overview of the Aurelia’s HTTP toolkit

8.2. Using the aurelia-fetch-client

8.2.1. Adding fetch to my-books

8.2.2. Intercepting and manipulating requests

8.3. Working with the aurelia-http-client

8.4. Summary

9. Routing

9.1. Understanding client-side routing

9.2. Introducing the Aurelia router

9.2.1. Basic configuration

9.2.2. Routing metadata

9.3. Passing route data to components

9.3.1. Route option types

9.3.2. Adding the user management pages

9.4. Specifying route modules dynamically

9.5. The screen activation life-cycle and route pipeline

9.5.1. The screen activation lifecycle

9.5.2. Pipeline steps

9.6. Aurelia’s 404

9.6.1. Handling an unknown route — option 1, module ID

9.6.2. Handling unknown routes — option 2, a function

9.7. Redirecting routes

9.8. View ports

9.9. Extending my-books with layouts

9.9.1. Creating the layouts

9.9.2. Adding the login view

9.9.3. Modifying the routing configuration

9.10. my-books project status

9.11. Summary

10. Authentication

10.1. Client-side authentication

10.1.1. Token-based authentication

10.1.3. JWT format

10.2. Securing my-books

10.2.1. Authentication architecture

10.2.2. Creating the authentication service

10.2.3. Implementing login

10.2.4. Intercepting HTTP requests

10.2.5. Routing redirection

10.2.6. Filtering the navigation bar

10.3. my-books project status

10.4. Summary

11. Dynamic composition

11.1. Static versus dynamic composition

11.2. The <compose> custom element

11.3. Dynamically composed views

11.3.1. Creating partial views

11.3.2. Creating a configurable form with dynamic composition

11.4. Summary

12. Web components and Aurelia

12.1. Introduction to web components

12.2. HTML Imports

12.3. HTML templates

12.3.1. Using HTML Templates in Aurelia

12.4. Custom elements

12.5. The Shadow DOM

12.5.1. Vanilla Shadow DOM

12.5.2. Shadow DOM Slots

12.5.3. Using the Shadow DOM with Aurelia

12.6. Creating the my-books book-share component

12.6.1. Adding the sharing button

12.6.2. Create the ux-card component

12.6.3. Create the subcomponents

12.6.4. Create the book-card component

12.6.5. Tie it all together

12.7. my-books project status

12.8. Summary

13. Extending Aurelia

13.1. Overriding Aurelia’s default conventions

13.1.1. Specifying a view template relative path with @useView

13.1.2. Handling custom element views manually with @noView

13.1.3. Specifying views as template strings with @inlineView

13.1.4. Explicitly naming custom elements with @customElement

13.1.5. Explicitly naming custom attributes with @customAttribute

13.2. Creating an inspect custom binding behavior

13.3. Creating a Selectize.js custom attribute

13.4. my-books project status

13.5. Summary

14. Animation

14.1. Getting started with SPA animations

14.1.1. When and what should you animate?

14.1.2. CSS animations

14.1.3. JavaScript animations

14.2. Aurelia’s animation framework

14.2.1. The animation API

14.3. CSS animations with Aurelia

14.3.1. Adding transitions on au-enter

14.3.2. Adding transitions when classes are added or removed

14.4. Summary

Part 3: Aurelia in the Real World

15. Testing

15.1. Testing SPAs

15.2. Get started testing with the Aurelia CLI

15.2.1. Creating a hello world test

15.3. Testing value converters

15.4. Testing services

15.5. Testing custom elements

15.6. Testing custom attributes

15.7. End-to-end testing

15.7.1. Testing the login user stories

15.7.2. Running the tests

15.8. Summary

16. Deploying Aurelia applications

16.1. SPA bundling

16.1.1. What about HTTP/2?

16.2. Bundling and the Aurelia CLI

16.2.1. Versioning bundles

16.2.2. Splitting application bundles

16.3. Deploying my-books to Firebase

16.4. Summary

Appendixes

Appendix A: Installation & set up

A.1. Installing Node.js

A.2. Installing the Aurelia CLI tool

A.3. Troubleshooting

A.4. Adding Bootstrap and Fontawesome without a CDN

A.5. Installing the Aurelia validation plugin

A.6. Setting up my-books server

A.6.1. Installing MongoDB

A.6.2. Clone the my-books server repository

A.6.3. Start MongoDB server

A.6.4. Start MongoDB server

A.6.5. Install aurelia-http-client package

A.6.6. Enabling my-books-server JWT authentication

About the Technology

Try Aurelia, and you may not go back to your old web framework. Flexible and efficient, Aurelia enforces modern design practices and a modular architecture based on web components. It’s perfect for hybrid web + mobile apps, with hot features like dynamic routes, pluggable pipelines, and APIs for nearly every flavor of JavaScript.

About the book

Aurelia in Action teaches you how to build extraordinary web applications using the Aurelia framework. You’ll immediately take advantage of key elements like web components and decorators when you start to explore the book’s running example: a virtual bookshelf. As the app unfolds, you’ll dig into templating and data binding the Aurelia way. To complete the project, you’ll take on routing and HTTP, along with tuning, securing, and deploying your finished product.

What's inside

  • Templating and data-binding
  • Communication between components
  • Server-side and SPA design techniques
  • View composition

About the reader

Written for developers comfortable with JavaScript and MVC-style web development.

About the author

Sean Hunter is a web developer with nearly 10 years of experience. He’s extremely passionate about all things Aurelia and has been working with the framework in production since the early beta days. Sean got a taste for teaching developers how to get started with Aurelia while visiting user groups across the UK, and he’s been excited to expand on this teaching effort with this book. These days, Sean is working in a variety of web-development technologies with companies across Australia, and he blogs at https://sean-hunter.io.


FREE domestic shipping on three or more pBooks

The perfect way to transform your applications into successes.

Philippe Charrière, Clever Cloud

All navigators need a map, and this book provides a path into the jungle of production-ready web-development frameworks.

Joseph Tingsanchali, Netspend

Learn how to build a single-page app that aims for simplicity, modularity, and convention over configuration.

Peter Perlepes, Growth