From 82aeb5521707537304d2f09bbffc82eb0b28cfbb Mon Sep 17 00:00:00 2001 From: danielcaldas Date: Fri, 11 Oct 2024 23:18:38 +0200 Subject: [PATCH] feat(posts): port more content --- src/content/posts/how-to-svelte-rxjs.md | 46 +++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/content/posts/how-to-svelte-rxjs.md 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([]) +); +
+ {#each $gotCharacters as c} +
  • +
      +
    • + Name: {c.name}, Played by: {c.playedBy} +
      • +
    +
    • + {/each} +
    +``` + +See how `$gotCharacters` **within the Svelte template language auto subscribed to what originally is an RxJS stream? We’re directly streaming data to the UI with no boilerplate in between whatsoever to pull values out of the stream of us!** In this small example, we see how we can have an RxJS flavored implementation within a Svelte component, leveraging the full power of RxJS operators to create and manipulate data streams. + +We can say Svelte is the _“new cool kid in the block”_. It has enlarged its community over the years. Svelte 3 comes with reactivity at its core, making it suitable to plugin RxJS into Svelte applications. + +> “As usual, React and Vue lead the pack, but Svelte is quickly establishing itself as a very serious contender for the front-end crown.“, State of JS 2020: Front-end Frameworks + +RxJS is known to be the go to library when it comes to programming with streams. Reactive programming is famous for making complex things easier by offering an extensive API of operators that give developers extreme power and flexibility when writing complex event-driven user interfaces.