Wednesday, December 21, 2016

ng-poland 2016 - konferencja frontendowa z perspektywy backendowca

Pierwsza polska edycja konferencji dotyczącej Angular'a odbyła się 22 listopada 2016 w rozpoznawalnym miejscu stolicy, które jest łatwo dostępne dla podróżujących każdym środkiem transportu - na Stadionie Narodowym w Warszawie.
Po dotarciu na miejsce i dokonaniu bardzo sprawnej rejestracji zająłem miejsce z dobrym widokiem (później okazało się, że nie aż tak dobrym ;)) na główny ekran i samą scenę.
W miarę szybka rundka po stoiskach sponsorów pozwoliła na zapoznanie się z ofertami pracy oraz uzyskaniem odpowiedzi na podstawowe pytania związane z codzienną atmosferą i podejściem do pracy w projektach.
Dużym plusem konferencji była forma jednej ścieżki prezentacji. Każdą z nich rozdzielała bardzo krótka przerwa poświęcona jedynie na przygotowanie sceny dla kolejnych prelegentów. Prezentacje w porannym bloku trwały 40 minut i osobiście uważam, że był to wystarczający czas na zapoznanie się z przygotowanymi tematami.

Wprowadzenie rozpoczęło się z lekkim opóźnieniem które jednak nie miało wpływu na godziny kolejnych prelekcji. W tematykę Angulara wprowadzili nas bracia Kalbarczyk - Dariusz oraz Arkadiusz.
Pierwszą prelekcję przeprowadził Wassim Chegham i dotyczyła ona biblioteki Universal służącej do server-side rendering'u. Przedstawione zostały wady Angular'a 1, a głównie brak omawianego mechanizmu SSR. Umożliwia on szybsze ładowanie się strony, uzyskanie lepszej pozycji w wynikach wyszukiwania i poprawia ogólny tzw. user experience. Następnie zademonstrowane zostały zmiany jakie zaszły w Angular 2 wprowadzające obsługę SSR.
Druga prezentacja prowadzona przez Tracy Lee rozpoczęła się spontaniczną sesją karaoke, która wprowadziła luźniejszy nastrój na sali.
Prelekcja przedstawiła możliwości Angular CLI, który łatwo rozwiązuje problemy wyboru stosowanej konwencji w projekcie - jak nazywać foldery, pliki z klasami itp. Pozwala on również na generowanie podstawowego kodu projektu, jego component'ów, service'ów przy użyciu komend linii poleceń.
W czasie 40 minutowej sesji live coding Tracy stworzyła stronę WWW dotyczącą zapowiadanej konferencji ng-cruise zawierającej dział ze spisem przygotowanych sesji, z opisami prezenterów oraz formularz dla sponsorów. Zrobiło to na mnie niemałe wrażenie jak w tak krótkim czasie można przygotować podstawowe funkcjonalności w niedużym projekcie.
Trzecia prezentacja w porannym bloku przeprowadzona przez Uri Shaked pokazała, że Angulara 2 można używać nie tylko w środowisku przeglądarki internetowej. Prelegent przed konferencją przygotował swoją wersję gry Simon w formie aplikacji web'owej, zaś w trakcie 40 minut dodał do niej fragmenty kodu umożliwiające granie na urządzeniu IoT zbudowanym w oparciu o Arduino i Raspberry Pi. W projekcie użyta została autorska biblioteka angular-iot zawierająca dyrektywy do wykorzystania obsługi przez interfejsy fizyczne.

