|
| 1 | +# What's New in RxJS 6 |
| 2 | + |
| 3 | +## Pipes |
| 4 | + |
| 5 | +* Change introduced in RxJS 5.5 |
| 6 | +* Recommended syntax |
| 7 | +* Patching vs. imported functions: |
| 8 | + * Patched `Observable` in 5.4; note side effects |
| 9 | + * Set breakpoint in new version ([RxJS 5.5](rxjs-5-5/src/app.ts)) and show cleaner `Observable` |
| 10 | + * Note: Renamings were necessary (e.g. `do` became `tap`) |
| 11 | + |
| 12 | +### Demo |
| 13 | + |
| 14 | +* View old syntax in [RxJS 5.4](rxjs-5-4/src/app.ts) |
| 15 | +* View new syntax in [RxJS 5.5](rxjs-5-5/src/app.ts) |
| 16 | +* Patching vs. imported functions: |
| 17 | + * Set breakpoint in old version ([RxJS 5.4](rxjs-5-4/src/app.ts)) and show patched `Observable`; note side effects |
| 18 | + * Set breakpoint in new version ([RxJS 5.5](rxjs-5-5/src/app.ts)) and show cleaner `Observable` |
| 19 | +* Walkthrough [pipeable operators](https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md) ([RxJS 5.5](rxjs-5-5/src/app.ts)) |
| 20 | + |
| 21 | +## Imports |
| 22 | + |
| 23 | +* Much clearer syntax in RxJS 6 |
| 24 | +* Easier to learn, easier to remember |
| 25 | + |
| 26 | +### Demo |
| 27 | + |
| 28 | +* View old syntax in [RxJS 5.4](rxjs-5-4/src/app.ts) |
| 29 | +* View new syntax in [RxJS 5.5](rxjs-5-5/src/app.ts) |
| 30 | + |
| 31 | +## *rxjs-compat* |
| 32 | + |
| 33 | +* Installing [*rxjs-compat*](https://www.npmjs.com/package/rxjs-compat) makes RxJS 6 compatible to 5.4 |
| 34 | +* Intermediate step for large projects |
| 35 | + |
| 36 | +### Demo in [RxJS 5.4](rxjs-5-4/src/app.ts) |
| 37 | + |
| 38 | +```bash |
| 39 | +npm uninstall rxjs |
| 40 | +npm install rxjs |
| 41 | +npm run build |
| 42 | +npm install rxjs-compat |
| 43 | +npm run build |
| 44 | +npm start |
| 45 | +``` |
| 46 | + |
| 47 | +## Migrate from RxJS 5 to 6 with [*rxjs-tslint*](https://github.com/ReactiveX/rxjs-tslint) |
| 48 | + |
| 49 | +*tslint* rule rewriting your code for RxJS 6 |
| 50 | + |
| 51 | +### Demo in [RxJS 5.4](rxjs-5-4/src/app.ts) |
| 52 | + |
| 53 | +Note: Open [*app.ts*](rxjs-5-4/src/app.ts) while running migration |
| 54 | + |
| 55 | +```bash |
| 56 | +rxjs-5-to-6-migrate -p tsconfig.json |
| 57 | +npm uninstall rxjs |
| 58 | +npm install rxjs |
| 59 | +npm run build |
| 60 | +npm start |
| 61 | +``` |
| 62 | + |
| 63 | +## Synchronous Error Handling |
| 64 | + |
| 65 | +`try/catch` can no longer catch synchronously thrown errors. You need to specify e.g. an error callback. |
| 66 | + |
| 67 | +### Demo |
| 68 | + |
| 69 | +* Show thrown error in [RxJS 5.5](rxjs-5-5/src/app.ts) |
| 70 | +* Show thrown error in [RxJS 6](rxjs-6/src/app.ts) |
| 71 | + |
| 72 | +## Further Readings |
| 73 | + |
| 74 | +* Video: [*Introducing RxJS6!* by Ben Lesh](https://youtu.be/JCXZhe6KsxQ) |
| 75 | +* [RxJS Change Log](https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md) |
| 76 | +* Blog: [*RxJS 6: What's new and what has changed?* by Auth0](https://auth0.com/blog/whats-new-in-rxjs-6/) |
| 77 | +* Docs: [RxJS v5.x to v6 Update Guide](https://rxjs-dev.firebaseapp.com/guide/v6/migration) |
0 commit comments