Reactive Patterns with RxJS for Angular

Book description

Discover how you can leverage the reactive paradigm with RxJS in your Angular applications using some common patterns and techniques that can be implemented in real-world use cases

Key Features

  • Learn how to write clean, maintainable, performant, and optimized Angular web applications using reactive patterns
  • Explore various RxJS operators and techniques in detail to improve the testing and performance of your code
  • Switch from an imperative mindset to reactive by comparing both

Book Description

RxJS is a fast, reliable, and compact library for handling asynchronous and event-based programs. It is a first-class citizen in Angular and enables web developers to enhance application performance, code quality, and user experience, so using reactive patterns in your Angular web development projects can improve user interaction on your apps, which will significantly improve the ROI of your applications.

This book is a step-by-step guide to learning everything about RxJS and reactivity. You'll begin by understanding the importance of the reactive paradigm and the new features of RxJS 7. Next, you'll discover various reactive patterns, based on real-world use cases, for managing your application’s data efficiently and implementing common features using the fewest lines of code.

As you build a complete application progressively throughout the book, you'll learn how to handle your app data reactively and explore different patterns that enhance the user experience and code quality, while also improving the maintainability of Angular apps and the developer's productivity. Finally, you'll test your asynchronous streams and enhance the performance and quality of your applications by following best practices.

By the end of this RxJS Angular book, you'll be able to develop Angular applications by implementing reactive patterns.

What you will learn

  • Understand how to use the marble diagram and read it for designing reactive applications
  • Work with the latest features of RxJS 7
  • Build a complete Angular app reactively, from requirement gathering to deploying it
  • Become well-versed with the concepts of streams, including transforming, combining, and composing them
  • Explore the different testing strategies for RxJS apps, their advantages, and drawbacks
  • Understand memory leak problems in web apps and techniques to avoid them
  • Discover multicasting in RxJS and how it can resolve complex problems

Who this book is for

If you're an Angular developer who wants to leverage RxJS for building reactive web applications, this is the book for you. Beginner-level experience with Angular and TypeScript and knowledge of functional programming concepts is assumed.

Table of contents

  1. Contributors
    1. About the author
    2. About the reviewer
  2. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  3. Part 1 – Introduction
  4. Chapter 1: The Power of the Reactive Paradigm
    1. Technical requirements
    2. Exploring the pillars of reactive programming
      1. Data streams
      2. Observer patterns
    3. Using RxJS in Angular and its advantages
      1. The HTTP client module
      2. The router module
      3. Reactive forms
      4. The event emitter
      5. The async pipe
    4. Learning about the marble diagram – our secret weapon
    5. Summary
  5. Chapter 2: RxJS 7 – The Major Features
    1. Technical requirements
    2. Exploring the bundle size improvements
    3. Reviewing the TypeScript typing improvements
    4. Understanding the toPromise() deprecation
      1. The firstValueFrom() method
      2. The lastValueFrom() method
      3. Empty errors
    5. Highlighting API consistency improvements
    6. Summary
  6. Chapter 3: A Walkthrough of the Application
    1. Technical requirements
    2. Our app's user stories
      1. View one – the landing page
      2. View two – the new recipe interface
      3. View three – the My Recipes interface
      4. View four – the My Favourites interface
      5. View five – the modify recipe interface
      6. View six – the recipe details interface
    3. Our app's architecture
    4. The components overview
    5. Summary
  7. Part 2 – A Trip into Reactive Patterns
  8. Chapter 4: Fetching Data as Streams
    1. Technical requirements
    2. Defining the requirement
    3. Exploring the classic pattern for fetching data
      1. Defining the structure of your data
      2. Creating an Angular service
      3. Retrieving the data through a method
      4. Injecting and subscribing to the service in your component
      5. Displaying the data in the template
      6. Managing unsubscriptions
    4. Exploring the reactive pattern for fetching data
      1. Retrieving data as streams
      2. Defining the stream in your component
      3. Using the async pipe in your template
    5. Highlighting the advantages of the reactive pattern
      1. Using the declarative approach
      2. Using the change detection strategy of OnPush
      3. Wrapping up
    6. Summary
  9. Chapter 5: Error Handling
    1. Technical requirements
    2. Understanding the anatomy of an Observable
    3. Exploring error handling patterns and strategies
      1. Handling error operators
      2. The catchError operator
      3. The delayWhen operator
    4. Error handling in action
    5. Summary
  10. Chapter 6: Combining Streams
    1. Technical requirements
    2. Defining the requirement
    3. Exploring the imperative pattern for filtering data
      1. A look at the filter component
      2. A look at the recipes list component
    4. Exploring the declarative pattern for filtering data
      1. The combineLatest operator
      2. The declarative pattern pillars
      3. Emitting a value when an action occurs
    5. Summary
  11. Chapter 7: Transforming Streams
    1. Technical requirements
    2. Defining the requirement
    3. Exploring the imperative pattern for autosave
    4. Exploring the reactive pattern for autosave
      1. Higher-order observables
      2. Higher-order mapping operators
      3. The concatMap operator
    5. Learning about other useful higher-order mapping operators
      1. The mergeMap operator
      2. The switchMap operator
      3. The exhaustMap operator
    6. Summary
  12. Part 3 – Multicasting Takes You to New Places
  13. Chapter 8: Multicasting Essentials
    1. Technical requirements
    2. Explaining Multicasting versus Unicasting
      1. Producer
      2. A cold observable
      3. A hot observable
    3. Exploring Subjects
      1. A plain Subject
      2. ReplaySubject
      3. BehaviorSubject
    4. Highlighting Multicasting operators
    5. Summary
  14. Chapter 9: Caching Streams
    1. Technical requirements
    2. Defining the requirement
    3. Learning about using the reactive pattern to cache streams
    4. Exploring the RxJS 7 recommended pattern to cache streams
    5. Highlighting the use cases of caching streams
    6. Summary
  15. Chapter 10: Sharing Data between Components
    1. Technical requirements
    2. Defining the requirement
    3. Exploring the reactive pattern to share data
      1. Step one – creating a shared service
      2. Step two – updating the last-selected recipe
      3. Step three – consuming the last-selected recipe
    4. Highlighting other ways for sharing data
    5. Summary
  16. Chapter 11: Bulk Operations
    1. Technical requirements
    2. Defining the requirement
    3. Learning about the reactive pattern for bulk operations
      1. The forkJoin operator
      2. The pattern in action
    4. Learning about the reactive pattern for tracking progress
    5. Summary
  17. Chapter 12: Processing Real-Time Updates
    1. Technical requirements
    2. Defining the requirement
    3. Learning the reactive pattern for consuming real-time messages
      1. The WebSocketSubject behavior
      2. Connection management
      3. Putting the pattern into action
    4. Learning the reactive pattern for handling reconnection
      1. Retrying the reconnection
    5. Summary
  18. Part 4 – Final Touch
  19. Chapter 13: Testing RxJS Observables
    1. Technical requirements
    2. Learning about the subscribe and assert pattern
    3. Learning about the marble testing pattern
      1. Understanding the syntax
      2. Implementing marble tests
    4. Highlighting testing streams using HttpClientTestingModule
    5. Summary
    6. Why subscribe?
  20. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts

Product information

  • Title: Reactive Patterns with RxJS for Angular
  • Author(s): Lamis Chebbi
  • Release date: April 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781801811514