Reactive Patterns with RxJS for Angular E-Book

Lamis Chebbi

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 190

Veröffentlichungsjahr: 2022

Beschreibung

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.

Leseprobe

Reactive Patterns with RxJS for Angular

A practical guide to managing your Angular application's data reactively and efficiently using RxJS 7

Lamis Chebbi

BIRMINGHAM—MUMBAI

Reactive Patterns with RxJS for Angular

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Associate Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Ashitosh Gupta

Senior Editor: Mark Dsouza

Content Development Editor: Divya Vijayan

Technical Editor: Shubham Sharma

Copy Editor: Safis Editing

Project Coordinator: Ajesh Devavaram

Proofreader: Safis Editing

Indexer: Rekha Nair

Production Designer: Alishon Mendonca

Marketing Coordinator: Elizabeth Varghese

First published: April 2022

Production reference: 3200924

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80181-151-4

www.packt.com

To my father, who taught me diligence, perseverance, and work ethic. Thank you for always being there to support me and lift me up.

To my mother, who taught me selflessness and doing things with love. Thank you for your enduring encouragement during the writing of this book.

To my brother and my sisters, for their continuous support.

-Lamis Chebbi

Contributors

About the author

Lamis Chebbi is a Google Developer Expert for Angular and an Auth0 ambassador.

She is an enthusiastic software engineer with a strong passion for the modern web. She's the founder of Angular Tunisia, a member of the WWCode community, a speaker, a content creator, and a trainer. She has been into Angular for the past few years and loves to share her knowledge about Angular through participating in workshops and organizing training sessions. ng-girls is one of the communities she supports. Empowering women and students is one of her highest priorities. Besides Angular and the web, Lamis loves music, traveling, chromotherapy, and volunteering. Last but not least, she's a forever student.

I want to thank all the people that believed in me and supported me.

I am thankful for the people who helped me in the journey.

I am thankful for the people who inspired me in the journey.

About the reviewer

Dave Muellerchen is a freelancer. He loves sharing his self-taught knowledge of JavaScript at meetups and conferences.

His passion for communities shows in his commitment to them. He is the organizer of the Angular Hamburg Meetup and Tech Meetup Hamburg. He is also a team member at the Angular conference in Germany (ng-de) and a Google Developer Expert for web technologies. He streams developer content on Twitch.

Thanks to my wife, who has my back to do what I do. Thank you my sons, for the fun and the distraction. And of course, thank you Lamis for your trust.

Anu Nagan G has worked in various corporate organizations starting from SaaS startup [GenDeep], midsize [GAVS], Fortune 500 companies [DXC] playing various roles there such as Technical Product Manager, Full Stack Product Lead [Angular, Java, Python, AWS], Delivery Lead respectively in his 8 years of tenure. Currently, he is with Bounteous, leading parallel projects such as Clinical mobile app development, Fintech marketing data migration. Contributed to various AIOps products ZIF, Anu Nagan G has worked in various corporate organizations starting from SaaS startup [GenDeep], midsize [GAVS], Fortune 500 companies [DXC] playing various roles there such as Technical Product Manager, Full Stack Product Lead [Angular, Java, Python, AWS], Delivery Lead respectively in his 8 years of tenure. Currently, he is with Bounteous, leading parallel projects such as Clinical mobile app development, Fintech marketing data migration. Contributed to various AIOps products ZIF, Gcare in the past. He is an avid reader, cinephile, who loves to play Guitar, makes short films with his friends.

I would like to dedicate this to my grandparents who are celebrating their 82nd anniversary, to my wife and we are expecting. Happy birthday Hema.

Muhammad Awais is an internationally recognized Lead Software Engineer and Full Stack Developer with over 9 years of experience. His expertise spans JavaScript, TypeScript, Angular, React, Vue, NodeJS, and AI, focusing on crafting exceptional web experiences and solving complex bugs.