Po pierwszej krótkiej przerwie na kawę rozpoczął się blok prezentacji sponsorów.
Pierwsza została przygotowana przez Adama Nowaczyka z firmy Acaisoft. W czasie prezentacji odpowiadaliśmy na pytania z quizu - web aplikacji wykorzystującej infrastrukturę AWS oraz technologię web socket'ów. Prosta aplikacja stworzona na szybko bardzo sprawnie obsłużyła ruch około 300 jednoczesnych użytkowników bez posiadania ani jednej linijki kodu backend'owego.
Podczas drugiej prezentacji z bloku sponsorskiego Paweł Zdziech z firmy 7N odpowiedział na pytanie czy znajomość frameworka Angular opłaca się pod względami finansowymi? Z danych przedstawionych na wykresach i diagramach wygląda, że tak. ;)
Na trzeciej, ostatniej prezentacji sponsora Phil Nash z Twilio przeprowadził nas przez historię przechowywania danych w frontend'owych aplikacjach - zaczynając od cookies, poprzez local storage, Web SQL i skończywszy na IndexedDB. Phil zaprezentował główne wady i zalety każdego z tych rozwiązań, ale głównie skupił się na ostatnim, najnowszym pomyśle czyli właśnie IndexedDB. Umożliwia ona pracę aplikacji bez dostępu do internetu, zapewnia dobrą wydajność oraz transakcyjność operacji w asynchronicznym środowisku.
Na koniec bloku sponsorskiego zostały rozdane nagrody dla grup developerów rozwijających i reklamujących Angular'a oraz najlepszych projektów go wykorzystujących.
Po tej części przyszedł czas na obiad - dla każdego uczestnika konferencji została zapewniona pizza co wg mnie jest nie lada wyczynem biorąc pod uwagę, że samych słuchaczy było około 550. :o

Popołudniowy blok prezentacji rozpoczął Nir Kaufman przedstawiając wykorzystanie Redux'a w Angular 2. Zaczęliśmy od teorii, która wg prowadzącego jest najtrudniejsza. Redux opiera się na założeniu, że w aplikacji znajduje tylko jedno miejsca przechowujące jej stan - tzw. Store, który jest "single point of truth". Aby zmienić stan aplikacji użytkownik inicjuje Akcje (Action), które są przetwarzane przez "prawdziwe funkcje" ("pure functions", Reducers). Funkcje te zmieniają stan aplikacji w przewidywalny sposób - każde wykonanej tej samej funkcji z tymi samymi danymi wejściowymi zwróci identyczny wynik.
Po wprowadzeniu do samej koncepcji Redux'a przeszliśmy przez poszczególne elementy na przykładowej aplikacji przygotowanej przez prowadzącego.
Druga prezentacja z popłudniowego bloku dotyczyła historii tworzenia aplikacji dla Spidermana przez prowadzącego - Gerarda Sansa. Największa część całej historii od strony praktycznej dotyczyła wykorzystania Router'a z Angular 2.
Omówione zostały najczęściej używane funkcje takie jak lazy-loading oraz jego przeciwieństwo – preloading czy też ograniczanie dostępu do pewnych zasobów. Każda z dostępnych funkcji została przedstawiona na przykładzie specjalnie stworzonej aplikacji.
Ostatnia prezentacja przed krótką przerwą na kawę dotyczyła wykorzystania biblioteki RxJS. Narzędzie to pozwala na zastąpienia dostępnych w języku standardowych Promise'ów.
Promise'y pozwalają na zwrócenie tylko jednej wartości jednokrotnie, ich wykonywanie nie może zostać przerwane i dzieje się od razu po zleceniu akcji.
RxJS z kolei opiera się na Observable'ach do których użytkownik się subskrybuje i dopiero wtedy wykonują zleconą akcję przez nawet nieskończony czas. Aby przerwać wykonywanie zadania wystarczy tylko usunąć subskrypcję na danym Stream'ie. Dodatkową zaletą Observable oraz RxJS są operatory pozwalające na modyfikacji wyników otrzymywanych na nasłuchiwanym strumieniu takie jak "filter", "map", "reduce" itp.

