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.gitcd react-redux-workshops

npm install

lub: http://bit.do/workshop-repo

https://github.com/GrandParade/react-redux-workshops.git

http://bit.do/workshop-repo

ECMASCRIPT 6 (AKA 2015)VIRTUAL DOM

WEB COMPONENTSREACTREDUX

DZISIEJSZE TEMATY

MAŁE, PRZYJEMNE RZECZY

ECMASCRIPT 6 (AKA 2015)

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 } 29 }

KLASY


GENERATORYPROXY

REST / SPREAD OPERATORDEKORATORY

ASYNC / AWAITOBSERVABLE

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

http://webcomponents.org/

- 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 Viewsubscribe

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


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


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


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



dispatch

- Napisaliśmy kreator akcji i reduktor związane z incydentami

- Ręcznie wykonujemy akcję i sprawdzamy stan aplikacji

ACTION CREATOR I REDUCER



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!



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



dispatch

WWW.GRANDPARADE.PL

Dawid Rusnakgithub.com/rangoo94

Lista mailingowa:http://bit.do/react-workshop

Aplikacje internetowe real-time w oparciu o React/Redux

Technology

Transcript of Aplikacje internetowe real-time w oparciu o React/Redux