Aurelia Fundamentals

This course gives you an end to end coverage of the features of Aurelia, including the MVVM pattern, data binding, routing, dependency injection, and extensibility.
Course info
Rating
(135)
Level
Intermediate
Updated
May 4, 2016
Duration
8h 38m
Table of contents
Course Overview
Aurelia Prerequisites
Getting Started with Aurelia
Implementing MVVM with Aurelia
Using Dependency Injection In Aurelia
Aurelia Routing Fundamentals
Aurelia Routing Beyond the Basics
Aurelia Data Binding Fundamentals
Data Binding Beyond the Basics
Working with Services, Plugins, and Pub/Sub Events
Extending Aurelia with Custom Elements and Attributes
Preparing Your Aurelia Application for Production
Description
Course info
Rating
(135)
Level
Intermediate
Updated
May 4, 2016
Duration
8h 38m
Description

Modern web client applications present new challenges for web developers to deliver rich, maintainable, and interactive web applications written with HTML, CSS, and JavaScript. In Aurelia Fundamentals, you will learn the skills you need to write maintainable, testable, and extensible client applications that are engaging, interactive, and responsive for your users. You will learn how to leverage all of the key features of Aurelia, including UI composition with the Model-View-ViewModel (MVVM) pattern; leveraging rich two-way data binding to decouple your views and UI logic and present rich data and content to your users; and client side routing and navigation that brings together the loosely coupled views into a cohesive whole for the end user. When you are finished with this course, you will have a solid, foundational understanding of all of the capabilities of the Aurelia framework and will be ready to start building amazing Aurelia web client applications that will delight your users.

About the author
About the author

Brian Noyes is CTO and Architect at Solliance, an expert technology solutions development company. Brian is a Microsoft Regional Director and MVP, and specializes in rich client technologies including XAML and HTML 5, as well as building the services that back them with WCF and ASP.NET Web API.

More from the author
WPF Productivity Playbook
Intermediate
2h 57m
22 Aug 2016
More courses by Brian Noyes
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi there. My name is Brian Noyes, and welcome to my course, Aurelia Fundamentals. I'm a software architect who focuses a lot on rich client technologies and the services that back them. I'm excited to introduce you to Aurelia, a new single-page application framework that's getting a lot of traction and growing in popularity very quickly due to its robust design and ease of use. In this course, I'm going to give you end-to-end coverage of all of Aurelia's capabilities. We'll start with a look at single-page application architecture and ECMAScript 2015. Then I'll dive into the core topics of Aurelia: MVVM, dependency injection, data binding, and routing. You'll learn how to call back-end web services, use plugins for things like dialogs and validation, and use pub-sub events for loosely coupled communication. Finally, I'll show you how to extend Aurelia with custom elements and attributes, and how to prepare your app for production with testing, building, and bundling your application. I know you'll like building applications with Aurelia, and I'm pleased to have the opportunity to help you learn the foundation you'll need to be productive and successful with it.

Implementing MVVM with Aurelia
Hi, I'm Brian Noyes and welcome back to Aurelia Fundamentals. In this module, we're going to dive into the Model-View-ViewModel or MVVM pattern. We'll talk about what the pattern's all about, why you want to use it, and then see how to go about using it with Aurelia. First off, we're going to talk about a concept called separation of concerns, which is one of the motivations behind using the MVVM pattern. Then we'll talk about what the MVVM pattern is all about. We'll talk about the responsibilities of the different components in the architecture. Then we'll get into how you go about using it with the Aurelia framework.

Using Dependency Injection In Aurelia
Hi. This is Brian Noyes, and welcome back to Aurelia Fundamentals. In this module we're going to focus on dependency injection, and we'll talk about what the pattern's about and the problems it solves, and then you'll see how to use the mechanisms of the Aurelia dependency injection container. First off, we're going to focus on what dependency injection's all about and what the problem is that it solves. Then we're going to talk about how you use dependency injection, what the mechanisms are in the Aurelia framework. We'll see how we can manage the lifetime of the objects that are going to be constructed and injected by the container. We'll see how to explicitly register things with the container to have complete control over what the container provides, and we'll see how to use a more advanced feature called resolvers for advanced instancing scenarios. So let's dive right in.

