Cover image for Angular for Enterprise-Ready Web Applications - Second Edition

Angular for Enterprise-Ready Web Applications - Second Edition

Author Doguhan Uluca
Release Date: 2020/05/01
Topic:
0%
22
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Revised and updated second edition of the bestselling hands-on guide to building enterprise-ready web apps using an evergreen Angular platform

Key Features

  • Updated examples, projects, and a new overview of tools – including NgRX and Ivy, automated testing, and Firebase authentication
  • New chapter summarizing history of web frameworks and Angular version updates
  • All-new RESTful API implementation leveraging the MEAN stack with MongoDB, Express.js, Angular and Node.js

Book Description

This second edition of Angular for Enterprise-Ready Web Applications is updated with in-depth coverage of the evergreen Angular platform.

You'll start by mastering Angular programming fundamentals. Using the Kanban method and GitHub tools, you'll build great-looking apps with Angular Material and also leverage reactive programming patterns with RxJS, discover the flux pattern with NgRx, become familiar with automated testing, utilize continuous integration using CircleCI, and deploy your app to the cloud using Vercel Now and GCloud.

You will then learn how to design and develop line-of-business apps using router-first architecture with observable data anchors, demonstrated through oft-used recipes like master/detail views, and data tables with pagination and forms. Next, you'll discover robust authentication and authorization design demonstrated via integration with Firebase, API documentation using Swagger, and API implementation using the MEAN stack.

Finally, you will learn about DevOps using Docker, build a highly available cloud infrastructure on AWS, capture user behavior with Google Analytics, and perform load testing. By the end of the book, you'll be familiar with the entire gamut of modern web development and full-stack architecture, 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

  • Adopt a minimalist, value-first approach to delivering web apps
  • Master Angular development fundamentals, RxJS, CLI tools, GitHub, and Docker
  • Discover the flux pattern and NgRx
  • Implement a RESTful APIs using Node.js, Express.js, and MongoDB
  • Create secure and efficient web apps for any cloud provider or your own servers
  • Deploy your app on highly available cloud infrastructure using DevOps, CircleCI, and AWS

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. Developers that have prior experience in writing a RESTful APIs will also benefit, as well as developers who will gain greater awareness of how they fit into the larger picture of delivering a web application. Prior experience with RESTful APIs is desired.

