Przejdź do:

1. 1. SCSS vs CSS – podstawy 
2. 2. Instalacja Webpacka 
3. 3. Instalowanie Gulpa 
4. 4. Konfiguracja Webpacka 
5. 5. Konfiguracja Gulpa 
6. 6. Obsługa narzędzi Gulp vs Webpack – porównanie 
7. 7. Które narzędzie wybrać: Gulp czy Webpack?
8. 8. Gulp vs Webpack – podsumowanie  

Webpack vs Gulp… Oba te narzędzia odgrywają ważną rolę w świecie programistycznym. Wybór między nimi często na pierwszy rzut oka wydaje się trudny. Zwłaszcza na początku przygody z programowaniem. Jednak jeśli poznamy ich różnice i podobieństwa, z pewnością będzie łatwiej podjąć właściwą decyzję.

Bez względu na to, czy rozważasz użycie Gulpa (task runner), Webpacka (module bundler), czy może kombinacji obu, znajomość ich funkcjonalności z pewnością ułatwi ci pracę i zwiększy produktywność. Jeśli zatem szukasz odpowiednich narzędzi do swojego projektu, koniecznie przeczytaj ten artykuł.

SCSS vs CSS – podstawy  

Zanim porównam narzędzia Webpack i Gulp, przypomnijmy sobie, czym są technologie CSS i SCSS. Są one niezbędne w programowaniu na front-endzie.

CSS i SCSS to technologie, których na co dzień używamy do przypisywania konkretnych wyglądów do elementów (kolor, rozmiar) i rozmieszczania tych elementów na stronie. Ważne jest jednak, aby przed podjęciem decyzji o skorzystaniu z wybranej z nich wziąć pod uwagę pewne różnice.

 CSS to standardowy język arkuszy stylów, mający ugruntowaną pozycję w świecie front-endowym. W porównaniu z SCSS jego składnia wydaje się prostsza i o wiele bardziej intuicyjna. Młodsi programiści zdecydowanie stawiają na CSS, szczególnie na wczesnym etapie nauki. Reguły CSS mają na celu zdefiniowanie stylów dla określonych elementów, takich jak paragrafy, divy czy inne elementy HTML.

/* Składnia CSS */  

h1 { color: blue; font-size: 24px; } 

SCSS jest niczym innym jak preprocesorem CSS, to znaczy rozszerza składnię o dodatkowe funkcje i pozwala na wykorzystanie zaawansowanych technik, w tym takich jak: 

• reguły zagnieżdżania – selektory CSS można zagnieżdżać w innych, odzwierciedlając strukturę selektorów HTML. 
• użycie zmiennych (które umożliwiają przechowywanie wartości wielokrotnego użytku w arkuszu stylów), 
• operatory matematyczne (pozwalające na dodawanie, odejmowanie, mnożenie i dzielenie wartości w stylach), dzięki czemu jest łatwiej pisać kod i staje się on bardziej modułowy i po prostu elegancki. 

/* Składnia SCSS z zagnieżdżaniem i zmiennymi */ 

$primary-color: blue; 

  

h1 {  

  kolor: $primary-color; 

  font-size: 24px; 

} 

Kluczowe różnice między SCSS i CSS:  

1. Składnia: SCSS oferuje bardziej rozszerzoną składnię, co ułatwia pisanie i utrzymanie kodu. Reguły zagnieżdżania pozwalają pisać bardziej czytelny i logiczny kod.  
2. Zmienne: SCSS umożliwia definiowanie zmiennych, ułatwiając zmienianie wartości stylu w jednym miejscu i tym samym przyczyniając się do spójności w całym projekcie. 
3. Preprocesor: SCSS jest jednym z wielu preprocesorów CSS (to znaczy, że kod SCSS musi zostać skompilowany do zwykłego CSS przed wdrożeniem na stronie internetowej).  

Wybór między SCSS i CSS zależy od tego, na ile złożony jest projekt i jakie są umiejętności zespołu projektowego. W przypadku niezłożonych projektów, które nie wymagają zaawansowanych technik ostylowania, CSS może okazać się odpowiednim wyborem. Jednak w przypadku bardziej złożonych projektów, które wymagają modułowości i łatwego edytowania, SCSS pozwoli na większą elastyczność i wygodę w zarządzaniu stylami.  

Przeczytaj także: 

• Marble testing. Testowanie RxJS  
• Jeśli nie Redux, to co? Zarządzanie stanem aplikacji w React 
   

Instalacja Webpacka  

Funkcje Webpacka pozwalają przede wszystkim na zarządzanie zależnościami i porządkowanie plików. Instalacja narzędzia to naprawdę “bułka z masłem”. Zaczynamy od sprawdzenia, czy jest już zainstalowany Node Package Manager (NPM), który moim zdaniem umożliwia najskuteczniejszą i najszybszą instalację Webpacka. Następnie otwieramy wiersz poleceń i wpisujemy:  

npm install webpack –g 

Z wiersza poleceń przechodzimy do katalogu z naszym projektem i wpisujemy polecenie:  

npm init 

Możemy tu zauważyć, że w katalogu docelowym został utworzony plik package.json. Nie pozostaje nic innego, jak tylko zainstalować Webpacka w naszym projekcie:  

npm install --save-dev webpack 

A teraz już możemy cieszyć się ogromnymi możliwościami narzędzia!  

W dalszych krokach konfiguracja zależy od potrzeb konkretnego projektu – w punktach poniżej opiszę przykładową, krótką konfigurację. Szczegółowe wytyczne dotyczące możliwości Webpacka można znaleźć w oficjalnej dokumentacji na stronie: Webpack Documentation.  

Instalowanie Gulpa  

Gulp stosuje się do automatyzacji niektórych zadań, takich jak kompilacja, minifikacja plików, obrazów lub odświeżanie przeglądarki. Instalacja Gulpa jest tak samo łatwa jak w przypadku Webpacka. Upewniamy się, że mamy zainstalowany NPM. I zaczynamy od polecenia:  

npm install -g gulp 

Przechodzimy do naszego katalogu projektów, potem tworzymy plik package.json za pomocą polecenia:  

npm init 

Wystarczy teraz dodać Gulpa do naszego projektu:  

npm install ---save-dev gulp  

Jak skonfigurować Webpacka? Po instalacji możemy przystąpić do tworzenia pliku gulpfile.js. Będzie on odpowiadał za konfigurację zadań dla naszego narzędzia. W dalszej części przedstawię również krótką konfigurację dla Gulpa.  

Aby poznać wszystkie możliwości Gulpa, skorzystaj z dostępnej dokumentacji. 

Konfiguracja Webpacka   

Jak wspomniałem wcześniej, przedstawię krótką konfigurację Webpacka. Narzędzie jest na tyle zaawansowane, że nie da rady opisać tu wszystkich jego możliwości.  

Zacznijmy od dodania pliku webpack.config.js, który zawiera całą konfigurację Webpacka.  

Następnie umieśćmy tam podstawową konfigurację:  

module.exports = { 

  entry: './src/main.js', 

  output: { 

    path: __dirname + '/dist',  

    filename: 'bundle.js'  

  },  

  mode: 'production' 

};

Zdefiniowaliśmy, skąd Webpack ma pobierać pliki źródłowe (entry). Output określa, gdzie powinny być umieszczone po przetworzeniu. Opcja mode określa, czy chcemy zoptymalizować kod, na przykład pod kątem produkcji. Webpack zapewnia szeroki pakiet wtyczek i loaderów, co pozwala dostosować go do naszych potrzeb.  

Konfiguracja Gulpa   

Gulp to narzędzie do automatyzacji zadań, które możemy odpowiednio dostosować w pliku gulpfile.js. W czasie konfiguracji definiujemy takie zadania, jak: minifikacja kodu, kompilacja czy odświeżanie przeglądarki po każdej zmianie w kodzie.  

const gulp = require('gulp'); 

const uglify = require('gulp-uglify'); 


gulp.task('compress', function() {  

  return gulp.src('src/js/*.js') 

    .pipe(uglify()) 

    .pipe(gulp.dest('dist/js')); 

});

To przykładowa konfiguracja mająca za zadanie skompresowanie plików JavaScript.  