Aurelia Routing Fundamentals
Hi, and welcome back to Aurelia Fundamentals. In this module we're going to get into the basics of routing in Aurelia. Routing is an essential feature that any SPA framework needs to have because it allows you to define multiple views, and change which view is presented when based on the user interaction and what's going on in the application. In this module we're going to cover the key features of routing that you almost always need to use in every Aurelia app you build. And in the next module, we'll dive a little deeper into routing, into a few more advanced features you may not always use, but you're definitely going to want to know about them, and know how to use them for the occasions where you do need them. So first up in this module we'll talk about routing in general, and talk about what it means in terms of your architecture and why you need it. Then we'll get into the nuts and bolts of defining and using routes within an Aurelia application, and we'll do that mostly through demos. After I've shown you how to define routes and navigate between views using the routing system, we'll cover how you can pass parameters during the routing process so that the destination view model can use it to drive its behavior, such as loading the appropriate data to present in its view. So let's jump right in.

Aurelia Routing Beyond the Basics
Hi and welcome back to Aurelia Fundamentals. In this module, we're going to go a little deeper into Aurelia routing and cover a number of additional capabilities that the routing system has that you might not need in every single Aurelia app you use, but you'll often need to use them, and you should be aware of them at least and how they work. So first up, in this module, we're going to look at the Screen Activation Lifecycle, which is something you'll need to be aware of and will actually use to some degree almost anytime you're doing any routing. This includes basically the lifecycle events on the view modules that are being swapped in and out during routing so that you can initialize those view modules when they get navigated to and so you can clean them up when they're being navigated away from or prevent navigation altogether. Then we'll look at ViewPort routing, and viewPorts basically allow you to have multiple router views in the same containing view and have different modules being placed into those viewPorts when a navigation route is activated. After that, we'll look at child routing, which lets you set up a hierarchy of views containing router views, which can contain views that contain router reviews and so on so you can have routing at multiple levels in your views. Next we'll look briefly at activation strategies, which are important when you start having more than one route in the same router with the same module. Then we'll look at PushState. PushState is a feature of HTML5 that basically lets you get rid of the hashtags for the client-side portions of your address. And finally, we'll take a brief look at custom navigation pipeline handlers. The router execution model is based on a pipeline execution model, and you can plug custom steps into those pipelines to be called before routing occurs or after routing occurs. So let's dive right in.

Aurelia Data Binding Fundamentals
Hi, and welcome back to Aurelia Fundamentals. In this module, we're going to start diving into data binding, and we'll talk about the fundamental concepts of data binding, how the Aurelia data binding system works at a high level, and then we'll look at the most common bindings that you'll use that cover probably 90% or more of the work that you'll do with data binding in Aurelia. So first up, we'll talk about data binding as a whole, and why you would want to use it, and what it does for your architecture. Then we'll talk about Aurelia binding fundamentals, basically the concepts behind the design of the binding system in Aurelia and how the Aurelia adaptive binding system works. Then we'll get into the most common bindings you'll use, which really just boils down to three things you've got to remember, and those will cover probably 90% of the cases where you're doing data binding in Aurelia. Next, we'll look at binding modes, which control when and in what direction data flows through a binding. Aurelia's adaptive binding system generally picks the right mode between one-way and two-way based on the element you're on and the property of that element that you're binding, but we'll look at the binding commands that exist to put you in complete control over what mode is being used for a given binding. Then we'll finish out this module with event bindings, which allow you to make calls to your ViewModel methods when events on DOM elements fire. Now, that doesn't bring us to the end of data binding because there's a lot more to it, so the next module after this we're going to go into some more advanced aspects of data binding. But for now, let's get you up and running with most of what you'll need to know for 90% more of your data binding in Aurelia.

