React-Einführung

React-Einführung auf dem TYPO3Camp Mitteldeutschland mit Live Programming.

Video: https://www.youtube.com/watch?v=mUjjh4ic24k&t=538

Transcript

1. React TYPO3Camp Mitteldeutschland 25./26.01.2019
2. Sebastian Kurfürst Mitgründer, CTO sandstorm Neos Team Member früher TYPO3 Core Team @skurfuerst
3. What is your background? Experience with React? Do you know what Redux is? *you?
5. Wartbarkeit *Skalierbarkeit Stabilität Performance Erweiterbarkeit
6. Wartbarkeit Stabilität Performance Erweiterbarkeit
7. React
8. React / Redux Basics
9. ACTIONS Reselect Selectors VIEW CONTAINER COMPONENT COMPONENT COMPONENT STATE STORE
10. y = f(x)
11. DOM = react(state) newState = f(oldState, action) ACTIONS Reselect Selectors VIEW CONTAINER COMPONENT COMPONENT COMPONENT STATE STORE
12. demo
14. state?
15. state is immutable
16. Wartbarkeit Pure Functions Immutability Stabilität Pure Functions Immutability Performance Pure Functions Immutability Erweiterbarkeit
17. predictable high performance optimizable *Why use React?
18. predictable
19. high performance
20. DOM = Document Object Model browser DOM is slow abstraction of the DOM to reduce number of operations internal performance optimization *virtual DOM
21. Cached Computed Properties for Redux *reselect CurrentlyEditedUser CurrentlyEditedUserId Users
22. *reselect 1 const contextForNodeLinking = createSelector( 2 [ 3 $get('currentlyEditedUserId'), 4 $get('users') 5 ], 6 function( 7 currentlyEditedUserId, 8 users 9 ){ 10 return users[currentlyEditedUserId]; 11 } 12 );
23. optimizable quite fast by default, can be fine-tuned to be really fast
24. Wartbarkeit Pure Functions Immutability reselect Stabilität Pure Functions Immutability Performance Pure Functions Immutability virtual DOM reselect Erweiterbarkeit
25. Performance
27. class SideBar extends Component { shouldComponentUpdate(nextProps) { // somehow compare nextProps and this.props, // and return true if update is needed } }
28. state data UI sidebar collapsed = true ... ... ... state.UI.sidebar.collapsed = false collapsed = false deep comparison needed! mutating state
29. state data UI sidebar collapsed = true ... ... ... sidebarState = {...sidebarState, collapsed: false}; uiState = {...uiState, sidebar: sidebarState}; state = {...state, ui: uiState}; collapsed = false reference comparison is enough! immutable state sidebar UI state !! great performance !!
30. class SideBar extends Component { shouldComponentUpdate(nextProps) { return this.props.sidebar === nextProps.sidebar; } }
31. embrace Immutable State as it allows performant change detection
32. embrace PureComponent class SideBar extends PureComponent { // - component is like a pure function, // depending only on its input props. // - Automatically shallowly compares // props by reference (like we have // just seen) }
33. figure out which components rerender
35. figure out why components rerender import debugReasonForRendering from '@neos-project/debug-reason-for-rendering'; @debugReasonForRendering export default class Inspector extends PureComponent { // ...
37. embrace reselect Cached Computed Properties for Redux CurrentlyEditedUser CurrentlyEditedUserId Users
38. *reselect 1 const contextForNodeLinking = createSelector( 2 [ 3 $get('currentlyEditedUserId'), 4 $get('users') 5 ], 6 function( 7 currentlyEditedUserId, 8 users 9 ){ 10 return users[currentlyEditedUserId]; 11 } 12 );
40. Events
41. Donnerstag, 14. März, 14:00-18:00 kostenfrei
43. neoscon.io 10% Rabattcode: Neos-Kickstart 10.-11.05.2019
44. Summary
45. www.neos.io