React-Einführung

 React-Einführung

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

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

30c0b6f50f67163bee8500aa4115d126?s=128

Sebastian Kurfürst

January 26, 2019
Tweet

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?
  4. None
  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

  13. None
  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

  26. None
  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

  34. None
  35. figure out why components rerender import debugReasonForRendering from '@neos-project/debug-reason-for-rendering'; @debugReasonForRendering

    export default class Inspector extends PureComponent { // ...
  36. None
  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 );
  39. None
  40. Events

  41. Donnerstag, 14. März, 14:00-18:00 kostenfrei

  42. None
  43. neoscon.io 10% Rabattcode: Neos-Kickstart 10.-11.05.2019

  44. Summary

  45. www.neos.io