Aurelia in Action

by Sean Hunter

Overview

Summary

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.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

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.

Table of Contents

PART 1 - INTRODUCTION TO AURELIA
1. Introducing Aurelia
2. Building your first Aurelia application
PART 2 - EXPLORING AURELIA
3. View resources, custom elements, and custom attribute
4. Aurelia templating and data bindin
5. Value converters and binding behaviors
6. Intercomponent communication
7. Working with forms
8. Working with HTTP
9. Routing
10. Authentication
11. Dynamic composition
12. Web Components and Aurelia
13. Extending Aurelia
14. Animation
PART 3 - AURELIA IN THE REAL WORLD
15. Testing
16. Deploying Aurelia applications

Product Details

ISBN-13:	9781638356073
Publisher:	Manning
Publication date:	07/24/2018
Sold by:	SIMON & SCHUSTER
Format:	eBook
Pages:	432
File size:	9 MB

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.
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.

Table of Contents

Preface xvii

Acknowledgments xix

About this book xxi

About the author xxvi

About the cover illustration xxvii

Part 1 Introduction to Aurelia 1

1 Introducing Aurelia 3

1.1 Why should you care? 4

How complicated are the applications you're building? 5

How important is web-standards compliance to the team? 6

What past development experience does the team have? 7

How is the team organized? 7

What kind of commercial and community support do you need? 8

1.2 What kind of projects make Aurelia shine? 9

Server-side application with a sprinkling of JavaScript 10

SPA rendered on the client side 11

The hybrid approach: server side with SPA islands 12

Server-side-rendered SPA 14

Where does Aurelia sit? 14

What makes Aurelia different? 15

1.3 A tour of Aurelia 16

Binding 17

Handling DOM events 17

Routing 19

Inside the view-model, and what's this about components'? 21

The Aurelia component lifecycle 21

Loading data from an API 22

Dependency injection with Aurelia 23

Rendering the view 23

2 Building your first Aurelia application 26

2.1 Introducing my-books 27

2.2 Building with Aurelia 27

Option 1: Download the quick start 28

Option 2: Skeleton application 28

Option 3: Aurelia CLI 28

Creating the my-books project 29

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

Adding the functionality inline 37

2.4 Creating components using Aurelia custom elements 41

2.5 Building services and retrieving data from a REST API 44

2.6 Maintaining page state with the Aurelia router 52

Configuring the router 52

2.7 Moving forward 57

2.8 My-books project status 59

Part 2 Exploring Aurelia 61

3 View resources, custom elements, and custom attributes 63

3.1 Understanding Amelia's templating primitives 64

Aurelia's templating primitives 64

3.2 CSS resources 65

Setting up the project dependencies 65

Adding the CSS resources 66

Styling the my-books views 68

3.3 Custom elements 70

Custom elements 71

My-books custom elements 71

HTML-only custom, elements 72

3.4 Custom attributes 75

Creating a tooltip custom attribute 76

Single-value binding 78

Options binding 79

3.5 My-books project status 81

4 Aurelia templating and data binding 83

4.1 Template conditionals 84

4.2 Repeaters 87

Aurelia repeater con textual properties 88

4.3 Data binding with Aurelia 91

The three key ingredients of Aurelia's binding expressions 91

4.4 Binding commands 93

One-way bindings 94

String-interpolation binding 96

Two-way bindings 96

One-time binding command 98

4.5 Handling DOM events 98

Trigger 99

Delegate 100

4.6 My-books project status 103

5 Value converters and binding behaviors 104

5.1 Creating a value converter 105

5.2 Applying value converters to lists 107

Value-converter composition 110

5.3 Binding behaviors 112

Throttle and debounce binding behaviors 113

UpdateTrigger binding behavior 115

Signal binding behavior 116

5.4 My-books project status 117

6 Intercomponent communication 119

6.1 Aurelia components 120

The component lifecycle 121

6.2 Enhancing my-books 123

Aurelia's three, core intercomponent-communication techniques 123

6.3 Passing data to child components with data binding 125

6.4 Event Aggregator to the rescue 127

The Event Aggregator pattern 127

The Aurelia Event Aggregator 128

Fixing book removal with the Event Aggregator 129

6.5 Extending my-books 133

Step 1: Installing the required modules 134

Step 2: Adding the date-format value converter 134

Step 3: Enhancing the book API 134

Step 4: Creating the book component 135

Step 5: Creating the edit-book component 138