Awais has authored articles on Generative AI and JavaScript for leading publications like Generative AI and JavaScript in Plain English. He is also a renowned speaker, having represented Google and AWS at various events globally. He has gained international recognition from Google, AWS, Postman, and others for his contributions to the tech community.

Table of Contents

Preface

Part 1 – Introduction

Chapter 1: The Power of the Reactive Paradigm

Technical requirements

Exploring the pillars of reactive programming

Data streams

Observer patterns

Using RxJS in Angular and its advantages

The HTTP client module

The router module

Reactive forms

The event emitter

The async pipe

Learning about the marble diagram – our secret weapon

Summary

Chapter 2: RxJS 7 – The Major Features

Technical requirements

Exploring the bundle size improvements

Reviewing the TypeScript typing improvements

Understanding the toPromise() deprecation

The firstValueFrom() method

The lastValueFrom() method

Empty errors

Highlighting API consistency improvements

Summary

Chapter 3: A Walkthrough of the Application

Technical requirements

Our app's user stories

View one – the landing page

View two – the new recipe interface

View three – the My Recipes interface

View four – the My Favourites interface

View five – the modify recipe interface

View six – the recipe details interface

Our app's architecture

The components overview

Summary

Part 2 – A Trip into Reactive Patterns

Chapter 4: Fetching Data as Streams

Technical requirements

Defining the requirement

Exploring the classic pattern for fetching data

Defining the structure of your data

Creating an Angular service

Retrieving the data through a method

Injecting and subscribing to the service in your component

Displaying the data in the template

Managing unsubscriptions

Exploring the reactive pattern for fetching data

Retrieving data as streams

Defining the stream in your component

Using the async pipe in your template

Highlighting the advantages of the reactive pattern

Using the declarative approach

Using the change detection strategy of OnPush

Wrapping up

Summary

Chapter 5: Error Handling

Technical requirements

Understanding the anatomy of an Observable

Exploring error handling patterns and strategies

Handling error operators

The catchError operator

The delayWhen operator

Error handling in action

Summary

Chapter 6: Combining Streams

Technical requirements

Defining the requirement

Exploring the imperative pattern for filtering data

A look at the filter component

A look at the recipes list component

Exploring the declarative pattern for filtering data

The combineLatest operator

The declarative pattern pillars

Emitting a value when an action occurs

Summary

Chapter 7: Transforming Streams

Technical requirements

Defining the requirement

Exploring the imperative pattern for autosave

Exploring the reactive pattern for autosave

Higher-order observables

Higher-order mapping operators

The concatMap operator

Learning about other useful higher-order mapping operators

The mergeMap operator

The switchMap operator

The exhaustMap operator

Summary

Part 3 – Multicasting Takes You to New Places

Chapter 8: Multicasting Essentials

Technical requirements

Explaining Multicasting versus Unicasting

Producer

A cold observable

A hot observable

Exploring Subjects

A plain Subject

ReplaySubject

BehaviorSubject

Highlighting Multicasting operators

Summary

Chapter 9: Caching Streams

Technical requirements

Defining the requirement

Learning about using the reactive pattern to cache streams

Exploring the RxJS 7 recommended pattern to cache streams

Highlighting the use cases of caching streams

Summary

Chapter 10: Sharing Data between Components

Technical requirements

Defining the requirement

Exploring the reactive pattern to share data

Step one – creating a shared service

Step two – updating the last-selected recipe

Step three – consuming the last-selected recipe

Highlighting other ways for sharing data

Summary

Chapter 11: Bulk Operations

Technical requirements

Defining the requirement

Learning about the reactive pattern for bulk operations

The forkJoin operator

The pattern in action

Learning about the reactive pattern for tracking progress

Summary

Chapter 12: Processing Real-Time Updates

Technical requirements

Defining the requirement

Learning the reactive pattern for consuming real-time messages

The WebSocketSubject behavior

Connection management

Putting the pattern into action

Learning the reactive pattern for handling reconnection

