:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

ReactJS Warsaw #1


Na rynku pojawiła się nowa inicjatywa "ReactJS Warsaw" - która (prawdopodobnie) będzie zrzeszać, developerów JavaScript zainteresowanych frameworkiem autorstwa Facebook-a.
Więcej informacji o spotkaniu: meetup.com/React-js-Warsaw/events/227108785/

Poniżej chciałbym przedstawić moje osobiste doświadczenia w związku z pierwszym spotkaniem.

ReactJS Warsaw

Spotkaliśmy się w interesującej lokalizacji "Sienna Training Centre" (Sienna 73).

Pierwsze spotkanie zawsze stoi pod znakiem zapytania dla organizatorów.

  • Czy przyjdą ludzie?
  • Ile ich przyjdzie?
  • Czy przygotowaliśmy odpowiednią ilość miejsc?

Tym razem organizatorzy podeszli do sprawy inaczej niż inne organizacje, zarezerwowali malutką salę "Jowisz", czego wynikiem było ciągłe wnoszenie krzesełek.

Organizatorzy spodziewali się 20-25 osób max.
Obecnych na pierwszym spotkaniu było ok. 50.

Talk #0 - Występ sponsorski [PL] Marcin Adamowicz

18:30 - 18:40

Sponsor spotkania "ASTEK Polska" - główny sponsor.
Prelegent zachęcał do współpracy w swojej firmie.

Talk #1: ReactJS Wprowadzenia [PL] Marcin Mieszek

Co to jest React.js?

Biblioteka do budowania UI.

Cechy

  • komponenty tworzymy deklaratywnie
  • bazuje na virtual dom oraz jsx

Problem Facebook-a: 3 duże komponenty

  • sidebar
  • powiadomienia w top menu
  • wiadomości w lewym sidebarze

Jak okiełznać te wszystkie zmiany stanu? Trzeba było wymyślić jakiś sposób.

Deklaratywne komponenty

Kod w JSX jest bardziej czytelny niż wersja przetłumaczona. Zachowania i widok w jednym miejscu.

Virtual DOM - główna zaleta biblioteki

Operacje na DOMie są kosztowne (wyszukiwanie, zmienianie)
Za każdym razem kiedy zmieni się komponent, React trzyma w pamięci obecną strukturę oraz poprzednią, następnie szuka jak najmniejszej liczby operacji, aby zaktualizować zwykły DOM.

Przepływ danych

  • dane przekazujemy w dół, poprzez property-isy (właściwości)
  • zdarzenia natomiast, są delegowane w górę

Przekazanie danych - sprawa oczywista.
Aby komponent zagnieżdżony mogły operować na obecnym stanie, przekazujemy im callbacki.

State & Props

  • jeśli komponent ma tylko pobrać dane i wyświetlić, to używamy props (właściwości)
  • stan jest używany do przechowywania danych zmienionych przez dany komponent, np. fakt kliknięcia w przycisk
  • nie trzymamy innych stanów

Refs

  • referencja do elementów w HTML
<input refs="inputName" />

Children

  • możemy dostawać się do zagnieżdżonych kontenerów za pomocą this.props.children

Cykl życia

  • jeśli komponent ma jakiś stan początkowy, wtedy ten stan możemy pobrać przez getInitialState
  • domyślna wartość właściwości - getDefaultProps
  • componentDidMount - komponent został wyrenderowany i chcemy operować na stanie
18:58 - warsztat

React.js ma jednokierunkowy przepływ danych.
Świetnie współpracuje z Immutable (niezmiennymi) danymi.
Np. kiedy to Array.prototype.push zwraca nową listę zadań.

Aby podpiąć się pod zdarzenia DOM, to korzystamy z atrybutów on*, np.

<button onclick="this.addTask"></button>

Pojawił się problem, ponieważ, w bardziej zaawansowanej strukturze przekazywanie parametrów, odbywa się przez przekazanie tych samych propertisów przez kilka komponentów. Rozwiązaniem jest architektura Flux.

