Gain insights into reactive programming with RxJS 7, explore data streams, error handling, and multicasting to build a recipe app, and learn to test and optimize reactive applications.

angular.tar.gz

angular04

angular05

angular06

coderun

angular04-copy

test

angular07

angular09

angular10

angular11

angular12

angular13

angular13-test

The reactive programming paradigm is designed to make working with asynchronous events and data streams convenient. 

This course teaches you about the reactive programming paradigm and when to choose it over others. You’ll learn to use new RxJS 7 features to create a recipe book web application that lets users browse and share recipes. In this context, you’ll learn about data streams, error handling, and how to combine streams and transform one data stream into another. You’ll develop an understanding of multicasting and caching streams, how to share data between components, perform bulk operations such as file uploads, and perform real-time updates. Finally, you’ll learn how to test a reactive application. To assess your knowledge, there’s a project, coding challenges, and assessments.

After this course, you’ll be able to determine the utility of the reactive paradigm for any application and have mastery over new RxJS 7 features to create robust reactive applications.

Reactive Programming with Angular and RxJS 7

#

# Exploring the bundle size improvements

Every front-end application needs a number of JavaScript files to run. These files are either the ones we've written ourselves or the external dependencies used to build the application, such as Moment.js, Lodash, or RxJS. A bundle is an output of a process that merges all these files into a few (if not single) files in the most optimized way possible.  

One of the major approaches commonly used to improve front-end performance is reducing the JavaScript bundle size. The smaller the size of the JavaScript bundle, the faster a page can load the first time and be available to users.  

## Bundle size optimization in RxJS 7



The RxJS core team worked on reducing the bundle size of the library in version 7; they did a lot of refactoring to optimize the code and, consequently, the bundle size.  

To get a better idea, let's measure the bundle sizes of two front-end applications using RxJS 6 and RxJS 7 and compare the size of the RxJS library in both applications. There are a lot of tools that can help us measure and analyze the bundles. The one that we're going to use is the source map explorer. The **source map explorer** enables us
to analyze bundles that have a source map by offering a visual representation. In fact, it shows us an interactive tree map to help us determine where all the code is coming from, in addition to the size of the bundles that are emerging from both the external dependencies and the inner code.  


Learn about the optimization of JavaScript bundle sizes in front-end apps using RxJS 7.

Bundle Size and Typing Improvements

Getting Started

The Power of the Reactive Paradigm

RxJS 7—The Major Features

A Walk-Through of the Application

Fetching Data as Streams

Error Handling

Combining Streams

Assessment 1

Transforming Streams

Multicasting Essentials

Caching Streams

Sharing Data between Components

Bulk Operations

Processing Real-Time Updates

Testing RxJS Observables

Assessment 2

Conclusion

Bundle Size and Typing Improvements

Exploring the bundle size improvements