Hands-On Full Stack Web Development with Aurelia

Develop modern and real-time web applications with Aurelia and Node.js

Diego Jose Arguelles Rojas, Erikson Haziz Murrugarra Sifuentes

• Publisher: Packt Publishing
• Year: 2018
• eBook ISBN: 9781788834919
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Programación en JavaScript

Develop rich and scalable web applications with Node.js, Express.js, and MongoDBAbout This Book• Learn the advanced features of Aurelia to build responsive web applications• Write clean, modular, and testable code that will be easy to maintain and evolve• Harness the power of JavaScript on the client and server side to build full-stack applicationsWho This Book Is ForHands-On Full Stack Web Development with Aurelia is for you if you are a web or full-stack JavaScript developer who has experience with traditional stacks such as LAMP, MEAN, or MERN and wish to explore the power of Aurelia and new stack with modern web technologies.What You Will Learn• Employ best practices and modern approaches to create frontend applications• Learn about modern CSS preprocessors and improve the readability of your application• Use the Aurelia framework to create navigable web applications• Write your own tests, making your application secure and fault-tolerant• Create solid RESTful APIs using the microservice architecture• Understand the NoSQL paradigm and get the best performance from your database• Integrate third-party libraries such as Gmail for Single Sign On• Write UI testing scripts and integration tests to build extensible appsIn DetailHands-On Full Stack Web Development with Aurelia begins with a review of basic JavaScript concepts and the structure of an Aurelia application generated with the Aurelia-CLI tool. You will learn how to create interesting and intuitive application using the Aurelia-Materialize plugin, which implements the material design approach. Once you fully configure a FIFA World Cup 2018 app, you'll start creating the initial components through TDD practices and then develop backend services to process and store all the user data.This book lets you explore the NoSQL model and implement it using one of the most popular NoSQL databases, MongoDB, with some exciting libraries to make the experience effortless. You'll also be able to add some advanced behavior to your components, from managing the lifecycle properly to using dynamic binding, field validations, and the custom service layer.You will integrate your application with Google OAuth Service and learn best practices to secure your applications. Furthermore, you'll write UI Testing scripts to create high-quality Aurelia Apps and explore the most used tools to run end-to-end tests. In the concluding chapters, you'll be able to deploy your application to the Cloud and Docker containers.By the end of this book, you will have learned how to create rich applications using best practices and modern approaches.Style and approachThis is a comprehensive example-based book that guides you to create highly scalable applications using the new MEAN Stack.

Creating Components and Templates

Welcome to the second part of this book and congratulations for coming here! Now that you know the basic principles and techniques of programming in JavaScript, it's time to go deeper and know much better about some advantages offered by the wonderful framework that is Aurelia. Our starting point in this chapter will be to understand what is a component and how we can manage its life cycle through events that are taking place in our application. Then, we will explore the dependencies injection, a well-known design pattern used by most popular frameworks such as Java EE, Spring, and Aurelia! Our main focus will be to explain how we can manage our DOM and dynamically display the data on the screen, configure routes to access certain functionalities in our application, and, of course, apply everything learned in our FIFA World Cup application. This chapter will cover a lot of very useful concepts, some of them are:

• Creating components
• Dependency Injection pattern
• Component's life cycle/events
• Data binding
• Aurelia router
• Testing components

Let's start!

Lego components

Most modern frontend JavaScript frameworks provide some sort of support for component-based development. This is an incredibly important step in the direction of development for the web. Components provide a way to write small parts with a consistent API that can easily be orchestrated as part of a larger screen, application, or system. Imagine each component as a Lego piece—you can use it wherever you want and it will keep the same shape and behavior.

A component can be an HTML part, a JavaScript piece of code, a service, and so on. Any reusable part should be interpreted as a component.

A little puzzle

Let's practice a little how to think and abstract one application into a few components. Here's some web template with some sections:

Now, it's time to think.

How many sections are similar?

• Buttons are very similar; just the text/color can change
• Menu options can be a reusable single component
• Main page sections are the same; just the content changes
• The header can be decoupled from the application main section

Which sections do you think can be reused across application pages, take a look:

• Main page sections can be used as a container for other options
• The buttons can be shared across all the application sections

Last, but not the least, do you think you need to refresh the entire page when you submit or just some sections?

A better option can be to refresh only what really needs to be refreshed. Each section can independently manage their data and the way it's retrieved.

Of course, all these answers depend on the business rules of the application, but the principles are always the same. If you find some section of your application that can be reused, reloaded, managed, and maintained independently of other sections, you should decouple it into a single component.

Once you have defined what parts of your application will be a component, it's time to organize. You must identify which components will be used just for some page in particular (maybe an Item component for a shopping cart page), how many of them will be shared across the entire application (a common table to be used into many reports of your application) and finally, organize them by separated groups:

Now, let's create one folder per component; you should keep in mind that if some component will be parent of another component, the child folder should be created inside the parent, to specify ownership. Remember always that as a programmer, your main goal is to make your code readable and understandable to other developers—that's a good quality measure!

At this point, we now have our folder structure created for our components. An Aurelia component is basically composed of two files: the HTML template, called view, is rendered into the DOM. The .js file, called view model, is written in ES Next, and it defines the behavior and provides data for the view. The templating engine, along with dependency injection (DI), that we will explain in detail in the following sections, is responsible for creating and enforcing a predictable life cycle for the component. Once the component is instantiated, Aurelia’s data binding links the two pieces together, allowing changes in your view model to be reflected in the view and vice versa. This separation of concerns allows us to work/collaborate with designers and improve our product quality. Let's create one component as an example:

/**card-component.js**/

export class CardComponent {

 cardTitle;

 constru...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• Packt Upsell
• Foreword
• Contributors
• Preface
• Introducing Aurelia
• Styling the User Interface
• Testing and Debugging
• Creating Components and Templates
• Creating Our RESTful API
• Storing Our Data in MongoDB
• Advanced Features on Aurelia
• Security
• Running E2E Tests
• Deployment
• Other Books You May Enjoy