React.js nie dostarcza gotowych komponentów.

Angular.js można rozszerzyć tak, aby działał jak React.js korzystając ze słabo udokumentowanego parametru.

Zaczynamy: 18:41
Koniec talków z pytaniami: 19:30 (5 ostatnich minut to pytania)

Talk #2: Flex - intro i przykłady wykorzystania [PL] Damian Legawiec

Start: 19:47
Kontakt: @damianlegawiec
Współzałożyciel "Spark Solutions".

Co to jest?

  • nie jest to framework
  • biblioteka? tak jakby
  • schemat działania przepływu informacji
  • nie jest to MVC - zupełnie inne działanie - bardziej przemyślany dla UI
  • Flux nie narzuca niczego
  • może być używany do przechowywania danych z ORM
  • zwykły obiekt JS, który zostaje wzbogacony o zdarzenia (EventEmitter albo MicroEvent)
One way data binding!

Framework Agnostic

  • można używać z Angular.js oraz Ember.js
  • najlepiej jednak działa z React.js

Flux

Zasada działania:

Action → Dispatcher → Store → View → Action → Dispatcher

Store

  • Nie jest to model ani kolekcja
  • Konkretne - gdzie przechowujemy stan aplikacji

Action

  • wywoływane są z komponentów Reactowych
  • przekazują parametry - payload = [nazwa, parametry]

Dispatcher

  • może być tylko jeden
  • przekazywanie akcji do Store-a

View

  • Smart Components (bezpośrednio podłączone, o drazu widzą zmiany)
    • zależne od stanu aplikacji
    • jeśli będzie akcja to prerenderowane
    • dane są przechowywane w State (nie są przekazywane prze props-y
  • Dump Components (tylko do renderowania danych)
    • tylko wyświetlają dane
    • nie są zależne od Store-a

Example

React Dev Tools (Google Chrome)

Kiedy potrzebujemy używać Fluxa?

  • kiedy robimy Single Page App (aby wszystko bylo ze sobą zgrane)
  • zaawansowane UI

Kiedy nie używać?

  • jeśli zaczynacie naukę React.js
  • lepiej zacząć od prostych komponentów
  • prosty komponent na statycznej stronie
Zbiór architektonicznych wzorców

Implementacje

  • Flux - implementacja Facebook-owa
  • Redux - sporo upraszcza, boilerplate jest dużo mniejszy
Na start lepiej zacząć od Flux.
Nie polecam używać examples/ w Facebook repo. Damian Legawiec

Po zaznajomieniu się z Flux, to 2 opcje do wyporu

  • Redux (aby zaryzykować?, upraszcza wiele elementów)
  • Reflux (konserwatywne)
  • Alt (konserwatywne)

Future Reading List

  1. facebook.github.io/flux/docs/overview.html
  2. blog.andrewray.me/flux-for-stupid-people/ - dużo lepszy niż oficjalny poradnik
Koniec: 20:15 - czas na pytania

Ile rzeczy potrzebuje aby zrobić SPA?

  • React.js - czysty oraz React.js Router (można pominąć Fluxa)
  • Ekosystem wokół React.js nie jest tak skompresowana

Po co jest Dispatcher?

  • aby nie dało si zrobić za dużo naraz
  • aby można było w łatwy sposób myśleć o zmianach
  • aby tylko jedna zmiana wpływała na stronę

Czy używamy `prerender` w React.js?

  • tak, aby poprawić SEO
  • microformats, dla e-commerce-owych stron
  • Rect.js renderuje, a potem zapamiętuje ten wyrenderowany content
  • nie ma loading screenu
  • user dostaje od razu wszystko
  • Googlebot nie zdegraduje nam strony
  • Googlebot podąży po wygenerowanych linkach
Koniec z pytaniami: 20:35