przygoda z react - programistokprogramistok.org/files/prezentacje/przygoda-z-react.pdf · czym jest...
TRANSCRIPT
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.
• 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