Aplikacje internetowe real-time w oparciu o React/Redux

APLIKACJE INTERNETOWE REAL-TIME
W OPARCIU O REACT / REDUX

REPOZYTORIUM GIT
git clone https://github.com/GrandParade/react-redux-workshops.git
cd react-redux-workshops
npm install
lub: http://bit.do/workshop-repo

ECMASCRIPT 6 (AKA 2015)
VIRTUAL DOM
WEB COMPONENTS
REACT
REDUX
DZISIEJSZE TEMATY

MAŁE, PRZYJEMNE RZECZY
1 for (let i = 0; i < 10; i++) {
2 console.log(i) // 0...9
3 }
4 console.log(i) // ReferenceError
5
6 const c = 'xyz'
7 const x = {
8 a: 10,
9 b: 10,
10 [c]: 15
11 }
12 // x = { a: 10, b: 10, xyz: 15 }
13
14
15 const { a, b } = x
16 // a = 10, b = 20
17
18
19 let pow = (a) => a * a

// format.js
1 export function money(m) {
2 return parseFloat(m).toFixed(2)
3 }
4
5 export default function format(str, type) {
6 if (type === 'money') {
7 return money(str)
8 } else {
9 return str
10 }
11 }
// index.js
1 import format from './format'
2 console.log(format(30.5, 'money'))
3
4
5 import { money } from './format'
6 console.log(money(30))
7
8
9 import { money as formatMoney } from './format'
10 console.log(formatMoney(14.444))
MODUŁY ES6

1 class Terrain {
2 constructor(types = []) {
3 this.types = types;
4 }
5
6 get avoidable() {
7 return this.types.includes('avoidable')
8 }
9
10 set avoidable(status) {
11 let index = this.types.indexOf('avoidable')
12
13 if (status && index === -1) {
14 this.types.push(status)
15 } else if (!status && index !== -1) {
16 this.types.splice(index, 1)
17 }
18 }
19
20 static water() {
21 return new Terrain([ 'avoidable' ])
22 }
23 }
24
25 class Water extends Terrain {
26 constructor() {
27 super([ 'avoidable' ])
28 }
KLASY

GENERATORY
PROXY
REST / SPREAD OPERATOR
DEKORATORY
ASYNC / AWAIT
OBSERVABLE
BIND OPERATOR (STAGE 0)
POZOSTAŁE NOWOŚCI

- Oszczędza zasobożerne operacje
na DOM
- Drzewo elementów może być
renderowane bez przeglądarki
- React
- Mithril
- virtual-dom (np. w Mercury)
VIRTUAL DOM
http://calendar.perfplanet.com/2013/diff/
VIRTUAL DOM

- Natywnie
- Shadow DOM
- Importy HTML
- Własne elementy
- Podejścia
- Polymer
- React
- Angular 2
www.webcomponents.org
WEB COMPONENTS
WEB COMPONENTS

- Tylko WIDOK
- Szybko rozwijana technologia
- Reużywalność komponentów
KILKA SŁÓW O REACT
REACT

- Korzystamy z realnych danych
- Nie zajmujemy się stylami
- Zaczniemy od widoków
- Przeniesiemy dane jako stan aplikacji
REZULTAT WARSZTATÓW
APLIKACJA

- Jak stworzyć komponent
- Podstawy JSX
- DX Reacta
- Jak przekazać propsy do komponentu
PIERWSZY KOMPONENT
APLIKACJA (REACT) - KROK 1

- Jak stworzyć komponent dla każdego elementu tablicy
- Jak React optymalizuje tablice obiektów
LISTA ELEMENTÓW, PSEUDO-PĘTLE

- Jak działa stan komponentu
- Jak podpiąć interwały, zaktualizować DOM
- Cykl życia komponentu
DYNAMICZNY KOMPONENT - ZEGAR

- Użyjemy React dla SVG
- Pokażemy incydenty na osi czasu
SVG TIMELINE

- Nasłuchiwanie na zdarzenia DOMu w React
INTERAKCJA Z UŻYTKOWNIKIEM

- Jak używać dodatku React Perf
- Cykl życia komponentu
OPTYMALIZACJA KOMPONENTÓW

- Wysyłamy wiadomość (zwyczajny łańcuch znaków) i wyświetlamy listę wiadomości
- Są przygotowane style dla chatu:
- .chat - główny blok chatu
- .chat__messages - lista wiadomości
- .chat__messages > li - wiadomość
- .chat__messages > li > strong - nazwa użytkownika
- .chat__form - formularz do wysyłania wiadomości, a w środku button i input
ZADANIE - CHAT
APLIKACJA (REDUX) - KROK 7

- Jedna z implementacji Flux
- Uni-directional flow
- Jeden stan dla całej aplikacji
REDUX
REDUX

- Jednokierunkowy przepływ danych zapewnia kolejność działań
- Przy takim samym stanie aplikacji zadziała ona tak samo
UNI-DIRECTIONAL FLOW
REDUX
Actions Reducers Store View
subscribe
dispatch
Any other
data sources
dispatch

- Definiują informację która jest potrzebna do wykonania danej akcji
- Jedyną obowiązkową informacją jest type nazwa akcji
- Action creators budują akcję na podstawie parametrów
AKCJE
REDUX
subscribe
dispatch
{
type: 'new incident',
incident: {
playtime: 6000,
name: 'goal',
team: 'home'
}
}

- Wykonują akcję zmieniając stan całej aplikacji
- Po zmianie stanu dobrą praktyką jest stworzenie nowego obiektu ze stanem aplikacji
REDUKTORY (REDUCERS)
REDUX
subscribe
dispatch
function (state, action) {
if (action.type === 'add incident') {
return {
...state,
incidents: state.incidents.concat(action.incident)
}
}
return state
}

- Centralny punkt danych
- Pozwala na redukcję danych, subskrypcję do zmian i wykonywanie akcji
STORE
REDUX
subscribe
dispatch
store = createStore(function (action, state) {
console.log('Action', action.type, 'executed')
return state
}, {})
store.dispatch({ type: 'match received' })

- Stworzyliśmy store w którym przechowamy incydenty
- Ręcznie wykonamy akcję i zobaczymy jak działa Redux DevTools
TWORZENIE STORE’A
subscribe
dispatch

- Napisaliśmy kreator akcji i reduktor związane z incydentami
- Ręcznie wykonujemy akcję i sprawdzamy stan aplikacji
ACTION CREATOR I REDUCER
subscribe
dispatch

- Korzystając z react-redux połączymy nasze komponenty z Reduxem
- Połączymy się z serwerem z danymi za pomocą WebSocketów
- Wyświetlimy informacje o meczu
POŁĄCZENIE Z WIDOKIEM!
subscribe
dispatch

- Wysyłamy anonimową wiadomość do użytkowników i wyświetlamy odebrane
- Przez WebSocket jest udostępniony event message, który dostarcza wiadomość, a
emitować nowe wiadomości można tym samym eventem. Wiadomość jest zwyczajnym
łańcuchem znaków.
ZADANIE - CHAT MIĘDZY UŻYTKOWNIKAMI
subscribe
dispatch

WWW.GRANDPARADE.PL
Dawid Rusnak
github.com/rangoo94
Lista mailingowa:
http://bit.do/react-workshop

Aplikacje internetowe real-time w oparciu o React/Redux

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Aplikacje internetowe real-time w oparciu o React/Redux

Similaire à Aplikacje internetowe real-time w oparciu o React/Redux (20)

Aplikacje internetowe real-time w oparciu o React/Redux