Retrying the reconnection

Summary

Part 4 – Final Touch

Chapter 13: Testing RxJS Observables

Technical requirements

Learning about the subscribe and assert pattern

Learning about the marble testing pattern

Understanding the syntax

Implementing marble tests

Highlighting testing streams using HttpClientTestingModule

Summary

Why subscribe?

Other Books You May Enjoy

Preface

Switching to a reactive mindset is one of the biggest challenges when you start learning Reactive programming using RxJS. I believe that the reactive mindset is gradually achieved by learning reactive patterns and comparing the reactive way with the imperative one to distinguish the difference and the benefits.

That's why I wrote this book, which gathers a set of reactive patterns applied in an Angular application. Learning reactive patterns helps with managing your application's data efficiently, writing clean and maintainable code, reacting to user changes faster, and consequently, enhancing the user experience.

So, all that you have to do is get started!

Who this book is for

The book is for Angular developers who want to use RxJS to build reactive web applications. This book assumes beginner-level knowledge of and experience with Angular, RxJS, TypeScript, and functional programming concepts.

What this book covers

Chapter 1, The Power of the Reactive Paradigm, explains the fundamentals of Reactive programming.

Chapter 2, RxJS 7 – The Major Features, focuses on the main improvements of RxJS 7.

Chapter 3, A Walkthrough of the Application, highlights the architecture and requirements of the application that we will be building gradually.

Chapter 4, Fetching Data as Streams, explains the first reactive pattern for fetching data.

Chapter 5, Error Handling, details the error handling strategies and the reactive patterns for handling errors.

Chapter 6, Combining Streams, explains the reactive pattern for combining streams.

Chapter 7, Transforming Streams, explains the reactive pattern for transforming streams.

Chapter 8, Multicasting Essentials, focuses on the multicasting approach essentials.

Chapter 9, Caching Streams, explains the reactive pattern for caching streams.

Chapter 10, Sharing Data between Components, explains the reactive patterns for sharing data between components.

Chapter 11, Bulk Operations, explores the reactive pattern for performing bulk actions.

Chapter 12, Processing Real-Time Updates, explores the reactive pattern for consuming real-time updates.

Chapter 13, Testing RxJS Observables, explains the different strategies for testing reactive patterns.

To get the most out of this book

All code examples have been tested using Angular 12 on a Windows operating system. However, it should work with future releases too.

Please make sure you follow the prerequisites at https://angular.io/guide/setup-local. The prerequisites include the environment setup and the technologies needed in order to install and use Angular.

We also used the Bootstrap library to manage the application responsiveness. We used primeng as a library of rich components and RxJS 7 as the reactive library, of course.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Reactive-Patterns-with-RxJS-for-Angular. If there's an update to the code, it will be updated in the 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!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781801811514_ColorImages.pdf.

Conventions used

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

Code in text: 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: "In the try block, you place your risky statements, and inside catch, you handle the possible exceptions."

A block of code is set as follows:

behaviourSubject$.subscribe({

next: (message) => console.log(message),

error: (error) => console.log(error),

complete: () => console.log('Stream Completed'),

});

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

behaviourSubject$.subscribe({

next: (message) => console.log(message),

error: (error) => console.log(error),

complete: () => console.log('Stream Completed'),

});

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

$ mkdir css

$ cd css

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "Select System info from the Administration panel."

Tips or Important Notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

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

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/support/errata and fill in the form.

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.

Share Your Thoughts

Once you've read Reactive Patterns with RxJS for Angular, we'd love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.

Part 1 – Introduction

In this section, you will understand the importance of using the reactive paradigm in an Angular application, as well as the new features of RxJS 7. In the third chapter, we will introduce the application that we are going to progressively build as we go through the book.

This part comprises the following chapters:

Chapter 1, The Power of the Reactive ParadigmChapter 2, RxJS 7 – The Major FeaturesChapter 3, A Walkthrough of the Application