Data Binding Beyond the Basics
Hi, and welcome back to Aurelia Fundamentals. In this module, we're going to take a little deeper dive into data binding. In the last module, you learned the core concepts behind data binding and what the primary kinds of data binding were that you're going to use on a frequent basis, including. bind, interpolation bindings, and the repeat. for binding. In this module, we'll give you a little more insight into what's going on under the covers when binding occurs. You'll get exposed to some more specialized bindings for specific scenarios, and we'll look at the extensibility hooks that are in the data binding system as well. So first up, we're going to talk a little bit about what's going on behind the scenes when data binding occurs so that you have some insight into that and it's not as much of a black box mystery when you're trying to understand what's going on there. Which will also become important if you leverage some of the extensibility hooks that we'll talk about towards the end of the module. Then we'll look at some specialized bindings. There's a number of additional bindings beyond the ones you learned in the last module for specific scenarios. And we'll take a look at most of those that are available in the Aurelia framework. Then we'll talk about an important part of the data binding system, which are value converters. Most of the data binding platforms have a similar concept here, and it's basically something that you can insert into the binding process to convert the value that's either coming out of a model, or a view model property, into some other value or type before it is used to try to set a target element property, and vice versa in two way data binding scenarios, as data's flowing from the view down to the view model, a value converter will let you convert the values as they're passing through in that direction as well. Then we'll finish off the module talking about binding behaviors. Binding behaviors are an extensibility hook into the binding system. There's a number of very useful built-in binding behaviors that are part of the framework, and you can write your own custom behaviors as well. So we'll take a look at all of that to wrap up data binding at the end of this module.

Working with Services, Plugins, and Pub/Sub Events
Hi and welcome back to Aurelia Fundamentals. In this module I want to get you exposed to a few more very useful parts of the Aurelia framework, specifically how to make HTTP service calls to your back end, how to present dialogs, how to validate input from the user, and how to leverage Pub/Sub events for loosely coupled communication between parts of your application. First up we're going to talk about and demonstrate how to make HTTP service calls, also known as AJAX calls, to work with back end data and send commands or requests to your back end. Aurelia actually has two options for doing this: a simple http-client, and one that is based on the new http Fetch standard. We'll take a look at both of those, then we'll take a look at the Aurelia dialog service plugin. As its name implies, it makes it easy to pop up rich interaction dialog boxes for user input or notifications. Next we'll take a look at the Aurelia validation plugin, which allows you to declare validation rules on your model objects and get good validation error indications in your data entry forms with very little effort. Finally we'll wrap up with a quick look at another simple but useful communication mechanism that's part of Aurelia, the EventAggregator that will let you use Pub/Sub events between different components of your application.

Extending Aurelia with Custom Elements and Attributes
Hi, and welcome to this second to last module in the Aurelia Fundamentals Course. In this module we're going to focus on custom elements and custom attributes, which are two extensibility points that allow you to encapsulate your own custom logic and put it in a form that's easily reusable across many views and many applications. First up, we're going to focus on the custom elements front, and you're going to learn how to define custom elements is really just through views and view models in Aurelia. But depending on why you're defining a custom element, there's a number of different capabilities that you can leverage there that Aurelia has to offer. So we'll talk about that in concept and then we'll dive into demos. Once we're done with elements, we'll talk about attributes, and it's kind of the same overall flow, let's talk a little bit about concepts and get right to the code to show you how you can declare and use custom attributes, and what the various options and capabilities are that Aurelia provides you there. So let's dive right in.

Preparing Your Aurelia Application for Production
Hi, and welcome to this last module of Aurelia fundamentals. In this module, I'll cover several things you'll definitely want to know once you start working on a real-world production project with Aurelia, specifically, how to test your code, how to build your code, and how to bundle it. First up, we'll take a quick look at testing. This will just be a quick look at the kinds of testing you might want to do, what tools the Aurelia team uses for doing their testing, and how those test frameworks are being used in the skeleton navigation sample project that's provided by the Aurelia team. Then we'll take a look at building your code. The way you organize and define your code at design time is generally not the most optimized structure for what it needs to be at runtime. So having some tools and a process for transforming your code between the way you want it while you're writing the code, and the way you need it for runtime, is fairly essential. Finally, we'll take a look at bundling your code. Even once it's built, it still may be broken up into too many files, resulting in too many requests at runtime, and slowing down the initial load of your application substantially. Aurelia has a bundler module that you can use to easily address this, and you'll see how to use that bundler in this last section. So, let's dive right in.