I know definition and duty of both rxjs and lodash, but I want to know: can I throw out lodash when I use rxjs in my project? because rxjs can works synchronously and asynchronously (async and sync data). I think it can be an alternative for lodash. Am I right?
I know definition and duty of both rxjs and lodash, but I want to know: can I throw out lodash when I use rxjs in my project? because rxjs can works synchronously and asynchronously (async and sync data). I think it can be an alternative for lodash. Am I right?
Share Improve this question asked Dec 30, 2018 at 17:54 Ali HasaniAli Hasani 1654 silver badges14 bronze badges 4 |4 Answers
Reset to default 8It depends on what you do. Some tasks can be achieved by both, but many tasks can only be achieved by one of the two. RxJS is not an alternative to Lodash.
Note that they have completely different missions:
- Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.
- RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
They are completely different things. But i do understand the confusion: they look comparable, but what to do is very different.
Lodash: can be compared to Linq in .Net. Its all about navigating, combining and manipulating lists or enumerable things.
Rxjs: is not about lists, but about events that happen over time.
It actually makes sense to use them both:
// every time filter criteria is updated on the GUI, this will emit a new set of filtercriteria
let filterCriteria$ = new BehaviorSubject<FilterCriteria>({});
// this gets the list of employees, but will also emit a new set of employees when there are any changes
let mostRecentListOfEmployees$: Observable<Employee[]> = this.apiService.GetEmployees();
// using combineLatest will make sure that the map operator is executed every time the criteria or the list is updated
let filteredEmployees$ = filterCriteria$.pipe(
combineLatest(mostRecentListOfEmployees$),
map(([filterCriteria, list]) => {
// this is pseudocode, not sure about the exact lodash syntax for filtering ...
return _.filter(list, filterCriteria);
})
)
You would rely on Rxjs to refilter the list every time the filter criteria is updated, and when a new set of employees comes in via the api.
Lodash would be used to do the actual filtering on the array.
Your GUI would subscribe to the filteredEmployees$ observable.
If this approach seems unfamiliar, this is whats called Reactive Programming: https://en.wikipedia.org/wiki/Reactive_programming
Lodash is a utility library that uses simple javascript types (arrays, objects, strings, numbers, etc ) as source for their utils, meaning is good for dealing with usual operations over this types of data (filter an array, split a string, etc).
RxJS is similar, but the the source of their operations is another one. It's meant to deal with a different problem. RxJS could be understood like lodash for streams of data or events (asynchronous data over time). I highlight time because that's the extra dimension of the problems you'd want to tackle with RxJS.
It uses a specific data structure and pattern as a source for all their operations, the observable:
Observable: represents the idea of an invokable collection of future values or events.
I'll try to explain an observable as simple as possible. Any javascript promise is an observable, the difference with an RxJS observable is that the promise only resolves once, the RxJS observable, however, stays 'open' and keeps calling the 'success' callback of the promise as it generates/capture values/events, so instead of calling a .then
you call a .subscribe
.
I'll give you an example. Imagine you're developing a game in which the speed of your character is determined by how many times you click per second on the page.
Rx
.fromEvent(document, 'click') // creates the observable from the click event
.pipe( // says to the library to perform the following operations
Rx.bufferTime(2000), // this operator groups the click events made in two seconds
Rx.map((group) => group.length) // this one just transforms that group to a number (the length of the group)
).subscribe((result) => console.log(result)) // here we get the final result
See that you have Rx.map
, and lodash has a map
too. This is the confusing part I guess for the beginners. Some operators/utils have the same names, and seem to perform the same, the only difference is one does it having a complete set of data, and the other deals with data over time. I don't know if they have some utilities completely equal, it can be, but the whole library of RxJs will have a lot more stuff for dealing with streams. I know lodash has a debounce and I think throttle, but I think that's all.
They are both completely different things. RxJS Uses the concept of reactive programming. Using the Observable and observer pattern you are able to create streams of data (A Pipeline in between) where you are able to use RxJS's operators to do work on the data. These operators do one thing that Lodash does not which is very specific to RxJS. The operators return observables allowing you to properly chain other RxJS Observable operators to the result of the first.
I have not used lodash very much but i'm assuming it does not return an observable as it is made specifically to work with arrays. I have used it a bit and it works great to add functionality to modifying arrays but I am assuming it would not help the data stream/pipeline operations which RxJS uses.
Observable
s for almost anything (Promise
s, synchronous iteration). Sounds like a hype to me... – user10675354 Commented Dec 30, 2018 at 20:28