Przygoda z React.jsCzyli coś więcej niż technologia

Czym jest React?• Biblioteka do budowania dynamicznych widoków

stworzona przez Facebook. Działa w przeglądarce i na urządzeniach mobilnych (React Native)

• Nie zajmuje się zarządzaniem danymi.

• Budujemy interfejs z logicznie wydzielonych części zwanych komponentami. Komponenty mają stan i właściwości.

• Nie mówimy jak przejść ze stanu A do stanu B. Nasz widok jest funkcją stanu i właściwości (deklaratywność)

Czym jest React?• Biblioteka do budowania dynamicznych widoków

stworzona przez Facebook. Działa w przeglądarce i na urządzeniach mobilnych (React Native)

• Nie zajmuje się zarządzaniem danymi.

• Budujemy interfejs z logicznie wydzielonych części zwanych komponentami. Komponenty mają stan i właściwości.

• Nie mówimy jak przejść ze stanu A do stanu B. Nasz widok jest funkcją stanu i właściwości (deklaratywność)

Czym jest React?

• Sporą społecznością programistów ze wspólnymi celami.

• “Pierwszą działką narkotyku” (gateway drug)

• Inspirującym modelem programowania.

Czym jest React?Rozwiązaniem (niełatwych) problemów!

• Przejścia pomiędzy stanami to najtrudniejsza część dynamicznych widoków.

• Ponowne użycie kodu UI jest trudne.

• Chcemy skorzystać z już istniejących rozwiązań (wtyczki do jQuery).

• Nie możemy przerabiać całego swojego kodu na inną technologię.

Problemy pozostają…

• Możemy budować interfejsy w miły sposób.

• To JavaScript.

• Jak przechowywać dane?

• Optymalizacja

Jak przechowywać dane?

• Mamy stan komponentów. OK dla małych aplikacji.

• Chcemy oddzielać drzewo stanu od drzewa interfejsu.

• MVC niespecjalnie się sprawdza…

Ale…

• Wczesne implementacje architektury Flux opierały się na imperatywnych rozwiązaniach.

• Eksplozja bibliotek - każda z nieco innym przypadkiem użycia.

• Społeczność lubi deklaratywność.

Redux

• Minimalne API.

• Działanie oparte na czystych funkcjach.

• Realizuje podobne idee jak Flux w inny sposób.

Jak fajniej pisać kod?

• API setState, w przeciwieństwie do wielu frameworków nie zakłada nic na temat tego jak zaktualizujesz swoje dane.

Trwałość danych

• Zwracaj nowe wersje danych, zamiast modyfikować stare.

• Niewydajne. Ale łatwe w nowoczesnym JavaScript.

• Odpada wiele problemów i ciężkich do wyłapania bugów.

Immutable.js

• Istnieją języki, które domyślnie posiadają tylko trwałe struktury danych.

• Tworzenie nowych wersji danych jest w tych językach wydajne.

• Na podstawie pomysłów z tych języków powstała biblioteka Immutable.

ECMAScript 2016• Nowy standard języka.

• Wprowadza klasy i wiele usprawnień (cukru składniowego do JavaScriptu)

• Wbudowana składnia do modularyzacji.

• Poprawnie użycie wymaga transpilacji. Modularyzacja kodu wymaga bundlera. Rozwiązują to narzędzia Webpack oraz Babel.

create-react-app

• Jedna komenda i masz postawione środowisko, które po prostu działa.

• Możesz w dowolnej chwili wróćić do konfiguracji ręcznej (eject)

• Gotowe do wykorzystania nawet na produkcji.

Wciąż są problemy…

• Animacje. Praca w toku - nowy algorytm renderujący React powinien umożliwić sporą poprawę.

• Piekło i błogosławieństwo małych modułów.

• Redux: Łatwiejsze zarządzanie efektami ubocznymi.

Pierwsze kroki?

• React:

• https://github.com/arkency/reactjs_koans

• http://survivejs.com/react/introduction/

• https://facebook.github.io/react/docs/getting-started.html

Pierwsze kroki?

• Redux:

• http://redux.js.org/docs/basics/

• https://egghead.io/courses/getting-started-with-redux

• https://egghead.io/courses/building-react-applications-with-idiomatic-redux

React.js Pudelek• Dan Abramov (twórca Redux) - https://twitter.com/dan_abramov

• Sebastian Markbåge (React Core) - https://twitter.com/sebmarkbage

• Sebastian McKenzie (twórca Babel) - https://twitter.com/sebmck

• Tom Dale (Ember.js) - https://twitter.com/tomdale

• Michel Weststrate (MobX) - https://twitter.com/mweststrate

• Michael Jackson (React-Router) - https://twitter.com/mjackson

React.js Pudelek• Ryan Florence (React-Router) - https://twitter.com/

ryanflorence

• James Kyle (FlowType) - https://twitter.com/thejameskyle

• Lee Byron (Immutable) - https://twitter.com/leeb

• Jay Phelps (RxJS / Netflix) - https://twitter.com/_jayphelps

• David Nolen (Om/next) - https://twitter.com/swannodette

Źródełka

• Medium

• Twitter

• ReactConf (YouTube)

• React Europe (YouTube)

Najlepszy moment na wejście w świat React.js?

Dzisiaj.