Step 6: Modifying the book-list component 143

Step 7: Modifying the books component 144

6.6 Custom events 146

Browser support for custom events 148

Using custom events 148

Implementing the star-rating component 148

7 Working with forms 156

7.1 Working with forms in my-books 157

7.2 Checkboxes 158

7.3 Radio elements 161

Step 1: Modifying the book API 162

Step 2: Modifying the Books view-model 164

Step 3: Passing the genres and shelf arrays down the component hierarchy 165

Step 4: Modifying the EditBooks view-model 166

Step 5: Modifying the edit-book view 167

7.4 Select controls 169

Single-value select binding 170

Multiple-value select binding 172

7.5 Validation 175

The Aurelia validation plugin 176

Aurelia validation overview 177

Adding validation to the edit-books form 179

8 Working with HTTP 188

8.1 Overview of the Aurelia HTTP toolkit 189

8.2 Using aurelia-fetch-client 190

Adding fetch to my-books 190

Intercepting and manipulating requests 197

8.3 Working with aurelia-http-client 201

9 Routing 206

9.1 Understanding client-side routing 207

9.2 Introducing the Aurelia router 208

Basic configuration 209

Routing metadata 210

9.3 Passing route data to components 214

Route option types 214

Adding the user-management pages 215

9.4 Specifying route modules dynamically 221

9.5 The screen-activation lifecycle and the route pipeline 223

The screen-activation lifecycle 223

Pipeline steps 224

9.6 Amelia's 404 226

Handling an unknown route: option 1, moduleld 226

Handling unknown routes: option 2, a function 228

9.7 Redirecting routes 230

9.8 View ports 231

9.9 Extending my-books with layouts 232

Creating the layouts 235

Adding the login view 237

Modifying the routing configuration 239

9.10 My-books project status 241

10 Authentication 243

10.1 Client-side authentication 244

Token-based authentication 244

Comparing cookie- and token-based authentication approaches 245

JWT format 246

10.2 Securing my-books 247

Authentication architecture 248

Creating the authentication service 249

Implementing login 250

Intercepting HTTP requests 252

Routing redirection 255

Filtering the navigation bar 258

10.3 My-books project status 262

11 Dynamic composition 264

11.1 Static vs. dynamic composition 265

11.2 The <compose> custom element 266

11.3 Dynamically composed views 266

Creating partial views 268

Creating a configurable form with dynamic composition 269

11.4 Summary 274

12 Web Components and Aurelia 275

12.1 Introducing Web Components 276

12.2 HTML Imports 277

12.3 HTML Templates 279

Using HTML Templates in Aurelia 281

12.4 Custom elements 281

12.5 The Shadow DOM 282

Using the Shadow DOM with Aurelia 283

12.6 Creating the my-books share-book component 286

Adding the Share button 288

Creating the ux-card component 292

Creating the subcomponents 294

Creating the share-book-card component 299

Tying it all together 301

12.7 My-books project status 303

13 Extending Aurelia 305

13.1 Overriding Aurelia's default conventions 306

Specifying a view template relative path with @useView 306

Handling custom-element views manually with @noView 308

Specifying views as template strings with @inlineView 309

Explicitly naming custom elements with @customElement 311

Explicitly naming custom attributes with @customAttribute 312

13.2 Creating an inspect custom binding behavior 313

13.3 Creating a Selectize.js custom attribute 316

13.4 My-books project status 321

14 Animation 322

14.1 Getting started with SPA animations 323

When and what should you animate? 323

CSS animations 324

JavaScript animations 327

14.2 Aurelia's animation framework 328

The animation API 328

14.3 CSS animations with Aurelia 329

Adding transitions on au-enter 329

Adding transitions when classes are added or removed 331

Part 3 Aurelia in the Real World 335

15 Testing 337

15.1 Testing SPAs 338

15.2 Get started testing with the Aurelia CLI 339

Creating a Hello World test 341

15.3 Testing value converters 342

15.4 Testing services 345

15.5 Testing custom elements 348

15.6 Testing custom attributes 353

15.7 End-to-end testing 355

Testing the login user stories 356

Running the tests 360

16 Deploying Aurelia applications 363

16.1 SPA bundling 364

What about HTTP/2? 365

16.2 Bundling and the Aurelia CLI 366

Aurelia environments 368

Versioning bundles 368

Splitting application bundles 369

16.3 Deploying my-books to Firebase 373

Appendix: Installation and setup 378

Index 395