Book Image

Hands-On Full Stack Web Development with Aurelia

By : Diego Argüelles Rojas, Erikson Murrugarra
Book Image

Hands-On Full Stack Web Development with Aurelia

By: Diego Argüelles Rojas, Erikson Murrugarra

Overview of this book

Hands-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.
Table of Contents (19 chapters)
Title Page
Copyright and Credits
Dedication
Packt Upsell
Foreword
Contributors
Preface
Index

Preface

A few years ago, it was very common to find several IT professionals specialized in just one kind of technology, code language or platform. People dedicated to reviewing all the backend stuff thought that they do not have anything to do with the frontend layer, after all one is developed in Java and C# and the other in HTML and JavaScript. This approach was not good. As times change, we need to start understanding that one application involves not only one part of the business, such as logistic or sales. Your application should involve the entire business and represent it on a binary world with same features, restrictions, and rules. As only a backend developer, your understanding of how data is displayed to the final user is very limited. As just a frontend developer, your knowledge of how many distributed applications interact and retrieve data to be interpreted on the screen is very limited too. As a first consequence, the development time increases and the product quality is not the desired one. Many IT professionals are now leaving their comfort zone and exploring the other side. A full stack developer is not only a developer with knowledge of backend and frontend languages. A full stack developer is a professional capable of understanding and translating each business requirement into application features, knowing the general impact and the changes it could include. Their diagnostic and time duration required to deliver will be always shorter to reality because they know exactly how the current product works, with external dependencies and different platforms. 

The microservice revolution came with many changes for the industry. Nowadays, it is not enough to have a good knowledge of just one code language. NoSQL databases changed the relational paradigm, and strict object-oriented languages are now exploring the functional paradigm. These things enforces you to start understanding different programming paradigms, code languages, and frameworks. But there is one language that from its beginning, the only thing it did is grow: JavaScript. 

Throughout this book, you will be introduced to the main JavaScript concepts and start understanding how this code language works and why it is so adopted by the community. JavaScript could be used as an object-oriented language or function too. Its flexibility is one of its most awesome features, and the development speed is faster compared with other traditional programming languages. Not only this, JavaScript was empowered with their own runtime platform outside the browser, NodeJS. In this book, you will find that Node is our main partner to develop JavaScript applications, and its simplicity to include external libraries and reuse code is simply awesome.

Tools such as CSS preprocessors, task automation, and testing coverage will be also explained and will give you the knowledge to participate in any development team, understand and propose new features. Our horse battle, Aurelia, will be present in this stage. You must have heard about popular frontend frameworks, such as Angular, or libraries, such as React. Aurelia comes with a very different approach, solving most of the common problems you would find and, of course, making your development process very easy. Forget about configuring the framework and your worries about data binding, AJAX calls, integration with third-party libraries, and so on, Aurelia comes with a big variety of plugins that are ready to help you in any situation, in a very simple way, and allows you to focus only on business code. Aurelia is not just another frontend framework, it is the future of frontend development.

Over the years, JavaScript was used just in frontend layer; with NodeJS, this approach has changed too. The fact that we can execute our JavaScript code in its own runtime environment allows us to start writing backend functionalities to be consumed for the frontend layer. ExpressJS is the backend framework based on NodeJS that will allow us to write our business processing data functionalities in a very simple way, high understandable and just with a few lines of code. To complete your travel through the backend layer, we will show you how to store data in one of the most famous NoSQL databases: MongoDB. Its simplicity and speed to insert and extract data are just amazing. 

The IT world changes quickly, and you need to be updated on any change. You will also learn how to secure, test, and prepare your application for the real world and use cloud platforms to deploy your projects that are available worldwide, highly scalable, and secured. Are you ready to start your journey to become a great full stack developer?

Then, we welcome you to the new M.E.A.N. approach (MongoDB, ExpressJS, Aurelia, NodeJS).

Who this book is for

This book is perfect for IT professionals with/without hands-on experience in software development. This book will guide you to create highly scalable applications in AureliaJS by reviewing basic programming concepts and good practices, such as TDD and Security.

By the end of this book, you will become a full-stack programmer with strong knowledge of modern JavaScript frameworks, NoSQL databases, Docker, and cloud technologies.

What this book covers

Chapter 1, Introducing Aurelia, explains why JavaScript is a very good code language and how it is changing over time, the common syntax used (ES6), and a brief exploration about other modern frameworks, such as Angular and React, and why Aurelia is the best choice.

Chapter 2, Styling the User Interface, introduces you to the modern web development tools, very useful and in demand nowadays. You will learn how to make your stylesheets more friendly and readable and create automated task to execute commands to process your files. Also, you will see the current tendency in web design through the most used CSS libraries in the world.

Chapter 3, Testing and Debugging focuses on how to test your Aurelia applications to avoid potential bugs and deliver high-quality apps.

Chapter 4, Creating Components and Templates, states that it's time to start abstracting our business components and create isolated pieces that are highly reusable and easy to maintain to build your application. You will learn how to manage events and lifecycles of each part of your application, giving you total control over them.

Chapter 5, Creating Our RESTful API, deals with how to implement the backend for your example application using Node.js. Also, you will learn how to design strong APIs.

Chapter 6, Storing Our Data in MongoDB, teaches you how to integrate your Node.js backend application to MongoDB to store your application's information.

Chapter 7, Advanced Features on Aurelia, shows you more advanced features regarding data binding and other very common scenarios in your day to day work.

Chapter 8Security, explains how to implement Authentication/Authorization and Single-Sign-On in AureliaJS using a common third-party service called Auth0. 

Chapter 9, Running E2E Tests, is the most important part in the development lifecycle. It's time to test whether all your code work and meet your business requirements, but not as isolated pieces. You will also test whether the functionality of all your components works well together.

Chapter 10, Deployment, describes how to deploy your Aurelia applications in your on-premise servers using Docker and NGINX; also, it shows you how to deploy the application to Heroku and Amazon Web Services.

To get the most out of this book

  1. You must be familiar with at least the basic principles of one code language. Don't worry if you don't have any professional experience since this book will guide you step by step through each chapter to get the most out of it.
  2. We recommend that you start using any Unix-based operative system (Ubuntu, Debian, and macOS). This is because it is more flexible and easy to execute tasks on Terminal.
  3. You will need a lot of patience. No one is born with knowledge, so never give up if one concept or example is not clear at the first go.
  4. You will also need a lot of practice. It's impossible to cover all the real-world scenarios in a book, so we recommend that you go three steps ahead and modify the examples, add additional features, and research a lot.

Download the example code files

You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

  1. Log in or register at www.packtpub.com.
  2. Select the SUPPORT tab.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR/7-Zip for Windows
  • Zipeg/iZip/UnRarX for Mac
  • 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Hands-On-Full-Stack-Web-Development-with-Aurelia. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

 

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "The source code will be generated in the src/resources/{type} folder depending on the type you selected."

A block of code is set as follows:

function sum(numberA, numberB){
return numberA + numberB
}
sum(4,5) //9
sum(5,2) //7
sum(sum(5,1),9) //15

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

class Example {
    static returnMessage(){
return 'From static method'
}
}
let staticMessage = Example.returnMessage() // From static method

Any command-line input or output is written as follows:

cd my-app
au run --watch --env prod

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Create a New item, which requires admin."

Note

Warnings or important notes appear like this.

Note

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packtpub.com.