DEV Community: Tevpro Developers

Comparing time based operators in RxJS: debounce, throttle, sample, and audit

Tevpro Developers — Mon, 04 Apr 2022 16:03:03 +0000

In RxJS, a Pipeable Operator is essentially a pure function which takes one Observable as input and generates another Observable as output. Pipeable Operators return a new observable without modifying the original, inputted Observable.

What are Timing Operators?
Timing operators are a type of Pipeable Operators used to control when an Observable's values will be emitted. To control the flow of emitted values of an Observable, you can use debounceTime(), throttleTime(), sampleTime(), and auditTime() depending on the task at hand.

debounceTime()
debounceTime() emits the latest value after a pause/delay from when the latest value was emitted.
A popular use case for debounceTime() is to control when a user's input is "accepted" as to only take the last emitted value after a user pauses typing after a specified amount of time.

throttleTime()
throttleTime() is similar to debounceTime(). The difference is that throttleTime() emits a value first, then ignores values during a timed window and continues to repeat this pattern, whereas debounceTime() does not emit a value before the delayed windows start.

sampleTime()
sampleTime() emits the latest value at the end of each interval. Any earlier values are ignored, and silence window is repeated after subscription. Similarly, use sample() to sample an observable at any given time instead of a routine, preset interval.

auditTime()
auditTime() ignores source values for the duration you specify after an emitted value. Silence window is triggered by emitted values from the source.

Conclusion
There are many ways to control the flow of emitted values of an observable, including filtering pipes and timing pipes. Depending on the timing behavior you need, take a look at debounceTime(), throttleTime(), sampleTime(), and auditTime() to see if these behaviors match what you are looking for. If none of these work for you, check out the other RxJS operators available.

Hope you enjoyed this article and of course feel free to reach out with additional questions. Be sure to follow us on Twitter to continue learning RxJS and subscribe to our blog for more amazing content.

Integrating TypeScript into your NextJS app

Tevpro Developers — Thu, 06 Jan 2022 12:57:41 +0000

By Kim Pham, Senior Front End Developer, Tevpro

A guide to installing Typescript in NextJS apps.

NextJS is a wrapper for ReactJS, providing a more comprehensive framework solution to the popular front-end development library. NextJS allows for developers to use many useful "out-of-the-box" features that would otherwise have to be manually added to the relevant React apps.

*NestJS not only enhances React – it uses React. *
"You still write React code. You still build React components, but it’s a framework for production because it adds all those missing features that you typically need to add to React apps to prepare them for production and solve common problems." - Imran Farooq in an Enlear Academy Article

What features does NextJS offer?

React itself is minimal, but extremely flexible in its ability to extend unto other features. In contrast, NextJS has a variety of features already included to help developers build their apps, including:

Prerendering
- Server-side rendering (SSR)
- Static export (SSG)
Automatic build size optimization
Faster development compilation
Page based routing (with support for dynamic routes)
Client-side routing with prefetching
Built-in CSS and Sass support, and support for any CSS-in-JS library
API routes to build API endpoints with Serverless Functions

Steps to convert your NextJS application to use TypeScript

Open a terminal and navigate to the directory of your project's root folder
Run the command npm install touch-cli
Run the command touch tsconfig.json
- If touch command is not found:
  - run npm install touch-cli -g
  - run touch tsconfig.json again
Run the command npm install --save-dev typescript @types/react
Run nest (normally npm run dev or yarn dev)
Start converting your js files into ts/tsx files!
- Any js files that contain jsx will need to become tsx files

Final thoughts
We hope you found this article useful. If you encounter any difficulties or unexpected "gotchas" – don't hesitate to reach out to us for help in converting your app.

Photo by Nick Fewings

How to use the RxJS partition function

Tevpro Developers — Thu, 06 Jan 2022 12:47:14 +0000

By Kim Pham, Senior Front-End Developer, Tevpro

Here is a quick guide for using the partition() function in place of if/else statements inside .subscribe() when working with an RxJS Observable.

Please note that this article discusses the partition function, **not operator*. See RxJS documentation for the deprecation of partition operator.

What is an Observable?
An RxJS Observable produces values over time and allows handling of various asynchronous streams of data. Much of logic and other handling is defined in the .subscribe() function of an observable, but operators and functions further enhance the managing logic and events.

Using the partition() function
Logic for values emitted by an Observable can be implemented inside the .subscribe() block – this includes function calls, conditional/if-else statements, and more. However, instead of an if/else statement, you can split an observable into two separate observables based on a condition that you provide using the partition function.

Example usage of partition() with a Subject

A Subject is a special type of observable and is also an observer. Figure 1.0 demonstrates how to use the partition() function with a Subject, where the first parameter takes an observable (in this case, a Subject) and processes the emitted values from that observable based on the second parameter. The second parameter takes a condition that will be used to separate the values that pass said condition vs the values that fail the condition. In turn, two streams are returned and can be used for much cleaner mitigations and better code readability.

Conclusion
There are many ways to separate and handle logic of Observables' emitted values, such as pipe operators and if-else statements in the .subscribe() block. However, we've found that using partition() is a cleaner, more readable approach that avoids lengthy conditional logic inside your subscribe functions. Reach out to us with any questions.

We hope you enjoyed this article and encourage you to try it out on your next project. Happy coding!

Photo by Javier Allegue Barros