Learning Path: Aurelia: Web Development for UI Developers
3.8 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
31 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: Aurelia: Web Development for UI Developers to your Wishlist.

Add to Wishlist

Learning Path: Aurelia: Web Development for UI Developers

Develop applications using the next generation UI framework for web and mobile development—Aurelia
3.8 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
31 students enrolled
Created by Packt Publishing
Last updated 5/2017
English
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 11.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand how to maintain code consistency by learning naming convention best practices
  • Get a behind-the-scenes look at the issues while targeting JavaScript version compatibility with different browsers
  • Lay the groundwork for creating libraries by loading scripts dynamically
  • Add a time manager to your library using the singleton design pattern
  • Create, integrate, and test event dispatchers in JavaScript
  • See how to build a standards-based modern web application using Aurelia
  • Understand future web standards today
  • Improve code quality by unit testing of Aurelia components
  • Deploy and maintain Aurelia applications
View Curriculum
Requirements
  • Basic knowledge of JavaScript
Description

Do you want to write clean, modular JavaScript code? Do you want to create UI that is maintainable, testable, and extensible?

Aurelia is a modern, forward-thinking, conventions-based JavaScript framework that leverages web standards. It allows you to build UI that is maintainable, testable, and extensible. Aurelia is developed using ES2016 and comprises smaller, focused modules.

Aurelia: Web Development for UI Developers is Packt’s Video Learning Path that is a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

This Learning Path will immerse you in the JavaScript world, where you will mature as a developer by exploring the best practices for building an original, functional, and useful cross-platform library.

Starting off with just some basic knowledge of JavaScript and HTML, we will first lay a solid naming foundation for OOP coding by exploring the best naming conventions practices for primitive variables, constructors, methods, and properties. Then we’ll shed some light on creating global namespace, create a pure JavaScript onload script, and walk through cross-browser compatibility. We will learn how the onload and DOMContentLoaded events are actually triggered and understand how to use querySelectorAll method and dynamically load scripts using a script loader.

We will create a working time manager and explore unit testing in JavaScript.

You’ll then be introduced to Aurelia. After having ensured you had basic understanding of Aurelia, this Learning Path will walk you through a todo list application and setting up the development environment. Finally, we'll take you through a modern web application and move on to talk about tools, modules, web standards, and testing.

Moving on, we take you on a whirlwind tour of Aurelia’s features in order to create a todo application project. After that, you’ll get an understanding of how to persist todos, routing, using pub/sub for communications. At the end, we throw light on dependency injection, declarative registration, explicit registration, and resolvers.

Finally, learn how to implement game logic and basic artificial intelligence, and deploy the game for others to play.

The goal of this course is to provide you with all the tools and skills to write clean, modular JavaScript, and build amazing UI.

About the Authors:

This Learning Path is authored by some of the best in the field.

Ben Fhala has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia.

Raja Mani has over 2 decades of experience in developing applications using C, C++, Java, C#, and JavaScript. He has designed, implemented, and deployed different types of applications like console, desktop, web services and web applications.

Who is the target audience?
  • If you’re an UI developer looking forward to learn this next generation, open source UI framework, this Learning Path is for you.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
58 Lectures
11:33:49
+
Mastering JavaScript
39 Lectures 04:09:45

This video provides you a synopsis of the course.

Preview 02:57

When working in teams or contributing to existing libraries, it is critical that you adhere to the common naming convention practices. Learn how to format your code and be consistent about your choices.

Using White Space for Readability
05:19

Strategies of working with variables can help you become a better developer. Know the best tips to work with primitive variables.

Declaring Variables
07:52

It is important to know the differences between functions and variables and how we should name them. Understand the best practices of naming conventions for variables and functions.

Declaring Complex Data Types and Functions
04:21

Now that we know the naming conventions for functions and variables, let’s have a solid naming convention foundation for OOP coding in JavaScript.

OOP Naming Conventions
04:13

There is no namespace keyword in JavaScript, but it is very easy to create one. Let’s learn what it is.

