Angular 6 for Enterprise-Ready Web Applications

Deliver production-ready and cloud-scale Angular web apps

Doguhan Uluca

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781786463760
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming
• Index: Computer Science

A hands-on guide with a minimalist and flexible approach that enables quick learning and rapid delivery of cloud-ready enterprise applications with Angular 6

Key Features

• Explore tools and techniques to push your web app to the next level
• Master Angular app design and architectural considerations
• Learn continuous integration and deploy your app on a highly available cloud infrastructure in AWS

Book Description

Angular 6 for Enterprise-Ready Web Applications follows a hands-on and minimalist approach demonstrating how to design and architect high quality apps.

The first part of the book is about mastering the Angular platform using foundational technologies. You will use the Kanban method to focus on value delivery, communicate design ideas with mock-up tools and build great looking apps with Angular Material. You will become comfortable using CLI tools, understand reactive programming with RxJS, and deploy to the cloud using Docker.

The second part of the book will introduce you to the router-first architecture, a seven-step approach to designing and developing mid-to-large line-of-business applications, along with popular recipes. You will learn how to design a solid authentication and authorization experience; explore unit testing, early integration with backend APIs using Swagger and continuous integration using CircleCI. In the concluding chapters, you will provision a highly available cloud infrastructure on AWS and then use Google Analytics to capture user behavior.

By the end of this book, you will be familiar with the scope of web development using Angular, Swagger, and Docker, learning patterns and practices to be successful as an individual developer on the web or as a team in the Enterprise.

What you will learn

• Create full-stack web applications using Angular and RESTful APIs
• Master Angular fundamentals, RxJS, CLI tools, unit testing, GitHub, and Docker
• Design and architect responsive, secure and scalable apps to deploy on AWS
• Adopt a minimalist, value-first approach to delivering your app with Kanban
• Get introduced to automated testing with continuous integration on CircleCI
• Optimize Nginx and Node.js web servers with load testing tools

Who this book is for

This book is for developers who want to confidently deliver high-quality and production-grade Angular apps from design to deployment. We assume that you have prior experience in writing a RESTful API with the tech stack of your choice; if you don't, you can still gain a lot of benefit from this book, which focuses on the entire scope of frontend development, from design to deployment!

Create a Local Weather Web Application

In this chapter, we will be designing and building a simple Local Weather app with Angular and a third-party web API, using an iterative development methodology. You will focus on delivering value first, while learning about the nuances and optimal ways of using Angular, TypeScript, Visual Studio Code, Reactive Programming, and RxJS. Before we dive into coding, we will go over the philosophy behind Angular and ensure that your development environment is optimized and can enable collaboration and effortless information radiation.

Each section of this chapter will introduce you to new concepts, best practices, and optimal ways of leveraging these technologies and cover the bases to close any knowledge gaps you may have about web and modern JavaScript development basics.

In this chapter, you will learn Angular fundamentals to build a simple web app and become familiar with the new Angular platform and full-stack architecture.

In this chapter, you will learn the following:

• Get introduced to Angular and the philosophy behind it
• Configuring a repository with an optimal folder structure for full-stack development
• Using Angular CLI to generate your Angular web application
• Optimizing Visual Code for Angular & TypeScript development
• Planning out your roadmap using Waffle as a GitHub-connected Kanban board
• Crafting a new UI element to display current weather information using components and interfaces
• Using Angular Services and HttpClient to retrieve data from OpenWeatherMap APIs
• Leveraging observable streams to transform data using RxJS

The code samples provided in this book require Angular version 5 and 6. Angular 5 code is runtime compatible with Angular 6. Angular 6 will be supported in LTS until October 2019. The most up-to-date versions of the code repositories may be found at the following:

• For Chapters 2 to 6, LocalCast Weather, at: Github.com/duluca/local-weather-app
• For Chapters 7 to 12, LemonMart, at: Github.com/duluca/lemon-mart

Introduction to Angular

Angular is an open source project maintained by Google and a community of developers. The new Angular platform is vastly different from the legacy framework you may have used in the past. A collaboration with Microsoft makes TypeScript, which is a superset of JavaScript, the default development language, enabling developers to target legacy browsers such as Internet Explorer 11, while writing modern JavaScript code that is supported in evergreen browsers such as Chrome, Firefox, and Edge. The legacy versions of Angular, versions in the 1.x.x range, are now referred to as AngularJS. Version 2.0.0 and higher versions are simply called Angular. Where AngularJS is a monolithic JavaScript Single Page Application (SPA) framework, Angular is a platform that is capable of targeting browsers, hybrid-mobile frameworks, desktop applications, and server-side rendered views.

