Mastering UIs with Finite State Machines | Rubén Sospedra

accessible for deaf/hearing-impaired: sign language interpreter (DGS) visible for complete duration + captions // slide collection https://buff.ly/2YLcPlA // Licence: CC BY-ND https://buff.ly/2TN3XIo Did you ever feel like monkey patching your UI component? Adding too many if/else, handling a lot of complexity or hacking several non-desired side effects. Did you ever have a problem with double-clicking an async button? Fetching multiple times the same resource in a row? Did you have problems translating UX interfaces and mock-ups into your applications scenes? All these kind of problems can be properly fixed by applying a different point of view. An architecture based upon Mealy state machines. Also known as finite state machines or automatas. These machines are deterministic, pure and idempotents. Opening a new set of possibilities from predictable components to autogenerated tests. Let’s take a look at this new paradigm for UI components. You’ll discover a better and cleaner world 😉 What are the key takeaways from this talk? - Define your app states in advance; even if you’re not using an FSM - FSM can reduce to 0 the number of run-time bugs your app produces. Libraries: - State machines and statecharts for the modern web. https://github.com/davidkpiano/xstate - A state machine abstraction for React https://github.com/michelebertoli/react-automata - an open source platform for network analysis and visualization https://github.com/cytoscape/cytoscape Reads: - Constructing the User Interface with Statecharts: Ian Horrocks (book) - Pure UI https://rauchg.com/2015/pure-ui - STATECHARTS: A VISUAL FORMALISM FOR COMPLEX SYSTEMS* http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/resources/statecharts.pdf - Welcome to the world of Statecharts https://statecharts.github.io/ Real World Example: VSCode telemetry Rubén (@sospedra_r) is a Frontend engineer, Javascript hacker, Crossfiter and paleo-chef. He plays the ukelele and read about political science. Gamer and cinephile Sign up for our Newsletter to receive preview-links every other Thursday starting 2019, April 04: https://js-kongress.us13.list-manage.com/subscribe/post?u=9c3420f6b5269855b07422fb5&id=f490a69da5