Summary: <h3 dir="ltr"><strong>Episode Summary</strong></h3> <p dir="ltr"><strong>Today’s guest is Farzad Yousef Zadeh, a developer from Iran with a unique path into computer programming. He started by studying astrophysics and aerospace engineering in college, then dropped out in his last semester because it wasn’t the right path. He then taught himself to code, working mostly in web programming and frontend development. Despite his change in course, Farzad remains passionate about observing the night sky. </strong></p> <p dir="ltr"><strong>Farzad is here today to talk about the ideas in his talk Explicitness and Consistency in UI, where he talks about the difficulties of developing a user interface and how the experience can be improved by using state machines and state charts. He talks about his inspiration for the talk and how he has implemented state machines and state charts into his work. </strong></p> <p dir="ltr"><strong>The panel backtracks and talks about the definition of state machines and state charts. A state machine, from an academic background, is a model for computing something. It's for managing and controlling, taking over branching and managing a finite amount of state declaratively. State machines are not so much about sharing or reusing, but about how your communicate a certain behavior. Despite the fact that event driven programming permeates the programming consciousness, thinking about state charts and state machines is actually more natural than it first appears. The panel explains how it’s the same principle as whiteboarding to solve a problem.</strong></p> <p dir="ltr"><strong>Lucas asks how state charts are different from pure React. Farzad talks about how it’s important not to just treat your static states as first class, but also the transitions between them. Otherwise, you would end up with something that looks like a map with cities and towns, but no roads. Using statecharts and state machines makes testing an application much easier, and in some ways you let the machine test itself. The machine will know what to do with your states because you define the path, and the machine will take the path for you. </strong></p> <p dir="ltr"><strong>They again talk about the difference between state machines and state charts. A state machine defines a finite set of states and defining the events that the machine can take and respond to when transitioning from state A to B. If you use only this, you will encounter a snag called ‘state explosion’ because not non-concrete things cannot be modeled. So, state charts were invented to compensate for this. A state chart brings the idea of an extended state, or the context and data you need to hold and reason from. </strong></p> <p dir="ltr"><strong>Farzad talks about other types of machines and supports that exist for branching, entry actions, and exit actions. This is similar to the use effect hook in React. He gives examples of where you would use this logic and how it would be worked into frameworks. Farzad talks about how your machine is just a definition, a declarative model of how something is supposed to behave, and how having that separation between the definition of the logic and behavior vs the implementation of API has given us so much more freedom and portability</strong></p> <p dir="ltr"><strong>The panel talks about how using state machines and charts is an investment in the long term maintainability of your code. They agree that using state machines and charts makes it easier to communicate with other developers, new team members, and even non developers. They talk about Cerebral.js and its contributions and model. </strong></p> <p dir="ltr"><strong>As with everything in programming, state machines are not a silver bullet and don’t work in every situation. Farzad talks about situations where state machines can be unhelpful. It is still valuable to consider state machines and charts because it forces you to dedicate time thinking and organizing your thoughts so that you can build something maintainable that won’t just be thrown away. The panel discusses how thinking things out before starting to code can be beneficial. They finish by talking about how React Hooks has started them on the path to implement state machines and charts into their code. </strong></p> <h3 dir="ltr"><strong>Panelists</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong>David Ceddia</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Lucas Reis</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Leslie Cohn-Wein</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Thomas Aylott</strong></p> </li> </ul> <p dir="ltr"><strong>With special guest: Farzad Yousef Zadeh</strong></p> <h2 dir="ltr"><strong>Sponsors</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://devchat.tv/sustain-our-software/">Sustain Our Software</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://sentry.io/">Sentry</a> use the code “devchat” for 2 months free on Sentry’s small plan</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://devchat.tv/my-angular-story/">My Angular Story</a></strong></p> </li> </ul> <p dir="ltr"><strong>Links</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.youtube.com/watch?v=miDQ5dDDOJk">Explicitness and Consistency in UI</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/davidkpiano/xstate">David Khourshid xstate library</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://dev.to/reactroundup/rru-069-the-state-machines-in-react-with-david-khourshid">RRU 069: The State Machines in React with David Khourshid</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://blog.markshead.com/869/state-machines-computer-science/">State machine</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.tutorialspoint.com/uml/uml_statechart_diagram.htm">State chart</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://cerebraljs.com/">Cerebral JS</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://origami.design/">Origami by Facebook</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://elm-lang.org/">Elm</a> </strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.slideshare.net/vaynerchuk/the-garyvee-content-model-107343659">The GaryVee Content Model</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://overmindjs.org/">Overmind JS</a></strong></p> </li> </ul> <p dir="ltr"><strong>Follow DevChatTV on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en">Twitter</a></strong></p> <h3 dir="ltr"><strong>Picks</strong></h3> <p dir="ltr"><strong>David Ceddia:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/viraptor/reverse-interview">Reverse Interview</a></strong></p> </li> </ul> <p dir="ltr"><strong>Thomas Aylott:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.youtube.com/watch?v=VwVg9jCtqaU&feature=youtu.be">Machine Learning Zero to Hero</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.youtube.com/playlist?list=PLQY2H8rRoyvy2_vtWvCpQWM9GJXNTa5rV">TensorFlow at Google I/O 2019 channel</a></strong></p> </li> </ul> <p dir="ltr"><strong>Lucas Reis:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://wattenberger.com/blog/d3#intro">How to Learn D3.js</a></strong></p> </li> </ul> <p dir="ltr"><strong>Leslie Cohn-Wein:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.youtube.com/watch?v=tpNmPKjPSFQ">Write Fewer Tests! From Automation to Autogeneration by David Khourshid</a></strong></p> </li> </ul> <p dir="ltr"><strong>Farzad Yousef Zadeh:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.joelonsoftware.com/2001/04/21/dont-let-architecture-astronauts-scare-you/">Don’t Let Architecture Astronauts Scare You</a></strong></p> </li> </ul>