Each minor version increment in AngularJS meant risky updates with costly deprecations and major new features delivered at uncertain intervals. This led to an unpredictable, ever evolving framework with seemingly no guiding hand to carry code bases forward. If you used AngularJS, you likely got stuck on a particular version, because the specific architecture of your code base made it very difficult to move to a new version. In the spring/summer of 2018, the last major update to AngularJS will be released with version 1.7. This release will mark the beginning of the end for the legacy framework, with a planned end-of-life in July 2021.

Angular improves upon AngularJS in every way imaginable. The platform follows semver, as defined at https://semver.org/, where minor version increments denote new feature additions and potential deprecation notices for the second next major version, but no breaking changes. Furthermore, the Angular team at Google has committed to a deterministic release schedule for major version increments to be released every 6 months. After this 6-month development window, starting with Angular 4, all major releases receive long-term support (LTS) with bug fixes and security patches for an additional 12 months. From release to end-of-life, each major version is supported for 18 months. Refer to the following chart for the tentative release and support schedule for AngularJS and Angular:

Tentative Angular Release and Support Schedule

So, what does this mean for you? You can be confident that the code you write in Angular will be supported and backwards compatible for an approximate time frame of 24 months, even if you make no changes to it. So, if you wrote an Angular app in version 4 in April 2017, your code is now runtime compatible with Angular 5, which itself is supported until April 2019. In order to upgrade your Angular 4 code to Angular 6, you will need to ensure that you're not using any of the deprecated APIs that were announced as deprecated in Angular 5. In reality, the deprecations are minor and unless you are working with low-level APIs for a highly specialized user experience, the time and effort it takes to update your code base should be minimal. However, this is a promise made by Google and not a contract. The Angular team has a major incentive to ensure backwards compatibility, because Google runs around 600+ Angular apps with a single version of Angular active at any one time throughout the organization. This means, by the time you read this, all of those 600+ apps will be running in Angular 6. You may think Google has infinite resources to make this happen, but like any other organization, they too have limited resources and not every app is actively maintained with a dedicated team. This means the Angular team must ensure compatibility through automated tests and make it as painless as possible to move through major releases going forward. In Angular 6, the update process was made much easier with the introduction of ng update. In the future, the team will release automated CLI tools to make upgrades of deprecated functionality a reasonable endeavor.

This is great news for developers and organizations alike. Now, instead of being perpetually stuck on a legacy version of Angular, you can actually plan and allocate the necessary resources to keep moving your application to the future without costly rewrites. As I wrote in a 2017 blog post, The Best New Feature of Angular 4, at bit.ly/NgBestFeature, the message is clear:

For Developers & Managers: Angular is here to stay, so you should be investing your time, attention, and money in learning it – even if you’re currently in love with some other framework.

For Decision Makers (CIOs, CTOs, etc.): Plan to begin your transition to Angular in the next 6 months. It’ll be an investment you’ll be able to explain to business minded people, and your investment will pay dividends for many years to come, long after the initial LTS window expires, with graceful upgrade paths to Angular vNext and beyond.

So, why does Google (Angular) and Microsoft (TypeScript, Visual Studio Code) give away such technologies for free? There are multiple reasons, some including demonstration of technical proves to retain and attract talent, proving and debugging new ideas and tools with millions of developers at scale, and ultimately allowing developers to more easily create great web experiences that ultimately drive more business for Google and Microsoft. I personally don't see any nefarious intent here and welcome open, mature, and high-quality tools that I can tinker with and bend to my own will, if necessary, and not have to pay for a support contract for a proprietary piece of tech.

Bewar...

Table of contents

• Title Page
• Copyright and Credits
• Packt Upsell
• Contributors
• Preface
• Setting Up Your Development Environment
• Create a Local Weather Web Application
• Prepare Angular App for Production Release
• Staying Up to Date with Angular Updates
• Enhance Angular App with Angular Material
• Reactive Forms and Component Interaction
• Create a Router-First Line-of-Business App
• Continuous Integration and API Design
• Design Authentication and Authorization
• Angular App Design and Recipes
• Highly-Available Cloud Infrastructure on AWS
• Google Analytics and Advanced Cloud Ops
• Other Books You May Enjoy