Creating a Global Namespace
04:45

A variable's value keeps changing, but many a times, you want to store information that never changes. Let’s learn how to define constants in JavaScript and the naming convention that will make it easy for us to treat these variables as constants.

Constants (and Pseudo constants)
03:48

Let’s briefly talk about consistency of our code in general using the unary convention. We will see how to use it to make our code more efficient and improve code performance.

Smart Coercion of Data Fields
04:23

One of the vital parts of building a library, a framework, or original code that interacts directly with the browser is the need to test and validate compatibility with the browser.

Preview 04:52

The default way in which onload works is that it only allows one onload to occur at a time. But what happens if you don't control the loading process of other applications and wish to enable an onload without breaking the loading process on your end? Learn a great hack that will enable you to create an onload without needing to worry if other onloads exist.

Creating an onload Method That Always Works
03:38

Not every feature is detectable on every browser, and many a times, you will need to come up with creative solutions that can bypass the issues of the ways by which different browsers do different things.

OnReady – Our First Cross-browser Script
06:50

Let’s turn our attention to Modernizr, which makes it easy to write conditional JavaScript and CSS for browser feature supports.

Using Modernizr to Detect Features
04:22

There is a new feature in town called querySelectorAll. Before we can start working with it, we need to filter out and define the browsers that support this feature, while building the foundation for an alternative solution.

Preview 04:48

In the modern world of HTML5, there are very easy ways to select elements natively using the querySelectorAll method. Learn how to build your application in a way that would recognize that your browser does not support this feature when it does not.

Selecting DOM Elements Natively in HTML5
06:25

When the browser does not support the querySelectorAll feature, we need to develop a script loader that is cross-browser-compatible.

Creating a Cross-browser Script Loader
05:36

We see how to load scripts dynamically only when we need them, using the script loader we created in the last video. We will have all of the groundwork ready to start creating our own library.

Using Sizzle to Select DOM Elements
07:13

Namespaces provide a way for us to avoid overwriting code. Most of the times, we use namespaces to provide a structure for our library elements.

Preview 05:43

JavaScript doesn't support private variables natively as yet. There are ways to create pseudo-private variables, but the problem is that they can still be overwritten by other developers by mistake or on purpose.

Creating Private Variables in JavaScript
05:45

We will create a safer global variable definition as we get to know our first design pattern—the Module Design Pattern.

The JavaScript Module Design Pattern
06:30

As you start working with your library and it becomes popular, you might get to a situation where it's being loaded more than once. Learn how you can deal with situations like this.

Version Controlling Our Library
07:08

We will take all the scraps of code that we created in previous videos and sections and combine them together into our library.

Building Out Our Library
11:26

While interfaces don't exist in JavaScript, the ideas behind them are very relevant for JavaScript. Let’s understand what interfaces are and how to implement the logic behind them in JavaScript.

Preview 07:21

Learn what an adapter is and why we would want to use them in programing and in JavaScript.

Creating an Adapter Design Pattern
05:30

We want our library to always do the same thing, no matter what the underlying library that is enabling it is. Let’s build a jQuery adapter to first check whether the user has jQuery loaded. If it is, we will use the library for our operations.

Building a jQuery Adapter
06:41

So far, our focus in the creation of our library was on getting all the elements of our adapters to work the same, as we focused on creating custom queries. We will now piggyback on the jQuery text method as we discover the problem we have in our current architecture.

Adding a Functionality Method
03:46

Our goal is to create a library that is functional and useful. As such, we will take advantage of the strategy that jQuery uses to make it easier to interact with elements.

Mimicking the jQuery Wrapper
09:06

In this video, we will discover the Facade Design Pattern. Creating a simple constant interface. This interface is going to be sent to the user no matter what library element they are using.

Preview 03:55

In the last video, we created a Facade Design Pattern, but our solution was not complete. We still need to figure out a way to update the initial values that we configure when we start our application to use the Facade. By the end of this video, we will be fully using the Facade Design pattern.