Table of Contents

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  2. Introduction to Angular and Its Concepts
    1. A brief history of web frameworks
    2. Introduction to Angular
      1. Angular's philosophy
      2. Angular Evergreen
      3. TypeScript
      4. Basic Angular architecture
    3. The reactive development paradigm
      1. RxJS
      2. Reactive data streams
    4. Advanced Angular architecture
      1. The Angular Router
      2. Lazy loading
      3. State management
        1. The Flux pattern
        2. NgRx
      4. React.js architecture
    5. Notable Angular features
      1. Angular 6
      2. Angular 8
      3. Angular 9
    6. Summary
    7. Further reading
    8. Questions
  3. Setting Up Your Development Environment
    1. CLI package managers
      1. Installing Chocolatey for Windows
      2. Installing Homebrew for macOS
    2. Installing development tools
      1. Git and GitHub Desktop
        1. Why use GitHub?
        2. Why use GitHub Desktop?
        3. Installing Git and GitHub Desktop
        4. Using your GitHub credentials in Git
      2. Node.js
      3. Existing Node.js installation
      4. Installing Node.js
        1. Global npm packages
      5. Visual Studio Code
        1. Installing Visual Studio Code
      6. Docker
        1. Installing Docker
      7. Cloud services
        1. Vercel Now
        2. Google Firebase
        3. Google Cloud
        4. Amazon Web Services
    3. Setup automation for Windows and macOS
      1. PowerShell script
      2. Bash script
    4. The Angular CLI
      1. Setting up your development directory
      2. Generating your Angular application
        1. Installing the Angular CLI
        2. Initializing your Angular app
        3. Publishing a Git repository using GitHub Desktop
        4. Inspecting and updating package.json
        5. Committing code using VS Code
      3. Running your Angular app
      4. Verifying your code
    5. Optimizing VS Code for Angular
      1. Configuring your project automatically
        1. VS Code auto save
        2. IDE settings
        3. IDE extensions
      2. Scripting code styling and linting
        1. Configuring tooling
        2. Implementing a style checker and fixer
        3. Implementing a lint checker and fixer
      3. Configuring Angular CLI autocomplete
      4. VS Code Auto Fixer
    6. Summary
    7. Further reading
    8. Questions
  4. Creating a Basic Angular App
    1. Planning using Kanban and GitHub projects
      1. Setting up a GitHub project
      2. Configuring a Kanban board
      3. Creating a backlog for the Local Weather app
      4. Wireframe design
      5. High-level architecture
    2. Crafting UI elements using components and interfaces
      1. Adding an Angular component
      2. Demystifying Angular components
      3. Defining your model using interfaces
    3. Using Angular Services and HttpClient to retrieve data
      1. Creating a new Angular service
      2. Injecting dependencies
      3. Discovering OpenWeatherMap APIs
      4. Storing environment variables
      5. Implementing an HTTP GET operation
      6. Retrieving service data from a component
    4. Transforming data using RxJS
      1. Implementing Reactive transformations
    5. Null guarding in Angular
      1. Property initialization
      2. The safe navigation operator
      3. Null guarding with *ngIf
    6. Summary
    7. Further reading
    8. Questions
  5. Automated Testing, CI, and Release to Production
    1. Unit testing
    2. Angular unit tests
      1. Jasmine
        1. Fixtures
        2. Matchers
      2. Anatomy of auto-generated unit tests
      3. Unit test execution
        1. Compilation errors
        2. Test results
      4. Configuring TestBed
        1. Declarations
        2. Providers
        3. Imports
      5. Test doubles
        1. Fakes
        2. Mocks, stubs, and spies
    3. Angular e2e tests
      1. e2e test execution
      2. The e2e page object and spec
    4. Production readiness
      1. Building for production
      2. Setting environment variables
    5. Continuous Integration
      1. CircleCI
      2. GitHub flow
    6. Deploying to the Cloud
      1. Vercel Now
      2. Deploying static files
    7. Summary
    8. Further reading
    9. Questions
  6. Delivering High-Quality UX with Material
    1. Angular Material
    2. Angular Material setup and performance
      1. Installing Angular Material
        1. Automatically
        2. Manually
      2. Understanding Material's components
      3. Manually configuring Angular Material
        1. Importing modules
        2. Importing themes
        3. Adding the Material Icon font
    3. Angular Flex Layout
      1. Responsive layouts
      2. Installing Angular Flex Layout
      3. Layout basics
        1. Flex Layout APIs for DOM containers
        2. Flex Layout APIs for DOM elements
        3. Flex Layout APIs for any element
    4. Using Material components
      1. Angular Material schematics
      2. Modifying the landing page with Material Toolbar
      3. Material cards
        1. Card header and content
      4. Material typography
        1. Applying typography
      5. Flex Layout Align
      6. Flex Layout
        1. Implementing layout scaffolding
      7. Aligning elements with CSS
        1. Individually styling elements
        2. Fine-tuning styles
        3. Tweaking to match design
      8. Custom themes
      9. Unit testing with Material
    5. Accessibility
      1. Configuring automated pa11y testing
    6. Building an interactive prototype
      1. MockFlow WireframePro
      2. Building a mock-up
        1. Home screen
        2. Search results
        3. Settings pane
      3. Adding interactivity
        1. Exporting the functional prototype
    7. Summary
    8. Further reading
    9. Exercises
    10. Questions
  7. Forms, Observables, and Subjects
    1. Reactive forms versus template-driven forms
      1. Adding Angular reactive forms
      2. Adding and verifying components
      3. Adding a search option to the weather service
      4. Implementing a search
      5. Limiting user inputs with throttle/debounce
      6. Input validation and error messages
        1. Template-driven forms with two-way binding
    2. Component interaction with BehaviorSubject
      1. Global events
      2. Child-parent relationships with event emitters
      3. Parent-child relationships with input binding
      4. Sibling interactions with subjects
    3. Managing subscriptions
      1. Exposé of a memory leak
      2. Unsubscribing from a subscription
      3. Unsubscribing using SubSink
    4. Implementing the reactive style
      1. Binding to an observable with an async pipe
      2. Tapping into an observable stream
    5. Multiple API calls
      1. Implementing a postal code service
      2. Chaining API calls
    6. Summary
    7. Exercises
    8. Questions
  8. Creating a Router-First Line-of-Business App
    1. The 80-20 solution
      1. Understanding Line-of-Business apps
      2. Disciplined and balanced approach
    2. Router-first architecture
      1. Feature modules
      2. Developing a roadmap and scope
      3. Designing with lazy loading in mind
      4. Implementing a walking-skeleton
      5. Achieve a stateless, data-driven design
      6. Enforce a decoupled component architecture
      7. Differentiate between user controls and components
      8. Maximize code reuse with TypeScript and ES
    3. Creating LemonMart
      1. Creating a router-first app
      2. Configuring Angular and VS Code
      3. Configuring Material and Styles
      4. Designing LemonMart
        1. Identifying user roles
        2. Identifying high-level modules with a site map
    4. Generating router-enabled modules
      1. Designing the home route
        1. Setting up default routes
        2. RouterLink
        3. Router outlet
    5. Branding, customization, and Material icons
      1. Branding
      2. Color palette
      3. Implementing browser manifest and icons
      4. Custom themes
      5. Custom icons
      6. Material icons
    6. Feature modules with lazy loading
      1. Configuring feature modules with components and routes
      2. Eager loading
      3. Lazy loading
    7. Completing the walking skeleton
      1. The manager module
      2. User module
      3. POS and inventory modules
        1. POS module
        2. Inventory module
      4. Inspect the router tree
    8. Common testing module
    9. Designing around major data entities
      1. Defining entities
    10. High-level UX design
      1. Creating an artifacts Wiki
      2. Leveraging mock-ups in your app
    11. Summary
    12. Further reading
    13. Questions
  9. Designing Authentication and Authorization
    1. Designing an auth workflow
      1. JWT life cycle
    2. TypeScript operators for safe data handling
      1. Null and undefined checking
      2. The conditional or ternary operator
      3. The null coalescing operator
      4. The nullish coalescing operator
      5. Optional chaining
    3. Reusable services leveraging OOP concepts
      1. JavaScript classes
      2. Abstraction and inheritance
        1. Create the auth service
        2. Implement an abstract auth service
        3. Abstract functions
        4. Abstract caching service using localStorage
        5. Caching the JWT
      3. Implement an in-memory auth service
        1. Simple login
        2. Logout
      4. Resuming a JWT session
      5. HTTP interceptor
    4. Dynamic UI components and navigation
      1. Implementing the login component
      2. Conditional navigation
      3. Common validations for forms
      4. UI service
      5. Side navigation
    5. Role-based routing using guards
      1. Router guards
      2. Auth guards
      3. Auth service fake and common testing providers
    6. Firebase authentication recipe
      1. Add an application
      2. Configure authentication
      3. Implement Firebase authentication
    7. Providing a service using a factory
    8. Summary
    9. Further reading
    10. Questions
  10. DevOps Using Docker
    1. DevOps
    2. Containerizing web apps using Docker
      1. Anatomy of a Dockerfile
      2. Installing Docker
      3. Setting up npm scripts for Docker
      4. Build and publish an image to Docker Hub
      5. NPM scripts in VS Code
      6. Docker extensions in VS Code
    3. Deploying a Dockerfile to the cloud
      1. Google Cloud Run
      2. Configuring Docker with Cloud Run
      3. Troubleshooting Cloud Run
    4. Continuous deployment
      1. Deploying to Vercel Now using CircleCI
      2. Deploying to GCloud using orbs
      3. Gated CI workflows
    5. Advanced continuous integration
      1. Containerizing build environments
      2. Multi-stage Dockerfiles
        1. Builder
        2. Tester
        3. Web server
      3. CircleCI container-in-container
    6. Code coverage reports
      1. Code coverage in CI
    7. Summary
    8. Exercise
    9. Further reading
    10. Questions
  11. RESTful APIs and Full-Stack Implementation
    1. Full-stack architecture
      1. Minimal MEAN
        1. Angular
        2. Express
        3. Node
        4. Mongo
        5. Tooling
      2. Configuring a monorepo
        1. Monorepo structure
        2. Git submodules
        3. Configuring a Node project with TypeScript
        4. CircleCI config
      3. Docker Compose
        1. Using Nginx as the web server
        2. Containerizing the server
        3. Configuring environment variables with DotEnv
        4. Define Docker-Compose YAML
        5. Orchestrating the Compose launch
        6. Compose on CircleCI
    2. RESTful APIs
      1. API design with Swagger
        1. Defining a Swagger YAML file
        2. Preview Swagger file
      2. Implementing APIs with Express.js
        1. Bootstrapping the server
        2. Routes and versioning
        3. Services
      3. Configuring Swagger with Express
    3. MongoDB ODM with DocumentTS
      1. About DocumentTS
      2. Connecting to the database
      3. Models with IDocument
    4. Implementing JWT auth
      1. Login API
      2. Authenticating middleware
      3. Custom server auth provider
      4. GET User by ID
    5. Generating users with Postman
      1. Configuring Postman for authenticated calls
      2. Postman automation
      3. Put User
      4. Pagination and filtering with DocumentTS
    6. Summary
    7. Exercise
    8. Further reading
    9. Questions
  12. Recipes – Reusability, Routing, and Caching
    1. Implementing a user service with GET
      1. Implementing PUT with caching
    2. Multi-step responsive forms
      1. Form controls and form groups
      2. Stepper and responsive layout
      3. Reusing repeating template behavior with directives
        1. Attribute directives
        2. Field error attribute directive
      4. Calculated properties and DatePicker
      5. Typeahead support
      6. Dynamic form arrays
      7. Creating shared components
      8. Reviewing and saving form data
    3. Scaling architecture with reusable form parts
      1. Base form component as an abstract class
      2. Implementing a reusable form part
    4. Input masking
    5. Custom controls with ControlValueAccessor
      1. Implementing a custom rating control
      2. Using custom controls in forms
    6. Layouts using grid list
    7. Restoring cached data
    8. Exercise
    9. Summary
    10. Further reading
    11. Questions
  13. Recipes – Master/Detail, Data Tables, and NgRx
    1. Editing existing users
      1. Loading data with resolve guard
      2. Reusing components with binding and route data
    2. Master/detail view auxiliary routes
    3. Data table with pagination
      1. Updating unit tests
    4. NgRx Store and Effects
      1. Implementing NgRx for LocalCast Weather
      2. Comparing BehaviorSubject and NgRx
      3. Setting up NgRx
      4. Defining NgRx actions
      5. Implementing NgRx Effects
      6. Implementing reducers
      7. Registering with Store using selector
      8. Dispatching store actions
      9. Unit testing reducers and selectors
      10. Unit testing components with MockStore
    5. NgRx Data
      1. Implementing NgRx/Data in LemonMart
      2. Configuring proxy in Angular CLI
      3. Using Entity Service
      4. Customizing Entity Service
    6. Summary
    7. Further reading
    8. Questions
  14. Highly Available Cloud Infrastructure on AWS
    1. Creating a secure AWS account
      1. Securing secrets
    2. Right-sizing infrastructure
      1. Optimizing instances
      2. Simple load testing
    3. Deploying to AWS ECS Fargate
      1. Configuring ECS Fargate
        1. Creating a Fargate cluster
        2. Creating a container repository
        3. Creating a task definition
        4. Creating an elastic load balancer
        5. Creating a cluster service
        6. Configuring the DNS
      2. Adding npm scripts for AWS
      3. Publish
      4. Deploying to AWS using CircleCI
    4. AWS billing
    5. Summary
    6. Exercise
    7. Further reading
    8. Questions
  15. Google Analytics and Advanced Cloud Ops
    1. Collecting analytics
      1. Adding Google Tag Manager to your Angular app
        1. Setting up Google Tag Manager
        2. Setting up Google Analytics
    2. Budgeting and scaling
      1. Calculating the per-user cost
    3. Advanced load testing
    4. Reliable cloud scaling
      1. Cost per user in a scalable environment
        1. Calculating target server utilization
        2. Revising estimates with metrics
    5. Measuring actual use
      1. Creating a custom event
      2. Adding custom events in Angular
      3. Advanced analytics events
    6. Summary
    7. Further reading
    8. Questions
  16. Appendix A: Debugging Angular
    1. The most useful shortcut
    2. Troubleshooting errors in the browser
      1. Leveraging Browser DevTools
      2. Optimizing dev tools
      3. Troubleshooting network issues
      4. Investigating console errors
    3. Karma, Jasmine, and unit testing errors
      1. NetworkError
      2. Generic ErrorEvents
    4. Debugging with Dev Tools
    5. Debugging with Visual Studio Code
    6. Debugging with Angular Augury
      1. Component Tree
      2. Router Tree
      3. NgModules
    7. Debugging with Redux DevTools
      1. Implement NgRx Console Logger
      2. Configuring NgRx Store DevTools
    8. Debugging RxJS
      1. Tapping an RxJS Event Stream
      2. Breakpoint debugging an RxJS Event Stream
    9. Further advice
  17. Appendix B: Angular Cheat Sheet
    1. Built-in directives
    2. Common pipes
    3. Starter commands, major components, and CLI scaffolds
      1. Starter commands
      2. Major component scaffolds
      3. TypeScript scaffolds
    4. Common RxJS functions/operators
      1. Functions
      2. Operators
    5. Further Reading
  18. Another Book You May Enjoy
  19. Index
3.145.23.123