question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`observableOf` and `observableFrom` instead of `of` and `from`

See original GitHub issue

Issues

  • People have strong feelings
  • IDEs like to color of in error
  • People that aren’t used to RxJS don’t know what of(1, 2, 3) means

Proposal

Rename of and from to observableOf and observableFrom.

Pros

  • It’s less ambiguous and more explicit what code is doing
  • IDEs are happier about it
  • can make the change gradually without breaking everyone with an alias and a deprecation

Cons

  • It’s WAY more verbose and makes code a bit more annoying to read.
  • It’s another change to the library.
  • Most people using RxJS a lot in their apps know what of and from mean

Other thoughts

  • People can already to this with import aliases. `import { of as observableOf } from ‘rxjs’; and the five extra characters there probably isn’t going to kill them.
  • It might actually encourage the use of Arrays as return values (which is totally fine) inside of mergeMap et al: source$.pipe(mergeMap(() => of(1, 2, 3))) is the same as source$.pipe(mergeMap(() => [1, 2, 3])). The readability of this versus of is debatable.
  • observableFrom is probably the more annoying of the two changes, as it would be used more often to convert a promise ahead of other operators inside of flattening operators.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:25
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

8reactions
alex-okrushkocommented, May 9, 2018

@Airblader to take the guessing out of the equation here are the results:

import { Component, Input } from '@angular/core';
import * as observable from 'rxjs';
import {take} from 'rxjs/operators';

@Component({
  selector: 'hello',
  template: `<h1>Inteval at {{interval | async}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  interval = observable.interval(1000).pipe(take(10));
}

Before I added the take operator and interval here how it looked after ng build --prod --build-optimizer --source-map --eval-source-map

screen shot 2018-05-09 at 12 28 39 pm

There are some operators, but those are using by Angular itself.

Here is after I added interval to the above mentioned Component:

interval

As you can see even though import * as observable from 'rxjs'; was used only interval appeared in the optimized code.

I think this should resolve it.

6reactions
ajcritescommented, May 26, 2018

I am personally in favor of not removing operators (unless there is a collision), so I wouldn’t want the rename. Doing import * as rx or import { of as rxOf } and the like are simple and acceptable alternatives that will keep the existing library more backwards compatible.

Read more comments on GitHub >

github_iconTop Results From Across the Web

rxjs - 'of' vs 'from' operator - Stack Overflow
When passing an array to Observable.from , the only difference between it and Observable.of is the way the arguments are passed. However, Observable.from ......
Read more >
of - Learn RxJS
Emit variable amount of values in a sequence and then emits a complete notification. Examples. Example 1: Emitting a sequence of numbers.
Read more >
From operator - ReactiveX
When you work with Observables, it can be more convenient if all of the data you mean to work with can be represented...
Read more >
The Extensive Guide to Creating Streams in RxJS - Medium
import 'rxjs/add/observable/from';Observable.of(...); ... If we pass a jQuery object instead of document, then RxJS knows that it has to call on instead.
Read more >
Using observables to pass values - Angular
This might be the case with something like an observable of clicks on the ... but instead re-use the first listener and send...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found