Daj Się Poznać 2017 – raport z działań. Część 10

Za nami pierwszy tydzień maja, a to oznacza również, że za nami jest już 10 tydzień akcji Daj Się Poznać 2017. Do końca akcji pozostało kilka tygodni. Dowiedz się, co udało się zrobić w minionym tygodniu.

Po tygodniu na którym skupiłem się na tym, aby interfejs miał już akceptowalny wygląd (choć jeszcze nie jest to wygląd docelowy) postanowiłem zająć się tematem związanym z dostępem do danych. W poprzednich iteracjach projektu League Managera każdy widok był odpowiedzialny za pobieranie danych sam z siebie. Jest to bardzo nieoptymalne rozwiązanie, ponieważ każdy widok był niezależny od innego i praktycznie za każdym przejściem między widokami trzeba było pobrać dane od nowa. Ta część właśnie ulega zmianie.

Co udało się zrobić?

Miniony tydzień stał pod znakiem implementacji ReduxJS jako mechanizmu do zarządzania stanem aplikacji oraz jako single source of truth, czyli jedynego punktu dostępowego do danych dla całej aplikacji.

Dzięki temu, że aplikacja będzie posiadała swój store z danymi uda mi się znacząco zredukować potrzebę zaciągania tych samych danych w wielu widokach. Dodatkowo, wszelkie manipulacje na danych będą odbywały się w reducerach, dzięki czemu widoki będą mogły stać się bezstanowe - stateless, i będą mogły się skupić tylko na wyświetlaniu dostarczonych danych i obsłudze zdarzeń DOM, takich jak click czy change.

Plan na następny tydzień

Jednym z celów do spełnienia w nadchodzącym tygodniu będzie dokończenie implementacji ReduxJS w aplikacji. Co będzie potem, tego sam jeszcze nie wiem. Prawdopodobnie zajmę się implementacją logowania za pomocą OAuth2.

Materiały bonusowe

Od jakiegoś czasu w polskim Internecie istnieje miejsce będące agregatorem polskich blogów webdeveloperskich: PolskiFrontend.pl. Jeśli interesuje Ciebie o czym piszą polscy programiści i dlaczego poziom tekstów nie jest zły, to warto tam od czasu do czasu wpadać.

W minionym tygodniu udało się zaimplementować jeden z ficzerów do biblioteki DragsterJS, czyli możliwość wykorzystania biblioteki jako modułu AMD, bądź modułu CommonJS, bądź jako modułu ES6. W dalszym ciągu można z biblioteki korzystać tak jak do tej pory, czyli poprzez załadowanie jej na końcu strony jako tag <script />.

W związku z tym, że zaczęto wprowadzać obsługę modułów ES6 w przeglądarkach, to teraz DragsterJS może być wykorzystywany w następujący sposób:

<script type="module">
    import Dragster from './dragster.es6.js';
 
    const dragster = Dragster();
</script>

Tym samym, już nie trzeba będzie można dynamicznie, wewnątrz kodu określać jakie moduły są przez nas wymagane i kiedy są wymagane. To jest znaczący krok w przyszłość. Może się okazać, że Webpack już nie będzie potrzebny w części sytuacji.

Ładując DragsterJS jako moduł ES6 możesz z powodzeniem tworzyć nowe ficzery swojej aplikacji internetowej bądź strony internetowej bazujące na interfejsie przeciągnij-upuść, np. koszyk zakupowy.

Poniżej znajdziesz listę linków do których warto zajrzeć: