diff --git a/src/content/posts/how-to-svelte-rxjs.md b/src/content/posts/how-to-svelte-rxjs.md new file mode 100644 index 0000000..ed1b1ea --- /dev/null +++ b/src/content/posts/how-to-svelte-rxjs.md @@ -0,0 +1,46 @@ +--- +title: How to use RxJS with Svelte +description: How to use RxJS with Svelte +pubDate: 2021-07-05 +tags: ['javascript', 'svelte', 'reactiveprogramming'] +--- + +Svelte is an increasingly famous JavaScript framework; the community appears to be reacting positively to the developer experience offered by Svelte. RxJS has increasingly become a standard for Reactive Programming mainly due to Angular’s endorsement that builds its core functionalities around Observables, and the framework naturally interfaces with RxJS. + +Svelte has a reactive nature that makes it extremely suitable to integrate with RxJS. Why would anybody put the effort? **Well, simply put, you can leverage the whole RxJS ecosystem and APIs to manipulate data streams that would perfectly plug into Svelte**. Let’s look at a small example where we regularly pull data from a set of characters in a public Game of Thrones API. + +```javascript +const CHARACTERS_IDS = [583, 582, 581]; +let gotCharacters = of([]); +const ajaxCharacters = () => + CHARACTERS_IDS.map((cid) => + ajax({ + method: 'get', + url: `https://anapioficeandfire.com/api/characters/${cid}`, + }) + ); +gotCharacters = interval(5000).pipe( + tap(() => console.log('fetching characters...')), + switchMap(() => combineLatest(...ajaxCharacters(CHARACTERS_IDS))), + startWith([]) +); +