Creating a Facade Creator
04:33

Want to make your facade a lot more than just a standard Façade? You can do so by incorporating its own methods.

Creating a New Global Function Through the Facade
03:59

We’ve created our façade pattern, but it can very easily get exposed to the methods and items that we really want to hide from all users. Let’s take our facade design pattern to the next level by exposing only what we want to expose in the library.

Creating an Advanced Facade Pattern
05:18

We need a global object that is always available for all the elements in an application. Let’s use a singleton, which is a design pattern that helps us create an object only one time.

Preview 11:32

We will take our singleton from the last video and start building it out, starting from its constructor.

Building the Constructor for Our Ticker
10:36

We will continue and build the dictionary usage for our ticker.

Connecting Time with Our Ticker
11:09

Let’s get our ticker to work.

Processing Interval groups
09:46

We have a working ticker but it's hidden from users. Let’s expose the ticker to all users, and thus complete the creation of our ticker and our singleton.

Exposing Our Ticker to the World
02:46

An event dispatcher is a type of design pattern derived from the Observer Design pattern that enables the developer’s objects to listen to changes in another object without creating a direct two-directional linkage between the objects. In this video, we will have a working event dispatcher.

Preview 13:34

In the last video, we created an event dispatcher. It's time for us to really test it by integrating it into the ticker time manager that we created in an earlier section.

Integrating the Event Dispatcher into Our Library
08:11

We already have a working event dispatcher, but at this stage, we can't remove the events. We need to solve this.

Removing Events from the Dispatcher
05:20

We are done building, and in our last video in this course, we need to dedicate a bit of time to testing our application over time.

Building Test Units
08:48
+
Aurelia Web Development - Part 1
19 Lectures 07:24:04

Provide a walkthrough of the Todo List application.

Preview 05:29

In this video, we’ll look at the important tools required to build a modern web application using Aurelia.

Setting Up the Development Environment
34:25

What is Aurelia CLI? Why is that tool very important in creating an Aurelia application from scratch? What are the useful options of Aurelia CLI?

Aurelia CLI
07:53

In this video, we will look at the concept of boostrapping Aurelia and look at the other important files that constitute an Aurelia application.

Bootstrapping Aurelia
04:39

In this video, we’ll look at how to build a simple hello world application in Aurelia.

Hello World from Aurelia
34:33

What is modern web application and what technologies/tools are required to build a modern web application?

Preview 24:29

In this video we’ll discuss about the various tools that are required to build modern web applications

Tools
10:11

In this video we’ll discuss about the various types of web components

Web Components
04:49

In this video we’ll discuss about  testing modern web applications

Testing
15:50

In this video, we’ll  show you how to incrementally build a TodoMVC application in Aurelia using Aurelia CLI.

Preview 32:51

In this video, we’ll show how to add an InMemoryTodo Service class that can be used to perform CRUD operations on Todo items.

Adding an In-memory Todo Repository/Service
48:43

In this video, we’ll show you how to componentize an Aurelia Application.

Tools
50:45

In this video, we’ll show you how to give a facelift to the TodoMVC application using MaterializeCSS library.

Styling Using MaterializeCSS
33:36

In this video,we’ll  explain the techniques to persist Todo items on the client side using PouchDb.

Preview 20:06

In this video, we’ll cover the client-side routing in a SPA framework like Aurelia and loading of different client views using Aurelia’s routing.

Routing
33:43

In this video, we’ll showthe pub/sub pattern can be used for communication between loosely coupled components.

Using pub/ Sub for Communication
20:09

In this video, we’ll cover the dependency injection principle and how it help us build loosely coupled applications.

Preview 08:24

In this video, we’ll cover the declarative and explicit registration of classes with DI container.

Declarative and Explicit Registration
13:27

In this video, we’ll cover the concept of Resolvers, which are used by the DI containers internally to provide all instances.

Resolvers
40:02
About the Instructor
Packt Publishing
3.9 Average rating
7,282 Reviews
51,877 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.