React Warsaw #1

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

• Start: 18:30
• Koniec: 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

• Slajdy: React.js Wprowadzenie

Co to jest React.js?

Biblioteka do budowania UI.

Cechy

• komponenty tworzymy deklaratywnie
• bazuje na virtual dom oraz jsx

Problem Facebooka: 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 argumentu.

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

• Slajdy: Intro to Flux
• 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)

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, odrazu 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

• https://greetabl.com/builder
• https://milanstyle.com/

React Dev Tools (Google Chrome)

Kiedy potrzebujemy używać Fluxa?

• kiedy robimy Single Page App (aby wszystko było 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

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