Download to read offline
![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](https://image.slidesharecdn.com/gp-react-redux-slideshare-160312095207/75/Aplikacje-internetowe-real-time-w-oparciu-o-React-Redux-4-2048.jpg)
![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
ECMASCRIPT 6 (AKA 2015)](https://image.slidesharecdn.com/gp-react-redux-slideshare-160312095207/75/Aplikacje-internetowe-real-time-w-oparciu-o-React-Redux-6-2048.jpg)
![[DPTO] Gilbert Łaskawiec - React.js – nowa odsłona aplikacji frontendowych](https://cdn.slidesharecdn.com/ss_thumbnails/prezentacjadptoreactpoprawiona-180321093023-thumbnail.jpg?width=640&height=640&fit=bounds)
Aplikacje internetowe real-time w oparciu o React/Redux
- 1. APLIKACJE INTERNETOWE REAL-TIME WOPARCIU O REACT / REDUX
- 2. REPOZYTORIUM GIT git clonehttps://github.com/GrandParade/react-redux-workshops.git cd react-redux-workshops npm install lub: http://bit.do/workshop-repo
- 3. ECMASCRIPT 6 (AKA2015) VIRTUAL DOM WEB COMPONENTS REACT REDUX DZISIEJSZE TEMATY
- 4. MAŁE, PRZYJEMNE RZECZY ECMASCRIPT6 (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
- 5. // format.js 1 exportfunction 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 ECMASCRIPT 6 (AKA 2015)
- 6. 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 ECMASCRIPT 6 (AKA 2015)
- 7. GENERATORY PROXY REST / SPREADOPERATOR DEKORATORY ASYNC / AWAIT OBSERVABLE BIND OPERATOR (STAGE 0) POZOSTAŁE NOWOŚCI ECMASCRIPT 6 (AKA 2015)
- 8. - Oszczędza zasobożerneoperacje 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
- 9. - Natywnie - ShadowDOM - Importy HTML - Własne elementy - Podejścia - Polymer - React - Angular 2 www.webcomponents.org WEB COMPONENTS WEB COMPONENTS
- 10. - Tylko WIDOK -Szybko rozwijana technologia - Reużywalność komponentów KILKA SŁÓW O REACT REACT
- 11. - Korzystamy zrealnych danych - Nie zajmujemy się stylami - Zaczniemy od widoków - Przeniesiemy dane jako stan aplikacji REZULTAT WARSZTATÓW APLIKACJA
- 12. - Jak stworzyćkomponent - Podstawy JSX - DX Reacta - Jak przekazać propsy do komponentu PIERWSZY KOMPONENT APLIKACJA (REACT) - KROK 1
- 13. - Jak stworzyćkomponent dla każdego elementu tablicy - Jak React optymalizuje tablice obiektów LISTA ELEMENTÓW, PSEUDO-PĘTLE APLIKACJA (REACT) - KROK 2
- 14. - Jak działastan komponentu - Jak podpiąć interwały, zaktualizować DOM - Cykl życia komponentu DYNAMICZNY KOMPONENT - ZEGAR APLIKACJA (REACT) - KROK 3
- 15. - Użyjemy Reactdla SVG - Pokażemy incydenty na osi czasu SVG TIMELINE APLIKACJA (REACT) - KROK 4
- 16. - Nasłuchiwanie nazdarzenia DOMu w React INTERAKCJA Z UŻYTKOWNIKIEM APLIKACJA (REACT) - KROK 5
- 17. - Jak używaćdodatku React Perf - Cykl życia komponentu OPTYMALIZACJA KOMPONENTÓW APLIKACJA (REACT) - KROK 6
- 18. - 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
- 19. - Jedna zimplementacji Flux - Uni-directional flow - Jeden stan dla całej aplikacji REDUX REDUX
- 20. - Jednokierunkowy przepływdanych 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
- 21. - 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 Actions Reducers Store View subscribe dispatch { type: 'new incident', incident: { playtime: 6000, name: 'goal', team: 'home' } }
- 22. - Wykonują akcjęzmieniając stan całej aplikacji - Po zmianie stanu dobrą praktyką jest stworzenie nowego obiektu ze stanem aplikacji REDUKTORY (REDUCERS) REDUX Actions Reducers Store View subscribe dispatch function (state, action) { if (action.type === 'add incident') { return { ...state, incidents: state.incidents.concat(action.incident) } } return state }
- 23. - Centralny punktdanych - Pozwala na redukcję danych, subskrypcję do zmian i wykonywanie akcji STORE REDUX Actions Reducers Store View subscribe dispatch store = createStore(function (action, state) { console.log('Action', action.type, 'executed') return state }, {}) store.dispatch({ type: 'match received' })
- 24. - Stworzyliśmy storew którym przechowamy incydenty - Ręcznie wykonamy akcję i zobaczymy jak działa Redux DevTools TWORZENIE STORE’A APLIKACJA (REDUX) - KROK 8 Actions Reducers Store View subscribe dispatch
- 25. - Napisaliśmy kreatorakcji i reduktor związane z incydentami - Ręcznie wykonujemy akcję i sprawdzamy stan aplikacji ACTION CREATOR I REDUCER APLIKACJA (REDUX) - KROK 9 Actions Reducers Store View subscribe dispatch
- 26. - Korzystając zreact-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! APLIKACJA (REDUX) - KROK 10 Actions Reducers Store View subscribe dispatch
- 27. - 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 APLIKACJA (REDUX) - KROK 11 Actions Reducers Store View subscribe dispatch
- 28.