Zaczynamy od stworzenia nowego zadania o nazwie „Compress”. Następnie, za pomocą returngulp.src (’src/js/*.js’), określamy pliki źródłowe do przetworzenia (w naszym przypadku będą to wszystkie pliki z rozszerzeniem .js, z katalogu src/js). 

Kolejny krok to przekazanie plików źródłowych do wtyczki za pomocą pipe(uglify()), który kompresuje kod, usuwając np. zbędne spacje, komentarze, tak aby plik był możliwie jak najmniejszy. 

Na koniec wskazujemy katalog do zapisywania przetworzonych plików.  

Obsługa narzędzi Gulp vs Webpack – porównanie  

Jeśli miałbym porównać Webpack i Gulp, trudno wskazać jeden słuszny wybór – wszystko zależy od projektu, w którym pracujemy. 

Webpack to w głównej mierze pakiet do kompilacji zasobów projektu, tak aby zyskać przejrzystość. Dzięki wtyczkom można łatwo go rozszerzyć i zyskać wachlarz zastosowań, takich jak:  

• Transpilacja – w przypadku JavaScript np. dostosowanie wersji ES6 do starszych przeglądarek 
• Minifikacja kodu (usuwanie niepotrzebnych znaków z kodu, aby zmniejszyć rozmiar, a tym samym poprawić czas ładowania) 
• Zarządzanie zależnościami 

Sprawdź, jakie wtyczki są dostępne dla Gulpa: Korzystanie z wtyczki   

Gulp to jednak także narzędzie do automatyzacji zadań, które bardzo usprawnia przepływ pracy. Moim zdaniem bardzo łatwo nauczyć się korzystać z tego narzędzia. Całkiem szybko możemy zacząć tworzyć zadania dla kompilacji plików SASS lub automatycznego odświeżania przeglądarki. Konfiguracja jest o wiele bardziej czytelna i elastyczna.  

Webpack doskonale radzi sobie z zależnościami, natomiast Gulp wyróżnia się na tle innych narzędzi, jeśli chodzi o pełną automatyzację pracy (jeśli na tym ci właśnie zależy).  

W skrócie:  

• Webpack pozwala na łączenie modułów. Ale też, tak jak Gulp, umożliwia uruchamianie wielu funkcji dotyczących zadań 

• Gulp to narzędzie do automatyzowania zadań, które usprawnia przepływ pracy 

Które narzędzie wybrać: Gulp czy Webpack?   

Wybór pomiędzy nimi zależy od konkretnych potrzeb i architektury naszego projektu. To też kwestia prywatnych preferencji i doświadczenia. Jeśli łączenie i zarządzanie zależnościami są złożone i będą istotne w procesie rozwoju oprogramowania, Webpack może okazać się właściwym rozwiązaniem. Z drugiej strony, jeśli potrzebujmy prostego i czytelnego sposobu na automatyzację typowych zadań programistycznych, Gulp będzie do tego doskonały.  

Pamiętaj, że nic nie stoi na przeszkodzie, aby oba narzędzia połączyć. Korzystanie z Gulpa i Webpacka jednocześnie oznacza dostęp do zalet każdego z nich. Wpłynie to pozytywnie nie tylko jakość projektu, ale też pozwoli skrócić czas potrzebny na rozwój oprogramowania.    

Użycie Webpacka zamiast Gulpa 

W połączeniu ze skryptami NPM Webpack może z powodzeniem zastąpić Gulpa. Z mojego doświadczenia wynika jednak, że lepiej łączyć narzędzia, niż ograniczać się tylko do jednego, do czego was zachęcam. Jak już wspomniałem, Webpack i Gulp to narzędzia do budowania (build tools), które można wykorzystywać do podobnych zadań. Cechują się jednak różnymi podejściami i każde z nich ma inne mocne strony.  

Koniec końców wybór między korzystaniem z samego Webpacka lub połączeniem go z Gulpem będzie zależeć od twojego projektu i twoich własnych preferencji programistycznych.  

Gulp vs Webpack – podsumowanie   

Mam nadzieję, że udało mi się przemycić w artykule korzyści płynące z używania Webpacka i Gulpa. Co do pytania „Webpack czy Gulp?”, tu nie ma idealnej odpowiedzi, zwłaszcza jeśli jesteś początkującym front-end developerem. Ten artykuł to tak naprawdę wprowadzenie do tych narzędzi – na każdym etapie warto wspierać się dokumentacją, wiedzą doświadczonych kolegów z projektu, a także Technical Leaderów.   

Dokonując wyboru, najlepiej skupić się na swoich umiejętnościach, doświadczeniu i potrzebach projektowych. Nie ma uniwersalnego rozwiązania. Często ekosystem jest narzucany odgórnie. Warto więc eksperymentować z obiema technologiami, łączyć je, testować i tworzyć zoptymalizowane, wydajne środowisko.  

PRZEJDŹ DO:

1. 1. RxJS observables
2. 2. Czym jest testowanie RxJS (marble testing w RxJS)?
3. 3. Jak pisać przypadki testowe RxJS?
4. 4. Czym jest marble diagram w RxJS?
5. 5. Jakie są rodzaje testów marble w RxJS?
6. 6. Jakie są korzyści z testowania RxJS?
7. 7. FAQ

RxJS observables

RxJS to biblioteka do tworzenia asynchronicznych strumieni danych, zarządzania nimi oraz obsługiwania zdarzeń w aplikacjach JavaScript. Kluczowym elementem RxJS są observable, które reprezentują strumienie danych emitowane w czasie.

Observable opierają się na wzorcu projektowym Obserwator, w którym obserwator „subskrybuje” obserwowany obiekt i oczekuje na emitowane przez niego dane. RxJS oferuje różnorodne operatory, takie jak map, filter czy merge, które pozwalają na przekształcanie, filtrowanie i łączenie strumieni danych.

Szerzej koncepcja biblioteki RxJS została opisana w artykule Programowanie reaktywne z JavaScript w RxJS.

Czym jest testowanie RxJS (marble testing w RxJS)?

RxJS umożliwia reaktywne programowanie w JavaScript, dzięki czemu można obsługiwać asynchroniczne strumienie danych oraz manipulować nimi za pomocą różnych operacji, takich jak mapowanie, filtrowanie czy łączenie. Testowanie RxJS ma na celu zapewnienie, że kod działający na tych strumieniach jest poprawny, wolny od błędów i spełnia oczekiwania. 

Marble testing 

W kontekście testowania RxJS warto wspomnieć o marble testing, które jest jednym z popularnych narzędzi do testowania strumieni danych w tej bibliotece. Marble testing to nic innego jak wizualizacja strumieni danych za pomocą tzw. marble diagrams. W marble strumienie danych reprezentowane są jako ciągi znaków, gdzie każdy znak symbolizuje wartość w strumieniu lub specjalne zdarzenie, takie jak zakończenie strumienia czy wystąpienie błędu. Testowanie z użyciem diagramów marble pozwala na definiowanie oczekiwanych wyników oraz porównywanie ich z rzeczywistymi wynikami testowania, co jest szczególnie przydatne w przypadku złożonych operacji asynchronicznych. 

Rodzaje testów

Testowanie RxJS, zwłaszcza z wykorzystaniem diagramów marble, pozwala na weryfikację poprawności działania funkcji i operatorów reaktywnych w kontekście testów jednostkowych. Testy jednostkowe koncentrują się na ocenie pojedynczych funkcji, operatorów oraz strumieni danych. Ich celem jest izolowanie poszczególnych elementów kodu i sprawdzenie, czy zachowują się zgodnie z oczekiwaniami.

Przeczytaj także: Narzędzia automatyzacji testów czy dobre praktyki? Jak przyspieszyć testowanie?

Narzędzia testowania RxJS 

W celu ułatwienia testowania z użyciem diagramów marble biblioteka RxJS udostępnia takie narzędzia jak TestScheduler, który pozwala na kontrolowanie czasu w wirtualny sposób – bez wpływu na rzeczywisty czas wykonywania testów. TestScheduler umożliwia definiowanie wartości wejściowych i oczekiwanych wartości wyjściowych za pomocą marble diagrams, a następnie symuluje przepływ danych w strumieniach reaktywnych. 

Jak pisać przypadki testowe RxJS?  

Pisanie przypadków testowych RxJS wymaga starannego planowania, zrozumienia kodu źródłowego oraz wykorzystania odpowiednich narzędzi do testowania. Marble testing to jedno z podejść, które pomaga w tworzeniu przejrzystych testów dla strumieni danych. Oto kilka wskazówek, jak napisać testy dla kodu opartego na bibliotece RxJS: 

1. Zapoznaj się z kodem źródłowym 

Przed przystąpieniem do pisania przypadków testowych dokładnie zapoznaj się z kodem źródłowym, który będzie testowany. Zrozumienie struktury kodu oraz celu poszczególnych funkcji i operatorów pozwoli na opracowanie skutecznych i kompleksowych testów. 

2. Wybierz odpowiedni framework do testowania 

Wybierz framework do testowania kodu JavaScript, taki jak Jasmine, Mocha czy Jest, który najlepiej odpowiada twoim potrzebom i preferencjom. Upewnij się, że wybrany framework współpracuje z RxJS i pozwala na wykorzystanie marble testing, jeśli planujesz korzystać z tego podejścia. 

3. Utwórz strukturę testów 

Testy jednostkowe zwykle są organizowane w blokach describe (lub podobnych, w zależności od używanego frameworka), które służą do grupowania testów dotyczących określonej funkcji, operatora lub komponentu. Wewnątrz bloków describe umieszczamy poszczególne przypadki testowe, zdefiniowane za pomocą funkcji it (lub odpowiednika w wybranym frameworku). 

4. Zastosuj marble testing 

Marble testing to podejście, które pozwala na wizualizację strumieni danych za pomocą tzw. marble diagrams. W marble testing strumienie danych reprezentowane są jako ciągi znaków, gdzie każdy znak symbolizuje wartość w strumieniu lub specjalne zdarzenie, takie jak zakończenie strumienia czy wystąpienie błędu. 

W przypadku testowania RxJS z wykorzystaniem marble testing użyj narzędzi dostarczanych przez bibliotekę, takich jak TestScheduler. TestScheduler pozwala na kontrolowanie czasu w sposób wirtualny oraz definiowanie wartości wejściowych i oczekiwanych wartości wyjściowych za pomocą marble diagrams.  

5. Zdefiniuj przypadki testowe 

Przypadki testowe powinny być zdefiniowane w sposób czytelny i zrozumiały, opisując oczekiwane zachowanie funkcji, operatora lub strumienia danych. Wykorzystując marble testing, możesz precyzyjnie i czytelnie opisać oczekiwane zachowanie strumieni danych oraz porównać rzeczywiste wyniki z oczekiwanymi. 

6. Testuj różne przypadki i scenariusze 

Podczas pisania przypadków testowych warto przetestować różne scenariusze, takie jak: 

• Przepływ danych o różnych wartościach 
• Przepływ danych z opóźnieniami lub interwałami 
• Zachowanie kodu w przypadku wystąpienia błędów 
• Zakończenie strumieni danych 
• Właściwe przekazywanie wartości do kolejnych operatorów 

• Spróbuj także uwzględnić przypadki brzegowe, aby upewnić się, że testowany kod jest odporny na różne sytuacje. 

7. Przeglądaj i ulepszaj przypadki testowe 

Regularnie przeglądaj swoje przypadki testowe, aby upewnić się, że są aktualne i nadal spełniają swoje zadanie. Spróbuj zoptymalizować testy, eliminując powtarzalne lub zbędne fragmenty kodu, a także ułatwiając jego czytanie i zrozumienie. Dzięki temu utrzymanie i rozwój testów będą łatwiejsze w miarę wprowadzania zmian w kodzie źródłowym. 

Pisanie przypadków testowych RxJS, zwłaszcza z wykorzystaniem marble testing, wymaga zrozumienia struktury kodu, wyboru odpowiedniego frameworka do testowania, tworzenia struktury testów oraz definiowania przypadków testowych, które precyzyjnie opisują oczekiwane zachowanie strumieni danych. Dzięki stosowaniu tych wskazówek będziesz w stanie tworzyć czytelne i skuteczne testy jednostkowe dla swojego kodu opartego na bibliotece RxJS. 

Czym jest marble diagram w RxJS? 

Diagramy marble to wizualne reprezentacje strumieni danych w bibliotece RxJS, które pomagają zrozumieć przepływ danych oraz interakcje między operacjami na strumieniach. Wprowadzenie diagramów marble do procesu wytwarzania oprogramowania z RxJS może poprawić czytelność kodu, ułatwić komunikację między programistami oraz przyspieszyć proces wdrażania testów. 

Jak odczytywać diagramy marble w RxJS? 

Diagramy marble używają znaków do przedstawienia wartości emitowanych przez strumień, zakończenia strumienia, wystąpienia błędu oraz subskrypcji i jej anulowania. Oto kilka dodatkowych wskazówek, jak odczytywać diagramy: 

Czas: każdy myślnik (–) oznacza jednostkę czasu, zwaną również „ramką”. W testach marble długość ramki czasowej jest zdefiniowana w narzędziu TestScheduler, co pozwala na kontrolowanie upływu czasu w teście. 

Wartości: znaki alfanumeryczne (np. a, b, c) reprezentują wartości emitowane przez strumień danych. Wartości te są zazwyczaj zdefiniowane w obiekcie wartości przekazywanym do metody toBe(), który mapuje te znaki na rzeczywiste wartości. 

Subskrypcja i anulowanie subskrypcji: w Marble możemy użyć symbolu ^ do oznaczenia momentu, w którym subskrypcja się rozpoczyna, oraz ! do oznaczenia momentu, w którym zostaje anulowana. 

Przykładowy diagram marble dla RxJS może wyglądać tak:

---a---b---c---| 
 

Ten diagram reprezentuje strumień danych, który emituje trzy wartości: a, b, c, każda z nich emitowana w równych odstępach czasu. Ostatni symbol, |, oznacza, że strumień został zakończony po emisji c.

---a---b---c---| 

        map(x => x.toUpperCase()) 

---A---B---C---| 

W tym przypadku mamy strumień wejściowy, który emituje wartości a, b, c. Następnie zastosowaliśmy operator map, który przekształca każdą emitowaną wartość na jej odpowiednik z dużą literą. Wynikowy strumień emituje więc wartości A, B, C. 

Diagramy marble mogą być znacznie bardziej skomplikowane, z wieloma operatorami i zdarzeniami. Kluczowe jest zrozumienie podstawowej notacji, aby móc interpretować i tworzyć takie diagramy. 

Jakie są rodzaje testów marble w RxJS?

Testy marble w RxJS dzielimy na dwa główne rodzaje: testy jednostkowe i testy integracyjne.

Testy jednostkowe

Skupiają się na izolowaniu i testowaniu indywidualnych komponentów, operatorów lub funkcji. Marble testing jest bardzo przydatne w testach jednostkowych, ponieważ pozwala na precyzyjne sprawdzanie sekwencji zdarzeń oraz efektów poszczególnych operatorów na strumieniach danych. W testach jednostkowych korzystamy z TestScheduler, który pozwala kontrolować upływ czasu oraz weryfikować oczekiwane wyniki testów.

Testy integracyjne

Testują interakcje między różnymi komponentami, operatorami lub funkcjami w systemie. Marble testing może być również używane w testach integracyjnych, aby zbadać, jak różne części kodu współpracują ze sobą. W testach integracyjnych sprawdzamy, czy przepływ danych między różnymi komponentami jest zgodny z oczekiwaniami. Testowanie marble w kontekście testów integracyjnych jest bardziej złożone niż w przypadku testów jednostkowych, ale może dostarczyć cenne informacje na temat zachowania systemu jako całości. 

W testowaniu z wykorzystaniem diagramów marble  istotne jest również zrozumienie operatorów „hot” i „cold”. W kontekście strumieni danych operator „hot” to taki, który emituje wartości niezależnie od tego, czy istnieje obecnie jakakolwiek subskrypcja. Z kolei operator „cold” zaczyna emitować wartości dopiero po subskrypcji. W testach marble operator „cold” jest zazwyczaj reprezentowany przez strumienie oznaczone jako source. Najlepiej będzie spojrzeć na przykład:  

import { TestScheduler } from 'rxjs/testing'; 

import { of, Subject } from 'rxjs'; 

import { map, takeUntil } from 'rxjs/operators'; 
 

it('should demonstrate hot and cold observables', () => { 

  const testScheduler = new TestScheduler((actual, expected) => { 

    expect(actual).toEqual(expected); 

  }); 

 

  testScheduler.run(({ cold, hot, expectObservable }) => { 

    const sourceCold$ = cold(' --a--b--c--|'); 

    const sourceHot$ = hot('  --d--e--f--|'); 

    const stop$ = cold('      -----s--|'); 

    const expectedMarble = '  --x--y--(z|)'; 

 

    const resultCold$ = sourceCold$.pipe( 

      takeUntil(stop$), 

      map((value) => value.toUpperCase()) 

    ); 

    const resultHot$ = sourceHot$.pipe( 

      takeUntil(stop$), 

      map((value) => value.toUpperCase()) 

    ); 

    expectObservable(resultCold$).toBe(expectedMarble, { 

      x: 'A', 

      y: 'B', 

      z: 'C' 

    }); 

    expectObservable(resultHot$).toBe(expectedMarble, { 

      x: 'D', 

      y: 'E', 

      z: 'F' 

    }); 

  }); 

}); 

W powyższym przykładzie widzimy dwa strumienie danych: „cold” i „hot”. Strumień „cold” zaczyna emitować wartości tylko po subskrypcji, podczas gdy strumień „hot” emituje wartości niezależnie od subskrypcji. W teście używamy operatora „takeUntil” do zakończenia obserwacji strumieni danych w odpowiednim momencie. 

Podsumowując, marble diagrams w RxJS są niezwykle pomocne w zrozumieniu przepływu danych oraz zachowań poszczególnych operatorów w strumieniach danych. Testowanie marble ułatwia tworzenie testów jednostkowych oraz integracyjnych, które są niezbędne dla poprawnego działania aplikacji opartej na RxJS. Wiedza na temat diagramów marble oraz umiejętność pisania skutecznych testów marble są ważnymi kompetencjami każdego programisty korzystającego z biblioteki RxJS. 

W przypadku pracy z marble warto pamiętać o kilku dodatkowych zasadach i wskazówkach, które mogą ułatwić proces testowania:

• Konwencje nazewnictwa: kiedy tworzysz strumienie danych za pomocą diagramów marble, warto utrzymywać konwencje nazewnictwa i używać nazw związanych z funkcjonalnością strumieni. Dzięki temu możemy łatwo zrozumieć, jakie dane przepływają przez strumienie, co ułatwia analizowanie wyników testów. 

• Korzystanie z helperów: w wielu przypadkach testowania marble możemy skorzystać z funkcji pomocniczych dostarczanych przez bibliotekę RxJS, takich jak TestScheduler, hot, cold, time, expectObservable i expectSubscriptions. Te funkcje ułatwiają tworzenie diagramów marble oraz zarządzanie nimi i testowanie przepływu danych między różnymi strumieniami. 
• Weryfikacja wyników testów: podczas pisania testów marble warto zwracać uwagę na wyniki testów i błędy zgłaszane przez narzędzia do testowania, takie jak Jasmine lub Mocha. Dzięki temu możemy szybko zidentyfikować i naprawić błędy w naszym kodzie. 
• Dokładność testów: testowanie marble pozwala na precyzyjne śledzenie sekwencji zdarzeń w strumieniach danych. Jednak ważne jest, aby pamiętać, że testowanie marble nie zastępuje innych rodzajów testowania, takich jak testy jednostkowe czy integracyjne. Warto korzystać z różnych technik testowania w zależności od kontekstu i potrzeb aplikacji. 
• Praktyka: testowanie marble może być na początku trudne do zrozumienia, ale z biegiem czasu i nabieranym doświadczeniem staje się coraz łatwiejsze. Praca z różnymi przykładami i scenariuszami pomoże zrozumieć, jak najlepiej wykorzystać diagramy marble w testach RxJS. 

Używając marble w RxJS, można skutecznie testować strumienie danych oraz interakcje między operacjami. Diagramy marble ułatwiają zrozumienie przepływu danych oraz oczekiwanych wyników testów, co prowadzi do budowania bardziej niezawodnych i wydajnych aplikacji. Praktyka i doświadczenie są kluczowe w opanowaniu testowania marble, ale korzyści płynące z jego zastosowania są nieocenione dla każdego programisty Front-End.

Przeczytaj także: Test regresji – strata czasu czy must have w projekcie?

Jakie są korzyści z testowania RxJS?

• Działanie kodu zgodne z oczekiwaniami – testowanie kodu RxJS jest niezwykle ważne, gdyż pozwala na zwiększenie pewności, że kod działa zgodnie z oczekiwaniami. Dzięki testom programiści mogą być pewni, że ich aplikacje rzeczywiście spełniają założone wymagania biznesowe, co przekłada się na mniejsze ryzyko wystąpienia błędów czy niezgodności. 
• Wykrywanie błędów – jednocześnie testowanie ułatwia wykrywanie błędów, ponieważ sprawdza indywidualne funkcje, operatory oraz interakcje między nimi. Dzięki temu możliwe jest szybsze zidentyfikowanie i naprawienie problemów w kodzie. To wpływa również na skrócenie czasu debugowania, gdyż testy pomagają programistom szybko zlokalizować źródło błędu. 
• Łatwiejsze wprowadzanie zmian – testy RxJS wspierają także wprowadzanie zmian w kodzie, gdyż automatycznie sprawdzają funkcjonalność po każdej modyfikacji. Dzięki temu programista może szybciej wykryć i naprawić ewentualne problemy wynikające z wprowadzonych zmian. Ponadto testy ułatwiają refaktoryzację, gdyż programista może być pewny, że jego zmiany nie wprowadzą regresji. 
• Dokumentacja kodu – warto również zauważyć, że testy RxJS często służą jako dokumentacja dla kodu, dostarczając informacji o tym, jak korzystać z poszczególnych funkcji i jakie są ich oczekiwane wyniki. Taka dokumentacja jest nieoceniona dla innych programistów, którzy chcą zrozumieć czyjś kod i wiedzieć, jak go używać. 

• Większe zaufanie do oprogramowania – wreszcie testowanie zwiększa zaufanie do kodu zarówno wśród programistów, jak i interesariuszy projektu. Wszyscy mogą być pewni, że aplikacja rzeczywiście działa poprawnie i spełnia wymagania. Testy są kluczowe dla utrzymania wysokiej jakości aplikacji opartych na strumieniach danych i reaktywnym programowaniu. 
• Lepszy kod – w efekcie testowanie kodu RxJS przyczynia się do lepszej jakości kodu, szybszego wykrywania i naprawiania błędów, łatwiejszego wprowadzania zmian oraz wzrostu zaufania do kodu. Jako ekspert od RxJS, zdecydowanie polecam stosowanie testów we wszelkich projektach opartych na tej bibliotece. 

FAQ

Spis treści:

1. 1. Zarządzanie stanem w React
2. 2. Czym jest Redux i jak działa?
3. 3. Wykorzystanie innych rozwiązań
4. 4. Które rozwiązanie wybrać?
5. 5. Zarządzanie stanem aplikacji – podsumowanie

Zarządzanie stanem w React

Ktoś stworzył aplikację z przyciskiem. Wciskasz go i za każdym razem wyświetla się inna wartość. Pewnie zastanawiasz się, co dzieje się „pod spodem”. To albo czary, albo… zarządzanie stanem aplikacji. Tym razem zajmiemy się tym drugim tematem. Zarządzanie stanem w React to proces kontrolowania i aktualizowania danych w aplikacji.

Jest jednym z kluczowych zagadnień przy pracy z biblioteką programowania JavaScript. Stan to taka wartość, która zmienia się na przykład na skutek interakcji użytkownika z aplikacją. W React stan zazwyczaj przechowywany jest w komponentach, a jego zmiana może powodować ponowne renderowanie komponentu lub całego drzewa komponentów. Zarządzanie stanem jest dosyć istotne. Pozwala nam tworzyć dynamiczne i interaktywne aplikacje – dzięki temu aplikacja może:

• dostosowywać się do zmieniającego się stanu,
• reagować na interakcję użytkownika,
• wykonywać pewne akcje w odpowiednich momentach.

Jest to ważne w przypadku złożonych aplikacji, w których wiele komponentów zależy od stanów w innych komponentach.

Czym jest Redux i jak działa?

Zapewne większość osób zaznajomionych z React, słysząc o zarządzaniu stanem, przed oczami ma tylko jedno – Redux.

Redux jest biblioteką służącą do zarządzania stanem aplikacji w React. Jest to narzędzie, które umożliwia tworzenie bardziej przewidywalnych i łatwiejszych do testowania aplikacji poprzez uproszczenie zarządzania stanem i zachowywania go w jednym miejscu. Redux wprowadza wiele pojęć, które pozwalają na bardziej efektywne i przewidywalne zarządzanie stanem. Jednym z nich jest jednostronny przepływ danych. Stan aplikacji jest przechowywany w jednym centralnym magazynie, tzw. store. Dane między store a komponentami przepływają w odpowiedni sposób, zgodny z architekturą Flux. Zmiany w stanie są dokonywane tylko za pomocą akcji, czyli prostych obiektów, które opisują zmiany, jakie mają być wykonane w stanie aplikacji.

Warto również wspomnieć, że Redux może działać niezależnie od Reacta. Biblioteka ta jest uniwersalna i może być używana w innych aplikacjach internetowych. Jeśli ktoś jednak poszukuje nieskomplikowanego, intuicyjnego narzędzia, to warto poznać też inne dostępne opcje.

import React from "react";
import { Provider, useDispatch, useSelector } from "react-redux";
import { createStore } from "redux";


const incrementAction = () => ({ type: "INCREMENT" });
const decrementAction = () => ({ type: "DECREMENT" });


const counterReducer = (state = 0, action) => {
 switch (action.type) {
   case "INCREMENT":
     return state + 1;
   case "DECREMENT":
     return state - 1;
   default:
     return state;
 }
};


const store = createStore(counterReducer);


const Counter = () => {
 const count = useSelector((state) => state);
 const dispatch = useDispatch();


 return (
   <div>
     <div>Count: {count}</div>
     <button onClick={() => dispatch(incrementAction())}>+</button>
     <button onClick={() => dispatch(decrementAction())}>-</button>
   </div>
 );
};


const CounterApp = () => {
 return (
   <Provider store={store}>
     <Counter />
   </Provider>
 );
};

Wykorzystanie innych rozwiązań

Na szczęście istnieją różne sposoby zarządzania stanem aplikacji w React:

Context API

To wbudowane w React narzędzie do przekazywania danych między komponentami bez konieczności przekazywania ich przez „propsy” (właściwości, ang. properties). Dzięki temu można przekazywać dane do komponentów znajdujących się niżej w hierarchii bezpośrednio z góry. Można to wykorzystać do zarządzania stanem aplikacji, przekazując stan do całej aplikacji lub tylko do części komponentów.

import React, { createContext, useContext, useState } from "react";


const CounterContext = createContext();


const CounterProvider = ({ children }) => {
 const [counter, setCounter] = useState(0);


 const increment = () => {
   setCounter((prevCounter) => prevCounter + 1);
 };


 const decrement = () => {
   setCounter((prevCounter) => prevCounter - 1);
 };


 return (
   <CounterContext.Provider value={{ counter, increment, decrement }}>
     {children}
   </CounterContext.Provider>
 );
};


const CounterDisplay = () => {
 const { counter } = useContext(CounterContext);


 return <div>Counter: {counter}</div>;
};


const CounterButtons = () => {
 const { increment, decrement } = useContext(CounterContext);


 return (
   <div>
     <button onClick={increment}>+</button>
     <button onClick={decrement}>-</button>
   </div>
 );
};


const CounterApp = () => {
 return (
   <CounterProvider>
     <CounterDisplay />
     <CounterButtons />
   </CounterProvider>
 );
};

MobX

To biblioteka, która umożliwia łatwe zarządzanie stanem aplikacji w React. W przeciwieństwie do Redux – MobX jest bardziej elastyczny i wymaga mniej kodu. Używa się go do przechowywania stanu w obiektach, które reprezentują dane aplikacji. MobX automatycznie aktualizuje widok, gdy dane zmienią się w magazynie.

import React from "react";
import { observable } from "mobx";
import { observer } from "mobx-react";

const counterStore = observable({
 counter: 0,
 increment() {
   this.counter++;
 },
 decrement() {
   this.counter--;
 },
});

const CounterDisplay = observer(() => <div>Counter: {counterStore.counter}</div>);

const CounterButtons = observer(() => (
 <div>
   <button onClick={() => counterStore.increment()}>+</button>
   <button onClick={() => counterStore.decrement()}>-</button>
 </div>
));

const CounterApp = () => {
 return (
   <div>
     <CounterDisplay />
     <CounterButtons />
   </div>
 );
};

RxJS

To biblioteka reaktywna do zarządzania asynchronicznymi strumieniami danych. Można jej używać do zarządzania stanem w aplikacji. RxJS pozwala na łatwe reagowanie na zmiany w danych i wykonywanie akcji na podstawie tych zmian.

import React, { useState, useEffect } from "react";
import { Subject } from "rxjs";
import { scan } from "rxjs/operators";

const counterSubject = new Subject();

const counter$ = counterSubject.pipe(
 scan((count, operation) => {
   if (operation === "+") {
     return count + 1;
   } else if (operation === "-") {
     return count - 1;
   } else {
     return count;
   }
 }, 0)
);

const CounterDisplay = () => {
 const [counter, setCounter] = useState(0);


 useEffect(() => {
   const subscription = counter$.subscribe(setCounter);
   return () => subscription.unsubscribe();
 }, []);


 return <h1>Counter: {counter}</h1>;
};


const CounterButtons = () => {
 const handleButtonClick = (operation) => {
   counterSubject.next(operation);
 };


 return (
   <div>
     <button onClick={() => handleButtonClick("+")}>+</button>
     <button onClick={() => handleButtonClick("-")}>-</button>
   </div>
 );
};

const CounterApp = () => {
 return (
   <div>
     <CounterDisplay />
     <CounterButtons />
   </div>
 );
};

Recoil

Recoil to biblioteka, która działa poprzez przechowywanie stanu aplikacji w tzw. atomach. Atomy są prostymi obiektami, które zawierają aktualną wartość stanu oraz funkcje, które pozwalają na aktualizację wartości. Dzięki temu łatwo jest zarządzać stanem aplikacji i aktualizować go w reakcji na interakcję podejmowaną przez użytkownika lub inne zdarzenia.

import React from "react";
import { useRecoilState, atom, RecoilRoot } from "recoil";


const counterState = atom({
 key: "counterState",
 default: 0,
});

const CounterDisplay = () => {
 const [counter] = useRecoilState(counterState);

 return <div>Counter: {counter}</div>;
}

const CounterButtons = () => {
 const [counter, setCounter] = useRecoilState(counterState);


 const increment = () => {
   setCounter(counter + 1);
 };

 const decrement = () => {
   setCounter(counter - 1);
 };

 return (
   <div>
     <button onClick={increment}>+</button>
     <button onClick={decrement}>-</button>
   </div>
 );
}

const CounterApp = () => {
 return (
   <RecoilRoot>
     <CounterDisplay />
     <CounterButtons />
   </RecoilRoot>
 );
};

Zustand

Zustand to lekka biblioteka do zarządzania stanem w React, która wykorzystuje podstawowe funkcjonalności React do przechowywania i aktualizowania stanu. Oferuje proste API i pozwala na tworzenie globalnego stanu, zarządzanie stanem w komponentach, własnych modułach, tworzenie selektorów i subskrypcji stanu. Jest szybka i wydajna, co sprawia, że działa dobrze nawet w dużych aplikacjach.

import React from "react";
import create from "zustand";

const useCounterStore = create((set) => ({
 counter: 0,
 incrementCounter: () => set((state) => ({ counter: state.counter + 1 })),
 decrementCounter: () => set((state) => ({ counter: state.counter - 1 })),
}));

const CounterDisplay = () => {
 const counter = useCounterStore((state) => state.counter);

 return <div>Counter: {counter}</div>;
}

const CounterButtons = () => {
 const { incrementCounter, decrementCounter } = useCounterStore();

 return (
   <div>
     <button onClick={incrementCounter}>+</button>
     <button onClick={decrementCounter}>-</button>
   </div>
 );
}

const CounterApp = () => {
 return (
   <div>
     <CounterDisplay />
     <CounterButtons />
   </div>
 );
};

Które rozwiązanie wybrać?

Wybór rozwiązania do zarządzania stanem w React zależy od wielu czynników, takich jak rozmiar i złożoność projektu, preferencje zespołu programistycznego, doświadczenia z innymi bibliotekami i podejściami. Większość starszych projektów w React korzysta z biblioteki Redux, gdyż było to najpopularniejsze rozwiązanie, które przyzwyczaiło programistów do swojego sposobu działania. Redux jest bardzo popularny wśród większych projektów i ma duże wsparcie społeczności, co może pomóc w rozwiązywaniu problemów – nie jest jednak polecany w nowych projektach.

Według mnie, jeśli rozpoczynasz nowy projekt w React i potrzebujesz rozwiązania do zarządzania stanem, to sugerowałbym rozważenie Recoil lub Zustand. Są to biblioteki, które zostały opracowane z myślą o prostocie i łatwości użycia, co może być szczególnie ważne w nowym projekcie, w którym chcesz skupić się na szybkim wdrożeniu funkcjonalności i ograniczeniu ilości kodu. Recoil i Zustand pozwalają na tworzenie stanu przy użyciu hooków, co ułatwia integrację z React i zmniejsza potrzebę tworzenia dodatkowych plików. W przypadku Recoil możesz również korzystać z selektorów, które pozwalają na pobieranie tylko niezbędnych danych ze stanu, co może przyspieszyć renderowanie aplikacji.

Zarządzanie stanem aplikacji – podsumowanie

Podsumowując, wybór biblioteki do zarządzania stanem w React powinien być solidnie przeanalizowany i nie jest łatwo odpowiedzieć na pytanie „które narzędzie wybrać?”. Jeśli priorytetem są łatwość użycia i szybka implementacja funkcjonalności, dobrym pomysłem może być wykorzystanie któregoś z innych rozwiązań – na przykład Recoil lub Zustand.

Jeśli zastanawiasz się nad wyborem Reduxa, to warto jest przeanalizować, czy projekt jest na tyle złożony i wymagający, że jego zastosowanie jest potrzebne. Może się też okazać, że projekt nie wymaga użycia żadnej biblioteki do zarządzania stanem, ponieważ sam React dostarcza narzędzi do zarządzania stanem w komponentach, które są wystarczające dla prostych projektów

1. 1. Observable oraz strumień danych
2. 2. Operatory w RxJS
3. 3. SwitchMap
4. 4. MergeMap
5. 5. ContactMap
6. 6. ExhaustMap
7. 7. FAQ

Observable oraz strumień danych

Jednymi z najważniejszych elementów biblioteki RxJS są Observable oraz strumienie danych.

Oba te pojęcia są podobne, jednak występują między nimi subtelne różnice:

Podsumowując, Observable mają szerszy zakres zastosowań niż strumienie danych i mają dodatkowe funkcje, pozwalające na kontrolowanie czasu przepływu wartości i sterowanie błędami.

Operatory w RxJS

Prawdziwą potęgę biblioteki RxJS stanowią operatory. Operatory pozwalają przekształcać, filtrować, łączyć strumienie danych i zarządzać nimi. RxJS dostarcza szereg operatorów, takich jak: map, filter, reduce, debounceTime, distinctUntilChanged itp., które pozwalają na przetwarzanie danych w strumieniach. Wybór odpowiedniego operatora jest ważny, gdyż źle dobrany operator może wpłynąć na funkcjonowanie systemu. Niżej omawiam najważniejsze z nich.

Przeczytaj także: Programowanie reaktywne w JavaScript z RxJS

Higher-Order Observable Mapping

Biblioteka RxJS zawiera szczególny typ operatorów, tzw. higher-order operators, czyli operatory wyższego rzędu, które pozwalają na złożone manipulowanie strumieniami danych. Higher-order operators to operatory, które zawierają w argumentach inne operatory lub Observable i zwracają nowe Observable mające zastosowanie do pierwotnego strumienia danych.

Istnienie higher-order operators w bibliotece RxJS jest uzasadnione z kilku powodów:

• Zapewniają one prostsze i bardziej czytelne sposoby manipulowania strumieniami danych. Dzięki nim można złożyć wiele operacji na strumieniu w jeden łańcuch, co ułatwia czytanie i zrozumienie kodu.
• Umożliwiają bardziej elastyczne manipulowanie strumieniami danych. Wiele higher-order operators pozwala na dynamiczne tworzenie nowych strumieni danych w zależności od zdarzeń zachodzących w pierwotnym strumieniu. Dzięki temu można łatwo dostosować przetwarzanie danych do zmieniających się wymagań.
• Higher-order operators pozwalają na wielokrotne wykorzystanie kodu. Wiele operacji na strumieniach danych jest podobnych i można je zastosować w wielu miejscach w aplikacji. Higher-order operators ułatwiają użycie tych samych operacji w różnych częściach kodu, co pozwala na uniknięcie powtórzeń.

Podsumowując, higher-order operators w bibliotece RxJS pozwalają na bardziej elastyczne, czytelne i wielokrotne wykorzystanie kodu do manipulowania strumieniami danych. Dzięki nim programiści mogą złożyć wiele operacji na strumieniu w jeden łańcuch, co ułatwia zarządzanie danymi w aplikacji.

RxJS udostępnia nam cztery operatory wyższego rzędu:

SwitchMap

Operator switchMap emituje wartości wewnętrznego Observable, ale każda nowa wartość emitowana przez strumień źródłowy powoduje anulowanie poprzedniego wewnętrznego Observable i utworzenie nowego. Wewnętrzny Observable zwrócony z funkcji mapującej jest zastępowany nowym wewnętrznym Observable, co oznacza, że jeśli źródłowy strumień emituje wartości z częstotliwością wyższą niż wewnętrzny Observable, operator switchMap przerywa działanie i zastępuje poprzedni wewnętrzny Observable. SwitchMap możemy zastosować w przypadku, gdy chcemy odwołać wcześniejsze żądania i wysłać tylko najnowsze żądanie, np. dotyczące filtrowania wyników wyszukiwania.

import { fromEvent } from 'rxjs'; 

import { switchMap } from 'rxjs/operators'; 

 

Pobieranie danych z serwera 

function fetchData(keyword: string) { 

  return fetch(`https://api.github.com/search/repositories?q=${keyword}`).then(res => res.json()); 

} 
 

Strumień wejściowy z danymi z pola tekstowego

const input$ = fromEvent(document.querySelector('input'), 'input'); 

Operator switchMap kończy subskrypcję poprzedniego strumienia i zwraca tylko strumień wyjściowy ostatniego wyemitowanego strumienia

const result$ = input$.pipe( 

  switchMap(event => fetchData(event.target.value)) 

); 

Subskrypcja strumienia wyjściowego

result$.subscribe( 

  data => console.log(data), 

  err => console.error(err), 

  () => console.log('Complete') 

); 

W tym przykładzie operator switchMap przekształca każdą wartość strumienia wejściowego (event z pola tekstowego) na strumień wyjściowy, który pobiera dane z serwera GitHub API na podstawie frazy wyszukiwania. Dzięki temu, kiedy użytkownik wprowadza nową frazę, operator switchMap anuluje subskrypcję poprzedniego strumienia wyjściowego i zwraca tylko wynik dla ostatniej frazy.

MergeMap

Operator mergeMap przetwarza wszystkie wartości w strumieniu źródłowym jednocześnie, emitując wartości wewnętrzne Observable. Operator tworzy wiele wewnętrznych Observables, co oznacza, że wynikowy strumień wyjściowy może emitować wartości w dowolnej kolejności. Przykładowym zastosowaniem operatora mergeMap może być równoległe pobieranie danych z wielu źródeł.

Operator mergeMap jest szczególnie przydatny w sytuacjach, gdy potrzebujemy wykonać operację asynchroniczną dla każdego elementu strumienia wejściowego i uzyskać strumień wyjściowy składający się z wyników tych operacji.

import { from, Observable } from 'rxjs'; 

import { mergeMap } from 'rxjs/operators'; 

Definicja funkcji zwracającej strumień asynchroniczny

function makeHttpRequest(id: number): Observable {

return fetch(https://jsonplaceholder.typicode.com/posts/${id}).then(res => res.json());

}

Strumień wejściowy z listą identyfikatorów

const ids$ = from([1, 2, 3, 4, 5]); 

 

Operator mergeMap przekształca każdy element strumienia wejściowego na strumień wyjściowy

const posts$ = ids$.pipe( 

  mergeMap(id => makeHttpRequest(id)) 

); 

Subskrypcja strumienia wyjściowego

posts$.subscribe( 

  post => console.log(post), 

  err => console.error(err), 

  () => console.log('Complete') 

); 

W tym przykładzie operator mergeMap przekształca każdy element strumienia wejściowego (identyfikator posta) na strumień wyjściowy reprezentujący wynik asynchronicznej operacji pobierania danych z serwera dla danego posta. W efekcie otrzymujemy strumień wyjściowy składający się z pobranych postów, a nie z identyfikatorów.

ContactMap

Operator concatMap emituje wartości wewnętrznego Observable w kolejności, w jakiej są one dostarczane. Operator nie tworzy wielu wewnętrznych Observables, dopóki poprzedni Observable nie zakończy działania. W przypadku, gdy w strumieniu źródłowym pojawi się kolejna wartość, zanim zakończy działanie poprzedni wewnętrzny Observable. Operator concatMap umieszcza wartości kolejnego wewnętrznego Observable w kolejce i przetwarza je dopiero po zakończeniu poprzedniego Observable.

import { of } from 'rxjs'; 

import { concatMap, delay } from 'rxjs/operators'; 

Strumień wejściowy z liczbami

const source$ = of(1, 2, 3, 4, 5); 

Operator concatMap przekształca każdy element strumienia wejściowego na nowy strumień wyjściowy z opóźnieniem w zależności od wartości elementu

const example$ = source$.pipe( 

  concatMap(value => of(`Delayed by: ${value * 1000}ms`).pipe(delay(value * 1000))) 

); 

Subskrypcja strumienia wyjściowego

example$.subscribe(console.log); 

W powyższym przykładzie concatMap przekształca każdą wartość strumienia wejściowego (1, 2, 3, 4, 5) na strumień wyjściowy, który zostaje opóźniony o wartość elementu w sekundach i zwrócony w kolejności ich pojawiania się w źródłowym strumieniu. Dzięki temu pierwszy element (1) zostanie zwrócony po jednej sekundzie, drugi element (2) po dwóch sekundach itd.

ExhaustMap

Operator exhaustMap przekształca każdy element strumienia wejściowego (źródłowego) na nowy strumień i ignoruje wszystkie kolejne elementy, zanim zakończy działanie strumień wyjściowy.

ExhaustMap jest przydatny, gdy jest nam potrzebne, żeby w danym czasie był emitowany tylko jeden strumień wyjściowy. W przypadku, gdy pojawiają się nowe elementy w strumieniu wejściowym przed zakończeniem strumienia wyjściowego, są one ignorowane aż do zakończenia działania poprzedniego strumienia wyjściowego.

Przykładowym zastosowaniem operatora exhaustMap może być ograniczenie liczby żądań sieciowych w sytuacji, gdy w aplikacji użytkownik kliknie wiele razy na przycisk, ale zwrócone zostanie tylko jedno zapytanie.

 

import { interval } from 'rxjs'; 

import { exhaustMap, take } from 'rxjs/operators'; 

Strumień wejściowy z wartościami

const source$ = interval(1000).pipe(take(4)); 

Operator exhaustMap przekształca każdą wartość strumienia wejściowego na nowy strumień wyjściowy, który zostaje zwrócony dopiero po zakończeniu działania jego poprzednika. 

const example$ = source$.pipe( 

  exhaustMap(value => interval(500).pipe(take(3))) 

); 

Subskrypcja strumienia wyjściowego 

example$.subscribe(console.log); 

Powyższy przykład obrazuje sytuacje, gdy operator exhaustMap przekształca każdą wartość strumienia wejściowego (0, 1, 2, 3) na strumień wyjściowy emitujący wartości z opóźnieniem 0,5 sekundy. Każdy kolejny strumień wyjściowy zostanie zignorowany, dopóki poprzedni nie zostanie zakończony, dlatego drugi strumień wyjściowy z wartościami (0, 1, 2) nie zostanie wyemitowany, ponieważ pierwszy strumień z wartościami (0, 1, 2) nadal jest w trakcie emisji.

Podsumowując:

• exhaustMap ignoruje nowe zdarzenia, jeśli obecny strumień wciąż trwa. Jeśli w trakcie trwania strumienia wejściowego operator otrzyma kolejne zdarzenie, to zostanie ono pominięte, aż do momentu, gdy strumień wejściowy się zakończy.
• mergeMap przetwarza wszystkie wartości w strumieniu źródłowym jednocześnie, emitując wartości wewnętrznych Observables.
• concatMap emituje wartości wewnętrznego Observable w kolejności, w jakiej są one emitowane.
• switchMap emituje wartości wewnętrznego Observable, ale zastępuje poprzedni wewnętrzny Observable nowym, gdy źródłowy strumień emituje nowe wartości.

FAQ:  

Przejdź do:

1. 1. Wyzwania współczesnych aplikacji internetowych
2. 2. Czym jest programowanie reaktywne?
3. 3. Strumienie danych
4. 4. Co to jest observable?
5. 5. Observable vs promise w JavaScript
6. 6. Hot vs cold observables
7. 7. Tworzenie observable
8. 8. Subskrybcje
9. 9. Observer
10. 10. RxJS – zalety
11. 11. RxJS – wady
12. 12. Podsumowanie

Wyzwania współczesnych aplikacji internetowych

Tworząc nowoczesne i wydajne aplikacje internetowe, mierzymy się z wieloma wyzwaniami, o czym wspominał m.in. Paweł Adamowicz w swoim materiale Zarządzanie stanem aplikacji frontendowej za pomocą NgRx. Jako programiści powinniśmy między innymi brać pod uwagę to, że nie można blokować użytkownika i kazać mu czekać, aż nasza witryna obsłuży kilka zdarzeń. Co zatem zrobić w momencie, kiedy aplikacja jednocześnie musi uruchomić animację, załadować loader czy zareagować na działanie użytkownika? Jak obsłużyć te wszystkie sytuacje naraz? Tutaj z pomocą przychodzi nam paradygmat programowania reaktywnego wraz z biblioteką RxJS.

Czym jest programowanie reaktywne?

Programowanie reaktywne to paradygmat służący do pisania kodu opierającego się na asynchronicznych strumieniach danych.

Jest to sposób tworzenia aplikacji, które reagują na zachodzące zmiany, w przeciwieństwie do typowego, imperatywnego sposobu pisania oprogramowania, w którym jawnie tworzymy instrukcję krok po kroku, aby te zmiany obsłużyć.

Brzmi to dość skomplikowanie i faktycznie takie podejście wymaga zmiany sposobu myślenia. Jednak istnieją rozwiązania, które zdecydowanie ułatwią zmianę podejścia na reaktywne – w przypadku JavaScript jest nim właśnie biblioteka RxJS.

Strumienie danych

Strumień to sekwencja danych uporządkowanych w czasie. Strumienie danych mogą być tworzone z obiektów, zmiennych, struktur danych, za pomocą zdarzeń (kliknięć), odpowiedzi żądań HTTP itd.

Na swojej osi czasu strumień może również emitować error (gdy wystąpi nieoczekiwane zdarzenie powodujące zakończenie strumienia) lub status completed, gdy strumień wyemitował wszystkie dane. Możemy przechwycić te metody (error i complete) i wykonać na nich odpowiednie dla nas operacje, o czym więcej piszę w dalszej części.

Przeczytaj także: Angular – zróbmy swoją PWA.

Co to jest observable?

RxJS udostępnia nam obiekt observable, który wykorzystuje wzorzec projektowy – obserwator.

Możemy to zilustrować na przykładzie subskrybcji do newslettera. Zapewne nieraz zdarzyło ci się kliknąć przycisk „subskrybuj”, czy to na YouTube, czy np. jakimś blogu. W momencie kiedy pojawi się nowy artykuł lub inny materiał, dostajesz od razu powiadomienie o pojawieniu się nowych zasobów. W każdym momencie możesz także zrezygnować z subskrypcji.

Tak samo działają observable i strumienie.

• Klikając przycisk subscribe, stajesz się obserwatorem danych zasobów,
• observable jako obiekt obserwowany serwuje nam strumień danych z nowościami,
• subskrypcja do strumienia zapewnia nam metodę „subscribe”,
• możemy również wybrać, które dane są dla nas wartościowe jako nowości.

Observable vs promise w JavaScript

Observable to nic innego jak strumień z wartościami (absolutnie dowolnego typu). Ale zaraz, zaraz… Po co nam ten cały observable, skoro mamy już promise w JavaScript? Observable daje nam dużo większe możliwości, poniżej krótkie porównanie:

Promise

• za każdym razem jest asynchroniczny, 
• jest „eager” – przetwarzanie rozpoczyna się natychmiastowo po jego zdefiniowaniu, 
• może zwracać tylko jedną wartość, 
• nie posiada operatorów, 
• nie może być anulowany.

Observable

• może być zarówno synchroniczny, jak i asynchroniczny,
• jest „lazy” – będzie wykonany nie w momencie zdefiniowania strumienia, ale w momencie, w którym utworzona zostanie subskrypcja,
• zwraca jedną lub wiele wartości,
• do dyspozycji mamy całą gamę operatorów,
• możemy go anulować w dowolnym momencie,
• daje nam więcej możliwości przy obsłudze błędów (m.in. operator retry()).

Hot vs cold observables

Observable dzielimy na hot i cold.

Cold observables:

• emitowanie wartości zaczyna się w momencie pojawienia się pierwszego subskrybenta (gdy pojawi się pierwszy subscribe() – o tym w dalszej części artykułu),
• dla każdego nowego subskrybenta zwracają nowe wartości,
• przykładem może być np. serwis do pobierania danych z backendu, gdzie żeby wykonać zapytanie, musimy użyć subscribe.

Hot observables:

• wysyłają wartości pomimo braku subskrybenta,
• dzielą te same dane pomiędzy wszystkich subskrybentów,
• przykład: observable stworzony z eventu click.

Tworzenie observable

Istnieje wiele sposobów na stworzenie observable. Często spotykamy się z tworzeniem ich z innych struktur danych – tutaj z pomocą przychodzą nam operatory of lub from. Dla RxJS nie jest również problemem stworzenie jednego observable z kilku innych. Poniżej kilka przykładów.

Operator from przyjmuje tylko jeden argument, po którym można iterować (np. tablice, elementy tablicopodobne, weźmy za przykład tablicę obiektów).

 

import { from, Observable } from 'rxjs'; 

  

const to ReadBooks = [  

{  bookId: 1, title: The psychology of money', author: 'Morgan Housel' 

publicationYear: 2020 }, 

{  bookId: 2, title: 'The subtle art of not giving a f*ck', author: 'Mark Manson', 			publicationYear: 2016 }, 

{ bookId: 3, title: How to talk to anyone', author: 'Leil Lowndes', publicationYear: 1999 }, 

{ bookId: 3, title: 'Invent and wander', author: Jeff Bezos', publicationYear: 2020 }, 

  

];  

  

let source2$ = from(toReadBooks); 

source2$.subscribe(book => console.log(book.title)); 

W ten sposób nasza tablica obiektów zamieniła się w observable. Proste, prawda?

A co w sytuacji, gdy mamy kilka strumieni, a potrzebujemy jednego observable? Żaden problem! RxJS udostępnia kilka operatorów, które nam w tym pomogą. Jednym z nich jest concat.

import { concat, from, Observable, of } from 'rxjs'; 

  

const toReadBooks = [ 

  

  

{  bookId: 1, title: The psychology of money', author: 'Morgan Housel'  

publicationYear: 2020 },  

{  bookId: 2, title: 'The subtle art of not giving a f*ck', author: 'Mark Manson', 			publicationYear: 2016 },  

{ bookId: 3, title: How to talk to anyone', author: 'Leil Lowndes', publicationYear: 1999 },  

{ bookId: 3, title: 'Invent and wander', author: Jeff Bezos', publicationYear: 2020 }, 

  

];  

  

let source1$ = of('hello', 10, true, toReadBooks[0].title); 

source1$.subscribe(value => console.log(value)); 

  

let source2$ = from(toReadBooks); 

source2$.subscribe(book => console.log(book.title)); 

  

// combine the 2 sources  

concat(source1$, source2$) 

.subscribe(value => console.log(value)); 

Voilà! RxJS naprawdę ułatwia życie!

Subskrybcje

Powyżej wspomniałem o możliwości subskrypcji do strumienia. Kolejny termin, który brzmi skomplikowanie (ale wcale taki skomplikowany nie jest!). Subskrybcja to po prostu podłączenie się do strumienia. Każdy observable posiada metodę subscribe(), do której możemy przekazać parametry na dwa sposoby: jako obiekt z metodami lub jako zestaw callbacków. Obiekt przekazany do metody subscribe nazywamy observerem.

Observer

Observer posiada trzy składowe:

• pierwsza metoda (next) jest wykonana, jeśli uda nam się odebrać wartość ze strumienia. Każda nowa wartość powoduje wywołanie tej metody,
• druga metoda (error) jest wykonana, jeśli w strumieniu wystąpi błąd, na przykład w zapytaniu HTTP dostaniemy status 500. W przypadku wystąpienia błędu nasz observer nie przejdzie dalej i nie wykona metody complete, a tym samym zostanie zaznaczony jako closed i przestanie emitować wartości,
• trzecia metoda (complete) jest wykonana w momencie, gdy strumień wyemituje ostatnią wartość.

RxJS – zalety

Biblioteka RxJS niewątpliwie ułatwia rozwój aplikacji. Możemy ją zintegrować właściwie z dowolnym frontendowym frameworkiem (Angular, React). Również użycie z czystym JavaScriptem nie stanowi problemu. Do dyspozycji mamy ogromną liczbę operatorów, które pozwalają nam na dowolną modyfikację naszych strumieni. Stale pojawiające się aktualizacje sprawiają, że kolejne wydania biblioteki są coraz prostsze w użyciu. Dzięki RxJS zdecydowanie możemy przyspieszyć naszą pracę, jak również poprawić jakość wytwarzanego oprogramowania.

RxJS – wady

Tutaj zdecydowanie trudniej jest mi coś napisać niż w przypadku zalet. Pracując na co dzień z Angularem, nie wyobrażam sobie napisania choćby jednego komponentu bez użycia biblioteki RxJS. Na pewno rzeczą, która sprawia trudność – zwłaszcza początkującym programistom – jest testowanie kodu wykorzystującego RxJS. Testowanie takiego kodu wymaga znajomości wielu dodatkowych technik oraz narzędzi. Na szczęście RxJS ma na to swoje rozwiązanie i tu z pomocą przychodzi nam RxJS Marbles (umożliwia testowanie asynchronicznego kodu RxJS synchronicznie i krok po kroku za pomocą narzędzia testowego RxJS TestScheduler oraz przy użyciu wirtualnych kroków czasowych), jednak jest to dość obszerny temat, któremu można by poświęcić nowy wpis.

Podsumowanie

Powyższe informacje stanowią bardzo ogólny opis programowania reaktywnego oraz biblioteki RxJS. O każdym z powyższych tematów śmiało mógłby powstać oddzielny artykuł, a mój to zaledwie kropla w morzu – wiele aspektów zostało pominiętych.

Jednak bez dwóch zdań używanie RxJS stało się standardem w tworzeniu nowoczesnych i wydajnych aplikacji. Ciągły rozwój i wsparcie dla najpopularniejszych frameworków sprawia, że RxJS jest zdecydowanie najczęściej używaną biblioteką ułatwiającą zapanowanie nad asynchronicznością.

1. 1. Czym są frameworki?
2. 2. Angular
3. 3. Vue.js
4. 4. React

Czym są frameworki?

Framework to nic innego jak szkielet aplikacji wraz z pewnymi schematami zachowań, które pozwalają na ich budowę. Głównym celem każdego frameworka jest poprawa efektywności, zapewnienie swoistego rodzaju niezawodności oraz utrzymanie jakości kodu w pewnych narzuconych ryzach. Oczywiście oprócz wymienionych wyżej zalet istnieją też pewne niedogodności, takie jak na przykład złożoność kodu. Przed przystąpieniem do pracy musimy po prostu nauczyć się reguł, które panują w danym środowisku. Często wyzwaniem może być wydajność, ale jest to kwestia doboru odpowiednich narzędzi do rozwiązania, które budujemy.

Angular

Angular to framework stworzony przez firmę Google. W praktyce jest to kolejna gałąź frameworka AngularJS, opartego na języku JavaScript. Jednak nie należy spodziewać się tutaj uspójnionych koncepcji czy kontynuacji rozwiązań. Językiem, w którym piszemy w Angularze, jest TypeScript. Framework ten wprowadza pełną gamę funkcjonalności, które powinien posiadać każdy szkielet aplikacji. Programiści cenią Angulara przede wszystkim za takie funkcjonalności jak narzucona architektura aplikacji, routing, rozwiązanie wspierające pisanie komponentów, modułowość czy zastosowanie wzorców projektowych.

Istnieją również problemy, które często są zgłaszane przez użytkowników, między innymi: wysoki próg wejścia – zanim zacznie się pisać kod, trzeba przyswoić sporo wiedzy. Zatem wyzwaniem bez wątpienia jest duża złożoność frameworka oraz paradoksalnie związana z narzuconą architekturą mała elastyczność tworzonych aplikacji.

Vue.js

Jest to framework typu open source, zaprojektowany przez szeroką rzeszę specjalistów. Dane autorów możemy znaleźć na stronie: https://vuejs.org/. Vue.js proponuje bardzo podobne funkcjonalności co Angular, a jednocześnie można odnieść wrażenie, że jest znacznie prostszym frameworkiem niż jego kuzyn od Google. Próg wejścia jest zdecydowanie niższy, a często możemy napisać prostą aplikację po kilku minutach nauki, znając podstawy HTML, CSS i JavaScript. Z drugiej strony jednak powoduje to, że kod może być zdecydowanie gorszej jakości. Kolejną rzeczą, która w Vue.js, jak i Angularze nie jest doskonałym rozwiązaniem, jest rozbudowanie HTML o dyrektywy, które pozwalają nam programować na poziomie szablonu. W mojej opinii znacznie obniża to czytelność kodu.

React

Zaraz, zaraz – czy należy o nim mówić jak o frameworku? Zdecydowanie nie! Pewnie zastanawiacie się, dlaczego w takim razie w ogóle React znalazł się na tej liście? Przede wszystkim dlatego, że jest to biblioteka, która ma ogromną część funkcjonalności frameworka. Wzbogacona o konkretne biblioteki, powoduje, że ekosystem aplikacji reactowej staje się w pełni działającym frameworkiem. Takie rozwiązanie cechuje się tym, że możemy w swobodny sposób zarządzać kształtem naszej aplikacji, nie pomijając dobrych praktyk, które narzucają te narzędzia. Użycie JSX jako języka szablonów jest dużo bardziej czytelne niż typowy kod HTML. Ponadto w React możemy wszystko uznać za komponenty, co powoduje, że nie tworzymy dodatkowych struktur z większą złożonością. W tym ujęciu okazuje się, że moduły nie są potrzebne, a wprowadzają jedynie dodatkową warstwę deklaracji.

Podsumowując… Który framework jest najlepszy?

Z użyciem Angulara można często spotkać się w projektach, w których wymagany jest duży poziom zaufania do narzędzia oraz istnieje konkretna specyfikacja, jak np. w projektach bankowych. W mojej ocenie Vue.js jest najmniej trafnym wyborem spośród wymienionych narzędzi, ponieważ nie wprowadza żadnej rewolucyjności, a sam w sobie miesza mnóstwo warstw w jednym miejscu.

Istnieje mnóstwo rodzajów frameworków frontendowych. Wymienione wyżej są najczęściej używane w ujęciu komercyjnym. W mojej opinii najbardziej przyjaznym oraz najszybszym jest React. Pozwala on na szybkie pisanie kodu bez dodatkowych konfiguracji.

Pamiętajcie jednak, że najważniejsze w budowaniu aplikacji, a tym samym przy wyborze frameworków, jest określenie tego, czego potrzebujemy. Opinie na temat frameworków są subiektywne i często zależne od poziomu wiedzy o nich. Jedno moim zdaniem jest pewne: nie istnieje coś takiego jak „najlepszy framework”, ale na pewno można wskazać „najlepszy framework pod kątem konkretnego rozwiązania”. Który? Niech zdecyduje o tym zespół developerów, którzy będą pisali aplikację.

Styled components

Styled components to właśnie jedna ze wspomnianych przeze mnie wyżej funkcjonalności. Styled components jest globalnym rozwiązaniem dla pisania ostylowanych elementów w kodzie JavaScript, które będą stanowiły komponenty reactowe. Dzięki niej jesteśmy w stanie napisać całość kodu bez użycia plików css, scss czy less. Biblioteka ta może zostać znaleziona na stronie https://styled-components.com/. Rozwiązanie pozwala nam również na stylowanie istniejących już komponentów. Jedynym warunkiem, jaki musi spełnić ów komponent, jest to, że powinien posiadać props className. Daje to nam bardzo dużą elastyczność w użyciu naszych elementów.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

Biblioteka Redux w kontekście… hooków

Doskonałym przykładem użycia kontekstu, a w późniejszych wersjach również hooków, jest dobrze znana reactowcom biblioteka Redux. Realizuje ona zadanie przechowywania i propagowania danych w aplikacji bądź w określonym jej obszarze. Dlaczego łączymy te koncepcje? Tak jak wcześniej wspomniałem, styled components pozwalają na napisanie w bardzo prosty sposób styli w JavaScript dla elementów HTML, które będą odwzorowaniem tego, co mamy w szeroko znanych css-ach. Hook useContext natomiast umożliwiau dostępnienie danych niższym komponentom w hierarchii.

Theming

Pamiętacie setki zmiennych w less lub scss, które pisaliśmy dla utrzymania spójności kolorystyki i wyglądu elementów? Teraz to wszystko możemy przenieść na poziom JavaScript. Jest to tak zwany theming. Dokładną dokumentację opisanego tutaj połączenia znajdziecie na stronie https://styled-components.com/docs/advanced#theming.

Theming to niesamowicie wygodne narzędzie, dzięki któremu utrzymanie spójnego wyglądu aplikacji będzie dużo prostsze. Ponadto można dzięki temu wyegzekwować używanie przez programistów spójnej nomenklatury dla wariantów wyglądu komponentów.

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
 
  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;
 
// We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}
 
// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};
 
render(
  <div>
    <Button>Normal</Button>
 
    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);

https://material-ui.com/ stanowi doskonały przykład użycia naszego połączenia. Jest to biblioteka, która zawiera zbiór szeroko znanych elementów na stronach internetowych i która została napisana w React. Implementuje takie elementy jak: typografia, przyciski, accordiony itd. W niej również można znaleźć rozwinięcie koncepcji themingu oraz realny przykład użycia.

Przeczytaj także: PWA – Progressive Web Applications

Podsumowanie

Podsumowując, funkcjonalności, jakie zyskaliśmy wraz z hookami, to naprawdę bardzo dobre narzędzia, które pozwalają napisać aplikację frontendową w łatwy oraz konfigurowalny sposób. W projektach, w które byłem / jestem zaangażowany, nieraz używaliśmy koncepcji themingu i sprawdza się ona doskonale. Spróbujcie sami!

Przejdź do:

1. 1. Co to jest PWA?
2. 2. Progressive Web App – czy warto?
3. 3. PWA– narzędzia dla developera
4. 4. Dodanie Progressive Web App do Angulara
5. 5. Jak sprawdzić działanie PWA?
6. 6. Mamy PWA – co dalej?
7. 7. Podsumowanie

Co to jest PWA?

Aplikacja PWA (Progressive Web App) jest stroną internetową, która zachowuje się jak aplikacja mobilna. Upraszczając, aplikacja PWA od „zwykłej” strony internetowej z JavaScript różni się w zasadzie tym, że posiada service worker oraz plik manifest json. Z punktu widzenia użytkownika działa niemal jak natywna aplikacja mobilna, ponieważ service worker umożliwia działanie w trybie offline, a plik manifest json odpowiada za jej wizualne podobieństwo. Z punktu widzenia developera aplikacja PWA daje możliwości stworzenia lepszego doświadczenia dla użytkownika końcowego. W tym krótkim artykule postaram się opisać konfigurację PWA przy użyciu Angulara, która jest bardzo prosta dzięki natywnemu wsparciu przez Angular CLI. Sama konfiguracja service workera nie ogranicza nas jednak tak naprawdę do użycia określonego frameworka JavaScript, typu React Angular czy Vue.js.

Progressive Web App – czy warto?

Ponad połowa internautów w Polsce korzysta ze stron internetowych za pomocą urządzeń mobilnych, a posiadanie responsywnej, szybko ładującej się strony to obecnie być albo nie być w e-commerce. Wykorzystanie poprawnie zbudowanej aplikacji PWA znacznie ułatwia spełnienie wymagań i zaleceń optymalizacyjnych Google’a, przekłada się też na konkretne rezultaty – w niektórych przypadkach PWA pozwoliła podnieść współczynnik konwersji o 70%.

Korzystanie z aplikacji PWA ułatwia możliwość jej instalacji na pulpicie urządzenia końcowego (nie wymaga pobierania z Google Play/ App Store). Użytkownik może korzystać z aplikacji w trybie offline (dane zsynchronizują się w momencie nawiązania połączenia). PWA to również funkcjonalność powiadomień push, które znacząco zwiększają zaangażowanie i są skuteczną metodą odzyskiwania utraconych koszyków w e-commerce.

Koszt rozwoju i utrzymania aplikacji PWA jest nieporównywalnie mniejszy niż w przypadku aplikacji natywnych. Nie wymaga akceptacji procesu aktualizacji po stronie sklepu z aplikacjami, co znacznie usprawnia szybkość wdrażania kolejnych wersji, ułatwia też analizę danych i raportowanie.

Progressive Web Apps – narzędzia dla developera

Istnieją liczne strony takie jak https://whatwebcando.today/, które zapewniają wsparcie dla developerów. W prosty sposób można uzyskać dostęp do komponentów poprzez JavaScript i service workera. Warto tutaj wspomnieć, że pełne wsparcie komponentów posiada jedynie Google Chrome na systemie Android. Niestety, iPhone z Safari ogranicza nas w niektórych miejscach. Wsparcie komponentów tak dynamicznie się zmienia, że nie warto tutaj poruszać tematu różnic między przeglądarkami. W pierwszej części artykułu postaram się wytłumaczyć, jak w pełni skonfigurować oraz przetestować naszą aplikację. W dalszej części skupię się na innych komponentach, jak tryb offline, notyfikacje, geolokalizacja czy dostęp do plików. Gotowi na przygodę z PWA? Zacznijmy!

Dodanie Progressive Web App do Angulara

Zaczynamy od zainstalowania aplikacji angularowej przez Angular CLI. Następnie należy wywołać komendę ng add @angular/pwa

Dzięki temu w naszym folderze zostaje dodanych kilka plików potrzebnych do uruchomienia PWA:

ngsw-config.json – plik konfiguracyjny, który pozwala na ustawienie reguł cache’owania danych. Więcej informacji o strategiach cache’owania można znaleźć tutaj: https://serviceworke.rs/caching-strategies.html

Na konfiguracji tego pliku skupimy się w kolejnej części artykułu.

manifest.webmanifest – plik konfiguracyjny, który pozwala na ustawienie zachowania naszej aplikacji po zapisaniu przez użytkownika (orientacja, kolory, ikony).

*.png – domyślne ikony, które będą wyświetlać się użytkownikowi po zapisaniu aplikacji na pulpicie ekranu.

Dodatkowo zostaną zaktualizowane pliki:

angular.json (ustawiona flaga ServiceWorker: true),

index.html – dodana linijka do wczytania manifestu,

app.module.ts

Dzięki temu nasza aplikacja wie, że gdy uruchomimy ją w trybie produkcyjnym, service worker powinien zostać zarejestrowany do naszej przeglądarki.

Jak sprawdzić działanie PWA?

Niestety samo uruchomienie aplikacji przez Angular CLI nie pozwoli nam sprawdzić, czy service worker działa poprawnie. Możemy jednak w łatwy sposób to obejść, uruchamiając zbudowaną przez siebie aplikację lokalnie. Można to zrobić łatwo w dwóch krokach.

1. Budujemy aplikację w trybie produkcyjnym: ng build –prod
2. Uruchamiamy http-server (jeżeli nie mamy zainstalowanego lokalnie, to najpierw: npm i http-server -g) komenda: http-server ./dist/pwa-test -o

Pamiętajmy, że po dist należy wprowadzić swoją nazwę aplikacji. Po wpisaniu komendy powinna uruchomić się nasza strona internetowa. Aby sprawdzić poprawność service workera i manifestu, użyjemy wbudowanych narzędzi w Google Chrome. Po uruchomieniu Developers Tools przechodzimy do zakładki Application.

W menu bocznym Service Worker powinniśmy zobaczyć informację, że nasz service worker został odnaleziony i jest poprawnie zainstalowany.

W zakładce Manifest znajdziemy z kolei informację, czy domyślna konfiguracja (kolory, ikony oraz nazwa) jest zaimportowana poprawnie.

Wszystkie te dane są zaczytywane z plików, które zostały wygenerowane przez Angular CLI po zbudowaniu aplikacji. Znajdują się one w folderze /dist/NazwaAplikacji.

Dzięki pozytywnemu wgraniu manifestu oraz service workera nasza aplikacja pozwala na korzystanie w pełni z komponentów na urządzeniu mobilnym czy komputerze.

Mamy PWA – co dalej?

Dzięki domyślnej konfiguracji możemy jedynie zapisać naszą aplikację na telefonie czy komputerze. Aby to zrobić, na komputerze wystarczy kliknąć ikonę plusika obok adresu strony internetowej.

Nazwa oraz ikona są pobierane z pliku manifest.

Po zapisaniu nasza strona internetowa będzie zachowywać się jak aplikacja, a użytkownik nie jest świadomy, że uruchamia stronę internetową w przeglądarce. Po uruchomieniu aplikacji (po zapisaniu) powinno nam się wyświetlić tak wyglądające okno:

Jak widać na zdjęciu, znikł cały górny pasek z adresem, dodatkami oraz zakładkami. Użytkownik nie jest świadomy, że aplikacja uruchomiła się w przeglądarce.

Udało nam się skonfigurować aplikację startową w Angularze, tak aby zachowywała się jak Progressive Web Application. Użytkownik korzystający z naszej strony może na razie jedynie ją zapisać. W kolejnych krokach możemy dodać trochę kodu do naszej aplikacji, tak aby poinformować użytkownika o nowych wersjach naszej strony czy umożliwić korzystanie z niej w trybie offline. W kolejnych artykułach rozwinę temat PWA, pisząc o tym, jak rozwinąć naszą nowo powstałą aplikację o nowe funkcjonalności.

Podsumowanie

Stworzenie i konfiguracja PWA nie są trudne. W sieci pojawia się coraz więcej publikacji o możliwościach technologii, która już teraz jest nazywana frontendową rewolucją. Nic dziwnego – Progressive Web Application pozwała w łatwy sposób stworzyć przyjazną i szybko ładującą się stronę. Dla developerów to sygnał, że wykorzystując technologię PWA, wdrażają rozwiązanie, które przyniesie konkretne, mierzalne rezultaty.

Czytaj również: Który framework frontendowy jest najlepszy?