Server-Side Enterprise Development with Angular

Use Angular Universal to pre-render your web pages, improving SEO and application UX

Bram Borggreve

• Publisher: Packt Publishing
• Year: 2018
• Print ISBN: 9781789806267
• eBook ISBN: 9781789805741
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Build SEO-friendly, progressive web applications that live on the web, mobile, or desktop, using the latest Angular Universal which is loaded with powerful features such as components, directives, and services

Key Features

• Explore differences between server-side and client-side rendering
• Learn how to create a progressive web app with great SEO support
• Discover best practices and how to use them to develop an app

Book Description

With the help of Server-Side Enterprise Development with Angular, equip yourself with the skills required to create modern, progressive web applications that load quickly and efficiently. This fast-paced book is a great way to learn how to build an effective UX by using the new features of Angular 7 beta, without wasting efforts in searching for referrals.

To start off, you'll install Angular CLI and set up a working environment, followed by learning to distinguish between the container and presentational components. You'll explore advanced concepts such as making requests to a REST API from an Angular application, creating a web server using Node.js and Express, and adding dynamic metadata. You'll also understand how to implement and configure a service worker using Angular PWA and deploy the server-side rendered app to the cloud.

By the end of this book, you'll have developed skills to serve your users views that load instantly, while reaping all the SEO benefits of improved page indexing.

What you will learn

• Identify what makes an Angular application SEO-friendly
• Generate commands to create components and services
• Distinguish between the container and presentational components
• Implement server-side rendering using Angular Universal
• Create a web server using Node.js and Express
• Add dynamic metadata to your web application
• Deploy a server-side rendered app to the cloud
• Implement and configure a service worker using Angular PWA

Who this book is for

Server-Side Enterprise Development with Angular is for you if you are an experienced front-end developer who wants to quickly work through examples that demonstrate all the key features of server-side development. You need some prior exposure to Angular to follow through this book.

1. Creating the Base Application

Learning Objectives

By the end of the chapter, you will be able to:

• Build a modular Angular app using Angular CLI
• Implement a reusable user interface module based on the Bootstrap framework
• Implement application logic using a clean separation of concerns
• Use services to retrieve data from a REST API
• Use resolvers to make sure that the data is loaded before navigating to the page

This chapter introduces us to Angular CLI and how to use it to create a new application. Here, we will create the various components and implement the logic for our app.

Introduction

Server-Side Rendering

When we talk about the server-side rendering of websites, we generally refer to an application or website that uses a programming language that runs on a server. On this server, web pages are created (rendered) and the output of that rendering (the HTML) is sent to the browser, where it can be displayed directly. Examples of this include PHP, Java, Python, .NET, and Ruby.

Strengths

The benefits of server-side rendering is that the generation happens on a server, making it ready to consume in the browser once it's downloaded. It works great with indexing by search engines and with sharing on social media. The content is ready to be consumed, and the client (in this case, the search engine) does not need to run any code to analyze the page.

Weaknesses

The downside of server-side rendering is that the pages often have only basic possibilities of interaction with the user, and when the content changes, or the user navigates to another page, they have to re-download the whole page. This results in more bandwidth and gives the user the feeling that the page is loading slower than it actually is.

Client-Side Rendering

When we talk about client-side rendering, we generally refer to an application or website that uses JavaScript running in the browser to display (render) the pages. There is often a single page that is downloaded, with a JavaScript file that builds up the actual page (hence the term single-page application).

Strengths

The benefit of client-side rendering is that the pages are highly interactive. Parts of the page can be reloaded or updated without having to refresh the whole browser. This uses less bandwidth and it generally gives the user the feeling that the website or application is very fast. The server can be mostly stateless as the page is not rendered there; it just serves the HTML, JavaScript, and stylesheets one time and is done. This takes load off the server, and this results in better scalability.

Weaknesses

Client-side rendered websites are difficult for a search engine to index, as they need to execute the JavaScript to display how the page looks. This is also the case when sharing links to the sites on social media, since these are generally static instead of dynamic.

Another weakness is that the initial download is bigger, and this can be an issue on, for instance, mobile devices with slow connections. Users will see a blank page until the whole application is downloaded, and maybe they will just use a small part of it.

In this chapter, we will create an Angular application that is used throughout this book.

The Angular application we will build is going to be a list of posts that you regularly see on a social networking site such as Twitter. From the list of posts, we can click a link that brings us to the post detail page. We will intentionally keep the application simple as this book is meant to focus on the technology rather than the functionality of the app. Although the app is simple, we will develop it using best practices for Angular development. It should be easy for any Angular developer to extend on the logic and structure that is shown in this application.

Installing Angular CLI

Angular CLI is the officially supported tool for creating and developing Angular applications. It's an open source project that is maintained by the Angular team and is the recommended way to develop Angular applications.

Angular CLI offers the following functionalities:

• Create a new application
• Run the application in development mode
• Generate code using the best practices from the Angular team
• Run unit tests and end-to-end tests.
• Create a production-ready build
• Easily install and add third-party software (using ng add, since version 6)

One of the main benefits of using Angular CLI is that you don't need to configure any build tools. It's all abstracted away and available through one handy command: ng.

Throughout this book, we will be using the ng command for creating the app, generating the code, running the application in development mode, and creating builds.

Note

For more information about Angular CLI, refer to the project page on GitHub at https://github.com/angular/angular-cli.

Exercise 1: Installing Angular ...

Table of contents

• Preface
• 1. Creating the Base Application
• 2. Server-Side Rendering
• 3. Service Workers
• Appendix A