Po ostatniej przerwie z powodu nieobecności Todda Motto nastąpiła zmiana kolejności prezentacji.
Shai Reznik rozpoczął końcowy blok krótszych prezentacji trwających jedynie 20 minut.
W swojej prelekcji wyjaśnił czym są moduły w Angular. Przez cały czas prezentacji towarzyszył nam bóbr budowniczy, który chcąc stworzyć swoją aplikację przy użyciu frameworka Angular musiał poznać jego strukturę składającą się z:
- Component;
- Service;
- Pipe (filter);
- Directive.
W każdej aplikacji musi istnieć jeden moduł główny (root module), reszta funkcjonalności aplikacji powinna być rozdzielona na mniejsze moduły odpowiedzialne za pojedyncze operacje. Service'y (providers) wstrzykiwane przez Injector są pobierane ze wspólnej puli.
Kolejną prezentację dotyczącą Progressive Angular 2 apps poprowadził Ciro Nunes. Progressive App to aplikacja webowa dostępna z pulpitu. Do głównych zalet tego typu aplikacji należą:
- możliwość pracy bez dostępu do sieci;
- możliwość natychmiastowego uruchomienia aplikacji z pulpitu;
- możliwość informowania użytkownika o zdarzeniach poprzez powiadomienia systemu operacyjnego.
W czasie prelekcji, na kolejnych slajdach Ciro omawiał fragmenty kodu wcześniej przygotowanej demonstracyjnej aplikacji.
Następnie Alex Lakatos przedstawił pragmatyczne podejście do oficjalnego stylu tworzenia kodu w aplikacjach tworzonych przy użyciu Angular'a 2. Zaprezentowane zostały poszczególne zasady zalecane przez twórców Angular'a wraz z komentarzem Alexa popartym doświadczeniem z pracy własnej oraz swojego zespołu.
Jednym z niewielu polskich akcentów na ng-poland 2016 była prelekcja Tomasza Duciny dotycząca stworzenia oraz wdrożenia aplikacji bankowej w Angular 1. Całą praca zajęła ponad 1 rok i już w trakcie wdrożenia aplikacja mogła zostać uznana za przestarzałą ponieważ na rynku dostępny był Angular 2.
Tomasz opowiedział historię swojego projektu rozdzielając ją na poszczególne etapy:
- wybór technologii i bibliotek;
- projektowanie architektury;
- programowanie (rozproszony zespół, zależności między zadaniami);
- refactoring.
Kolejną prezentację Uri Goldsteina dotyczącą GraphQL niestety musiałem ominąć w większej części. Ogólnie wynika z niej, że GraphQL jest przyszłościowym sposobem komunikacji w aplikacjach klient-serwer i posiada sporo ulepszeń w stosunku do REST'a jak typowanie czy zapytania grupowe.
Na koniec konferencji Sebastian Witalec zaprezentował NativeScript - bibliotekę pozwalająca na tworzenie aplikacji natywnych. W czasie prelekcji poznaliśmy główne założenia biblioteki oraz podstawowe kontrolki UI wraz z przykładowym kodem.
Jednak oprócz aplikacji mobilnych NativeScript umożliwił Sebastianowi stworzenie bezprzewodowego kontrolera do obsługi robotów w oparciu o protokół Bluetooth. W czasie prezentacji poznaliśmy historię oraz większe perypetie jakie przydarzyły się Sebastianowi w czasie tworzenia aplikacji.

Konferencję ng-poland oceniam bardzo pozytywnie. Wszystkie elementy składowe przygotowane zostały na najwyższym poziomie, począwszy od rejestracji, cateringu i skończywszy na najważniejszym elemencie czyli prezentacjach. Każda z nich była pełna ciekawostek pod względem merytorycznym a profesjonalni prelegenci dodawali do nich pełno humoru jeszcze bardziej ulepszających ich odbiór.
Polecam wyszukanie materiałów z prezentacji w internecie i poznanie najbardziej interesujących tematów na własną rękę.
Jeśli w następnym roku będzie miała odbyć się kolejna edycja konferencji to każdemu developer'owi mającemu nawet niewielką styczność z frontendem polecam wzięcie udziału i poznanie innego środowiska od kuchni.

1 comment:

  1. You people have actually provided the best blogs that are easy to understand for the folks.tubemate mp3 + youtube + download

    ReplyDelete