W dzisiejszym artykule przybli\u017c\u0119 temat Reactive Extensions \u2013 skutecznego narz\u0119dzia do rozwi\u0105zywania okre\u015blonych klas problem\u00f3w, cho\u0107 niekoniecznie wszystkim dobrze znanego.<\/p>\n\n\n\n
Autorzy opisuj\u0105 Reactive Extensions (lub ReactiveX, Rx) jako API do programowania asynchronicznego z u\u017cyciem obserwowalnych strumieni (Observable streams). Jest ono dost\u0119pne dla kilku r\u00f3\u017cnych j\u0119zyk\u00f3w programowania m.in.:<\/p>\n\n\n\n
W Angular wykorzystywana jest implementacja RxJS. Jak sama nazwa wskazuje, jest to wersja dla JavaScript.<\/p>\n\n\n\n
O ile programowanie reaktywne (reactive programming), mo\u017ce by\u0107 bardziej znane, to dla kogo\u015b, kto zetkn\u0105\u0142 si\u0119 z Rx po raz pierwszy, \u2018observable streams\u2019 mo\u017ce brzmie\u0107 do\u015b\u0107 tajemniczo.<\/p>\n\n\n\n
W\u0142a\u015bciwo\u015bci Rx sprawiaj\u0105, \u017ce s\u0105 one bardzo skuteczne do rozwi\u0105zywania okre\u015blonych klas problem\u00f3w. Jednak, zaczynaj\u0105c od pocz\u0105tku, programowanie reaktywne polega na asynchronicznym, nieblokuj\u0105cym przetwarzaniu danych i reagowaniu na zmiany w tych danych. <\/strong><\/p>\n\n\n\n Gdy tylko pojawi\u0105 si\u0119 zmiany w strumieniu danych, aplikacja reaguje na te zmiany, co jest bardzo pomocne w dynamicznie zmieniaj\u0105cych si\u0119 interfejsach i aplikacjach.<\/p>\n\n\n\n Strumienie w programowaniu to ci\u0105g danych przychodz\u0105cych w czasie o nieokre\u015blonej d\u0142ugo\u015bci. Strumie\u0144 mo\u017ce by\u0107 sko\u0144czony np. \u017c\u0105danie AJAX zwracaj\u0105ce jeden element lub niesko\u0144czony np. aktualna pozycja kursora.<\/p>\n\n\n\n Observable stream to po prostu strumie\u0144 danych ze specjalnymi w\u0142asno\u015bciami. Poza zwyk\u0142ymi elementami \u2013 danymi, kt\u00f3re mog\u0105 by\u0107 typem prymitywnym albo z\u0142o\u017conym obiektem. Observable stream mo\u017ce wysy\u0142a\u0107 dwa dodatkowe typy danych:<\/p>\n\n\n\n Taki strumie\u0144 mo\u017cna obserwowa\u0107 (subskrybowa\u0107), aby odebra\u0107 zwr\u00f3cone elementy w celu dalszego przetworzenia (wzorzec obserwatora).<\/p>\n\n\n\n Reactive Extensions to po\u0142\u0105czenie zalet m.in. wzorc\u00f3w obserwatora, iteratora i programowania funkcyjnego.<\/p>\n\n\n\n Observable streams s\u0105 jak funkcje w programowaniu funkcyjnym. Mog\u0105 by\u0107 argumentami dla innych strumieni (high order streams), mog\u0105 by\u0107 \u0142\u0105czone, a na elementach mog\u0105 by\u0107 przeprowadzane r\u00f3\u017cne operacje np. filtrowanie lub mapowanie. Zestaw wbudowanych operator\u00f3w jest spory, co niew\u0105tpliwie jest mocn\u0105 stron\u0105 Rx.<\/p>\n\n\n\n Rozwi\u0105zania zastosowane w Rx s\u0105 szczeg\u00f3lnie przydatne przy wielu \u017ar\u00f3d\u0142ach zdarze\u0144 i skomplikowanej logice mi\u0119dzy nimi. Implementacja obs\u0142ugi takiego strumienia jest taka sama \u2013 niezale\u017cnie, czy strumie\u0144 b\u0119dzie sk\u0142ada\u0142 si\u0119 z jednego, kilku, czy niesko\u0144czenie wielu element\u00f3w. Elementy strumienia mog\u0105 by\u0107 przetwarzane podobnie jak sko\u0144czone kolekcje np. tablice.<\/p>\n\n\n\n W Angular Observable streams s\u0105 u\u017cywane do wielu asynchronicznych operacji:<\/p>\n\n\n\n W przeciwie\u0144stwie do Promis\u00f3w Observable streams maj\u0105 nast\u0119puj\u0105ce cechy (zalety):<\/p>\n\n\n\n Z tego wzgl\u0119du w Angular 2 zastosowano Observable streams w module Http zamiast wcze\u015bniej stosowanych Promis\u00f3w.<\/p>\n\n\n\n Przejd\u017amy do przyk\u0142adu. Dla uproszczenia nie skorzystam z formularzy w Angular.<\/p>\n\n\n\n 1. Punktem wyj\u015bciowym b\u0119dzie komponent, w kt\u00f3rym Rx jest u\u017cywany jedynie wewn\u0119trznie przez HttpClient. Nale\u017cy pami\u0119ta\u0107, \u017ce ka\u017cd\u0105 zdefiniowan\u0105 przez nas subskrypcj\u0119 Observable stream nale\u017cy zako\u0144czy\u0107 przy niszczeniu komponentu, aby unikn\u0105\u0107 wycieku pami\u0119ci. Nie dotyczy to strumieni z HttpClient, poniewa\u017c po otrzymaniu elementu lub b\u0142\u0119du wysy\u0142any jest znak ko\u0144ca strumienia.<\/p>\n\n\n\n Komponent jest napisany w stylu imperatywnym. Ci\u0105g instrukcji zosta\u0142 krok po kroku zdefiniowany przez programist\u0119. Po zasubskrybowaniu otrzymane dane przypisujemy do zmiennej, a potem je przekszta\u0142camy.<\/p>\n\n\n\n Tutaj mo\u017cesz zobaczy\u0107, jak wygl\u0105da\u0142o moje pierwsze podej\u015bcie do Angulara, gdy nie wiedzia\u0142em nic o Rx<\/a>.<\/p>\n\n\n\n 2. Kolejne kroki b\u0119d\u0105 przej\u015bciem od programowania imperatywnego do programowania deklaratywnego. W tym kroku zmieniamy podej\u015bcia do definiowania danych potrzebnych do wy\u015bwietlenia w template<\/a>. Zamiast modyfikowa\u0107 dane otrzymane z zapytania http, definiujemy Observable stream, kt\u00f3ry wykorzystuje strumie\u0144 bazowy oraz modyfikuje przychodz\u0105ce dane. W ten spos\u00f3b nie zarz\u0105dzamy ci\u0105giem instrukcji, kt\u00f3rym maj\u0105 by\u0107 poddane przychodz\u0105ce dane, a definiujemy kszta\u0142t (typ) danych, kt\u00f3re chcemy otrzyma\u0107.<\/p>\n\n\n\n 3. Zdefiniowane strumienie przypisujemy do zmiennych<\/a>. Powszechn\u0105 praktyk\u0105 jest dodawanie znaku $ na ko\u0144cu nazwy zmiennej w celu oznaczenia, \u017ce jest to Observable stream.<\/p>\n\n\n\n 4. Kolejnym krokiem b\u0119dzie separacja logiki odpowiedzialnej za pobieranie danych do serwisu<\/a>.<\/p>\n\n\n\n 5. Usuwamy zmienne z danymi i zostawiamy tylko zdefiniowane wcze\u015bniej Observable streams. Nie subskrybujemy strumieni w komponencie. U\u017cywamy strumieni w template u\u017cywaj\u0105c \u2018async\u2019 pipe. Dzi\u0119ki temu subskrypcj\u0105 i jej zako\u0144czeniem zarz\u0105dza za nas Angular<\/a>.<\/p>\n\n\n\n 6. Cieszymy si\u0119 czytelnym i \u0142atwym w utrzymaniu kodem. Przyk\u0142ad nie jest skomplikowany. W miar\u0119 rosn\u0105cego skomplikowania zale\u017cno\u015bci pomi\u0119dzy danymi, elementami interfejsu i akcjami u\u017cytkownika, korzy\u015bci p\u0142yn\u0105ce z u\u017cywania Rx s\u0105 coraz bardziej widoczne.<\/p>\n\n\n\n Koncepcja reactive programming oraz implementacja Reactive Extensions nie jest \u015bci\u015ble zwi\u0105zana z Angular ani \u017cadnym konkretnym j\u0119zykiem programowania. Jest to rozwi\u0105zanie pewnej klasy problem\u00f3w, kt\u00f3re pojawiaj\u0105 si\u0119 zar\u00f3wno w aplikacjach frontendowych jak i backendowych, niezale\u017cnie od stosowanej technologii. Z powodzeniem mo\u017cna u\u017cywa\u0107 RxJS z VanillaJS.<\/p>\n\n\n\nObservable streams<\/h2>\n\n\n\n
\n
Dlaczego warto korzysta\u0107 z Reactive Extensions?<\/h2>\n\n\n\n
\n
RxJS vs Promises<\/h2>\n\n\n\n
\n
W jaki spos\u00f3b to dzia\u0142a?<\/h2>\n\n\n\n
Podsumowanie<\/h2>\n\n\n\n
Wi\u0119cej o Reactive Extensions dowiesz si\u0119 z:<\/h3>\n\n\n\n