Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Are statecharts the next big UI paradigm?

34.244 Aufrufe

Veröffentlicht am

Statecharts (aka state-machines) have been used in UI development for decades. This talk will explain how they work in comparison with other state-management paradigms such as Redux. I will dive into the pros and cons of statecharts and provide in depth examples of how they can be used with React.

Veröffentlicht in: Technologie
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ♥♥♥ https://tinyurl.com/rockhardxxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Are statecharts the next big UI paradigm?

  1. 1. Are statecharts the next big UI paradigm?
  2. 2. Luca Matteis github.com/lmatteis @lmatteis Hootsuite office in Rome, Italy
  3. 3. Designers build images of each possible state of our UI.
  4. 4. When we convert these images (or states) into code we lose the high-level understanding of our app.
  5. 5. var isLoggedIn, isInProgress, isSuccessful; // display the form isLoggedIn = false; isInProgress = false; isSuccessful = false; // request in flight isLoggedIn = false; isInProgress = true; isSuccessful = false; // display a successful message isLoggedIn = true; isInProgress = false; isSuccessful = true; // display welcome message + links isLoggedIn = true; isInProgress = false; isSuccessful = false; var isRequestFinished, isInProgress, isSuccessful, isFailed; if (isInProgress) { // request in flight, render a spinner } else if (isRequestFinished) { if (isSuccessful) { // request successful, render a message } else if (isFailed) { // render error message + try again link } else { // render welcome message + links } } else { // waiting for input, render login form }
  6. 6. As our app grows, understanding which section is responsible for each state becomes increasingly difficult.
  7. 7. Not all questions can be answered using a set of images.
  8. 8. • What if the user clicks the submit button repeatedly? 😛 • What if the user wants to cancel the submit while it's in-flight? ✈ • What if the user mischievously enables the disabled button? 😕 • Is there any indication that the request is fetching? 🙄 • What happens if there's an error? Can the user resubmit the form? ❓ • What if the user submits and then clicks a different page? What should happen? 🤷
  9. 9. It seems we don’t have a technological problem. We have a thinking problem.
  10. 10. How do we set ourselves to answer these questions, and be able to have both our design and our code depend on the answers?
  11. 11. Statecharts
  12. 12. Awake Day simulator Dressed Fed Ready Work Cafe Home Asleep Alarm Dress Eat Eat Dress GoToWork Think Yawn Coffee GoHome Read WatchTv
  13. 13. Empty form Submitting SUBMIT RESOLVE REJECT Welcome page Error page REGISTER REGISTER LOGOUT Login page REGISTER
  14. 14. Statecharts have 3 important concepts: 1) Hierarchical (nested) states 🌳 2) History states ( 3) Parallel states ⏰
  15. 15. Empty form Submitting SUBMIT RESOLVE REJECT Welcome page Error page REGISTER REGISTER LOGOUT Login page REGISTER
  16. 16. Empty form Submitting SUBMIT RESOLVEREJECT Welcome page Error page REGISTER LOGOUT Login page Hierarchical (nested) states 🌳
  17. 17. Unclustering Welcome page Login page GetTickets TicketsRESOLVE REFRESH Empty form Submitting SUBMIT
  18. 18. History states Welcome page GetTickets TicketsRESOLVE REFRESH H
  19. 19. Parallel states Welcome page GetTickets TicketsRESOLVE REFRESH Sidebar Init Loading SEARCH RESOLVE Items
  20. 20. These representations can drive both our design and our code.
  21. 21. • What if the user clicks the submit button repeatedly? 😛 • What if the user wants to cancel the submit while it's in-flight? ✈ • What if the user mischievously enables the disabled button? 😕 • Is there any indication that the request is fetching? 🙄 • What happens if there's an error? Can the user resubmit the form? ❓ • What if the user submits and then clicks a different page? What should happen? 🤷 Empty form Submitting SUBMIT
  22. 22. • What if the user clicks the submit button repeatedly? 😛 • What if the user wants to cancel the submit while it's in-flight? ✈ • What if the user mischievously enables the disabled button? 😕 • Is there any indication that the request is fetching? 🙄 • What happens if there's an error? Can the user resubmit the form? ❓ • What if the user submits and then clicks a different page? What should happen? 🤷 Empty form Submitting SUBMIT SUBMIT
  23. 23. • What if the user clicks the submit button repeatedly? 😛 • What if the user wants to cancel the submit while it's in-flight? ✈ • What if the user mischievously enables the disabled button? 😕 • Is there any indication that the request is fetching? 🙄 • What happens if there's an error? Can the user resubmit the form? ❓ • What if the user submits and then clicks a different page? What should happen? 🤷 Empty form Submitting SUBMIT SUBMIT CANCEL
  24. 24. • What if the user clicks the submit button repeatedly? 😛 • What if the user wants to cancel the submit while it's in-flight? ✈ • What if the user mischievously enables the disabled button? 😕 • Is there any indication that the request is fetching? 🙄 • What happens if there's an error? Can the user resubmit the form? ❓ • What if the user submits and then clicks a different page? What should happen? 🤷 Empty form Submitting SUBMIT SUBMIT CANCEL Error REJECT
  25. 25. Such diagram can be described using JSON and our UI code can directly be driven by its description.
  26. 26. https://github.com/davidkpiano/xstate
  27. 27. What about setState() and Redux?
  28. 28. The term state used within the statechart formalism simply describes a textual label which drives our program in understanding what needs to happen.
  29. 29. To the contrary, in the React world the term state usually describes some data that we use to render our components.
  30. 30. Statecharts actually merry quite well with a system like Redux.
  31. 31. Redux and Statecharts const initialState = { isRequestFinished: false, isInProgress: false, isSuccessful: false, isFailed: false }; function reducer(state = initialState, action) { … } render() { if (isInProgress) { // request in flight, render a spinner } else if (isRequestFinished) { if (isSuccessful) { // request successful, render a message } else if (isFailed) { // render error message + try again link } else { // render welcome message + links } } else { // waiting for input, render login form } }
  32. 32. Redux and Statecharts const initialState = null; function reducer(state = initialState, action) { return machine .transition(state, action.type) .value; } machine = Machine({ initial: 'init', states: { init: { on: { SUBMIT: ‘submitting’, }, }, submitting: { on: { RESOLVE: ‘success’, REJECT: ‘error’ } }, error: { on: { TRY_AGAIN: ‘init’, } } } }); render() { if (isInProgress) { // request in flight, render a spinner } else if (isRequestFinished) { if (isSuccessful) { // request successful, render a message } else if (isFailed) { // render error message + try again link } else { // render welcome message + links } } else { // waiting for input, render login form } }
  33. 33. Redux and Statecharts const initialState = null; function reducer(state = initialState, action) { return machine .transition(state, action.type) .value; } machine = Machine({ initial: 'init', states: { init: { on: { SUBMIT: ‘submitting’, }, }, submitting: { on: { RESOLVE: ‘success’, REJECT: ‘error’ } }, error: { on: { TRY_AGAIN: ‘init’, } } } }); render() { const renderMap = { [submitting]: // request in flight, render a spinner [success]: // request successful, render a message [error]: // render error message + try again link [init]: // waiting for input, render login form } return renderMap[this.props.state]; }
  34. 34. Redux and Statecharts const initialState = null; function reducer(state = initialState, action) { return machine .transition(state, action.type) .value; } machine = Machine({ initial: 'init', states: { init: { on: { SUBMIT: ‘submitting’, }, }, submitting: { on: { RESOLVE: ‘success’, REJECT: ‘error’ } }, error: { on: { TRY_AGAIN: ‘init’, } } } }); store.dispatch({ type: SUBMIT }); store.dispatch({ type: RESOLVE }); store.dispatch({ type: REJECT }); store.dispatch({ type: TRY_AGAIN });
  35. 35. You can continue using other reducers for other non-statechart data.
  36. 36. Redux and Statecharts const initialState = null; function reducer(state = initialState, action) { return machine .transition(state, action.type) .value; } store.dispatch({ type: SUBMIT }); store.dispatch({ type: RESOLVE, payload }); store.dispatch({ type: REJECT }); store.dispatch({ type: TRY_AGAIN }); function resolveReducer(state = null, action) { switch (action.type) { case RESOLVE: return action.payload; default: return state; } }
  37. 37. Redux and Statecharts const initialState = null; function reducer(state = initialState, action) { return machine .transition(state, action.type) .value; } store.dispatch({ type: SUBMIT }); store.dispatch({ type: RESOLVE, payload }); store.dispatch({ type: REJECT }); store.dispatch({ type: TRY_AGAIN }); function resolveReducer(state = null, action) { switch (action.type) { case RESOLVE: return action.payload; default: return state; } } render() { const renderMap = { [submitting]: // request in flight, render a spinner [success]: renderMessage(this.props.resolveData) [error]: // render error message + try again link [init]: // waiting for input, render login form } return renderMap[this.props.state]; }
  38. 38. Statecharts provide us with a visual formalism that can tie the functioning of our code and our designs together.
  39. 39. Whenever you find yourself writing lots of isSomething variables in your state, maybe it’s time to give statecharts a try!
  40. 40. Further reading: Pure UI Control by Adam Solove https://medium.com/@asolove/ pure-ui-control-ac8d1be97a8d STATECHARTS: A VISUAL FORMALISM FOR COMPLEX SYSTEMS http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/ resources/statecharts.pdf You are managing state? Think twice. by Krasimir Tsonev http://krasimirtsonev.com/blog/article/managing-state-in- javascript-with-state-machines-stent Infinitely Better UIs with Finite Automata by David Khourshid https://www.youtube.com/watch?v=VU1NKX6Qkxc Rambling thoughts on React and Finite State Machines by Ryan Florence https://www.youtube.com/watch?v=MkdV2-U16tc
  41. 41. Thanks!

×