Andrew Roberts April 3, 2020 Show and Tell: JavaScript and XState 

• Survey of popular JavaScript libraries • XState and state machines • Widget Factory demo What I’m going to talk about: ©Solace | Proprietary & Confiden5al 2 

Survey of popular JavaScript libraries ©Solace | Proprietary & Confidential 3 

Web development (1/3) - frameworks • React – "A JavaScript library for building user interfaces. Declarative, Component-Based, Learn Once, Write Anywhere" – https://reactjs.org/ – 146K GitHub stars • Vue – "The Progressive JavaScript Framework. Approachable, Versatile, Performant" – https://vuejs.org/ – 161K GitHub stars • Aurelia – "Aurelia is a modern front-end framework for building browser, mobile and desktop applications. Simple. Powerful. Unobtrusive." – https://aurelia.io/home – 11.4K GitHub stars ©Solace | Proprietary & Confidential 4 

Web development (2/3) - frameworks • Svelte – "Cybernetically enhanced web apps” – No virtual DOM, shifts work to compile step. Use case from what I’ve seen is wearables, smart TVs, POS systems, or any resource constrained display. – https://svelte.dev/ – https://www.youtube.com/watch?v=AdNJ3fydeao – 32.1K GitHub stars • Angular – ”One framework. Mobile & desktop.” – Google abomination as far as I’m concerned (lol) – https://angular.io/ – 59.5K GitHub stars ©Solace | Proprietary & Confidential 5 

Web development (3/3) – meta frameworks • Gatsby – "Gatsby is a blazing fast modern static site generator (SSG) for React.” – De facto SSG framework for JAMstack. TLDR: introduce a build step to your web app, generate static pages from your data at build time. This is useful for sites where SEO is important for static content and content creation is slower than 1 item / minute (some function of build time). So blogs, e-commerce sites, documentation are all good candidates. – https://www.gatsbyjs.org/ – 43.2k GitHub stars • Next.js – “The React Framework for Production, Pre-Rendered Apps, Static Websites, SEO-Friendly Sites…” – It’s an opinionated framework for developing server-side rendered (SSR) apps. This is useful for sites where SEO is important for dynamic content that is being created quickly, so Twitter-like social media, user-submission based sites like imgur or reddit, etc. – https://nextjs.org/ – 46.4K GitHub stars ©Solace | Proprietary & Confidential 6 

Art and animation (1/4) ©Solace | Proprietary & Confidential 7 • three.js – a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser, WebGL based – https://threejs.org/ • react-three-fiber – a React reconciler for threejs on the web and react-native, i.e. declarative re-usable components for threejs – E.g. one of those seats looks like in code – https://github.com/react-spring/react-three-fiber https://codesandbox.io/embed/r3f-train-l900i • 300 ish lines of declarative code 

Art and animation (2/4) ©Solace | Proprietary & Confidential 8 https://codepen.io/murasaki/pen/BmOzMP 

Art and animation (3/4) ©Solace | Proprietary & Confidential 9 • dwitter – JavaScript demos in 140 characters or less – https://www.dwitter.net/top/all 

Art and animation (4/4) ©Solace | Proprietary & Confidential 10 • react-spring – react-spring is a spring-physics based animation library that should cover most of your UI related animation needs – https://www.react-spring.io/ “Why springs and not durations The principle you will be working with is called a spring, it does not have a defined curve or a set duration. In that it differs greatly from the animation you are probably used to. We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that." 

Internet of Things ©Solace | Proprietary & Confidential 11 • Node-RED – “Low-code programming for event-driven applications. Node- RED is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways.” – https://github.com/node-red/node-red – 9.6K GitHub starts • MQTT.js – “The MQTT client for Node.js and the browser” – https://github.com/mqttjs/MQTT.js – 15.9K GitHub starts • Johnny-Five – “The JavaScript Robotics and IoT Platform.” – Provides simple to use APIs to interact with popular Arduino boards and microcontrollers – http://johnny-five.io/ – 11.4K GitHub starts 

Data visualization (1/2) ©Solace | Proprietary & Confiden5al 12 • D3.js – “Is a JavaScript library for manipulating documents based on data." – D3 = Data-Driven Documents. – General purpose data visualization library that boasts referenceable examples and library forks for all sorts of data types and visualization techniques. – https://d3js.org/ • react-vis-force – “react-vis-force applies the react-vis and d4-style component approach to the d3-force library” – D4 = Declarative Data-Driven Documents… – https://github.com/uber/react-vis-force 

Data visualization (2/2) ©Solace | Proprietary & Confidential 13 • react-virtualized – “React components for efficiently rendering large lists and tabular data” – https://bvaughn.github.io/react-virtualized/#/components/List – 18.6K GitHub stars • react-window – Lighter weight version of react-virtualized made by the same library author – https://react-window.now.sh/#/examples/list/fixed-size – 7.6K GitHub stars 

FuncGonal programming ©Solace | Proprietary & Confidential 14 • Ramda – “A practical functional library for JavaScript programmers.” – lodash/fp is identical – https://ramdajs.com/ – 18.6K GitHub stars • Immer – “Create the next immutable state tree by simply modifying the current tree.” – Dead simple API, quickly became the community favorite. – https://immerjs.github.io/immer/docs/introduction – 15.9K GitHub starts What is functional programming? 1. Pure functions over shared state and side effects 2. Immutability over mutable data 3. Function composition over imperative flow control 4. Generic utilities that act on many data types over object methods that only operate on their collocated data 5. Declarative over imperative code (what to do, rather than how to do it) 6. Expressions over statements Eric Elliott, Composing Software https://leanpub.com/composingsoftware 

Server-side frameworks ©Solace | Proprietary & Confidential 15 • Express – “Fast, unopinionated, minimalist web framework for Node.js” – hpps://expressjs.com/ – 48K GitHub stars • NestJS – “A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applicarons on top of TypeScript & JavaScript (ES6, ES7, ES8)” – Opinionated server-side framework – hpps://nestjs.com/ – 25.6K GitHub starts 

Recap: there are open-source JavaScript libraries for… • Web development –Static site generation –Server-side rendering • Generative art • Browser 3D graphics • Browser animations • Internet of Things • Data visualization • Functional programming • State machines • Server-side frameworks • … and more ©Solace | Proprietary & Confidential 16 frontend backend 

XState and state machines ©Solace | Proprietary & Confiden5al 17 

This slide marks the start of unoriginal content. Arrangement is by Andrew Roberts, wording and screenshots come from these resources by David Khourshid: • https://xstate.js.org/docs/about/concepts.html#concepts – 98% of wording • https://medium.com/@DavidKPiano/the-facetime-bug-and-the-dangers-of-implicit- state-machines-a5f0f61bdaa2 ©Solace | Proprietary & Confidential 18 

XState and state machines • Let’s get visual –https://xstate.js.org/viz/ –https://xstate.js.org/viz/?gist=5d2bf685b4ea2f65766a5c05ae72f279 ©Solace | Proprietary & Confiden5al 19 

State Machines and Statecharts ©Solace | Proprietary & Confidential 20 • A state machine is a finite set of states that can transition to each other deterministically due to events. • A statechart is an extension of state machines; mainly, they can have: – Guarded transitions – Actions (entry, exit, transition) – Extended state (context) – Orthogonal (parallel) states – Hierarchical (nested) states – History 

Actor Model ©Solace | Proprietary & Confiden5al 21 • The actor model is another very old mathematical model of computation that goes well with state machines. It states that everything is an "actor" that can do three things: – Receive messages – Send messages to other actors – Do something with the messages it received (its behavior), such as: • change its local state • send messages to other actors • spawn new actors • An actor's behavior can be described by a state machine (or a statechart). 

State Machines.. have states ©Solace | Proprietary & Confidential 22 • A state is an abstract representaDon of a system (such as an applicaDon) at a specific point in Dme. As an applicaDon is interacted with, events cause it to change state. A finite state machine can be in only one of a finite number of states at any given Dme. • The current state of a machine is represented by a State instance. 

State Machines… have state nodes ©Solace | Proprietary & Confidential 23 • In XState, a state node specifies a state configuration. They are defined on the machine's states property. Likewise, sub- state nodes are hierarchically defined on the states property of a state node. • There are five different kinds of state nodes: – An atomic state node has no child states. (I.e., it is a leaf node.) – A compound state node contains one or more child states, and has an initial state, which is the key of one of those child states. – A parallel state node contains two or more child states, and has no initial state, since it represents being in all of its child states at the same time. – A final state node is a leaf node that represents an abstract "terminal" state. – A history state node is an abstract node that represents resolving to its parent node's most recent shallow or deep history state. • https://xstate.js.org/viz/?gist=ea28dfe4207da79a74d2d5154e20d8d0 

State Machines… transition due to events ©Solace | Proprietary & Confidential 24 • An event is what causes a state machine to transition from its current state to its next state. All state transitions in a state machine are due to these events; state cannot change unless some stimulus (the event) causes it to change. • A state transition defines what the next state is, given the current state and event. State transitions are defined on state nodes, in the on property: 

XState… supports guarded transitions ©Solace | Proprietary & Confidential 25 • Many &mes, you'll want a transi&on between states to only take place if certain condi&ons on the state (finite or extended) or the event are met. • This is a good use case for a "guarded transi&on", which is a transi&on that only occurs if some condi&on passes. A transi&on with condi&on(s) is called a guarded transi&on. 

XState… supports actions ©Solace | Proprietary & Confidential 26 • Actions are fire-and-forget "side effects". For a machine to be useful in a real-world application, side effects need to occur to make things happen in the real world, such as rendering to a screen or publishing to Solace • There are three types of actions: – entry actions are executed upon entering a state – exit actions are executed upon exiting a state – transition actions are executed when a transition is taken. 

XState… supports extended state ©Solace | Proprietary & Confidential 27 • While finite states are well-defined in finite state machines and statecharts, state that represents quantitative data (e.g., arbitrary strings, numbers, objects, etc.) that can be potentially infinite is represented as extended state instead. This makes statecharts much more useful for real-life applications. • In XState, extended state is known as context. 

The Dangers of Implicit State Machines: Why Use State Machines? ©Solace | Proprietary & Confidential 28 • You are creating state machines in every bit of code that you write without even realizing it. The problem is, you are creating implicit state machines, where the notion of program states and events and transitions exist, but the design of the state machines are completely scattered throughout your code-base and hidden in event handlers and if-statements and other abstractions. • State machines create a graph data structure of your application state, which allows it to be visualized! • State machines eliminate an entire class of bugs – illegal states and illegal transitions • Codifies state management in a relatively framework and language agnostic way 

End unoriginal content, credit again: • https://xstate.js.org/docs/about/concepts.html#concepts • https://medium.com/@DavidKPiano/the-facetime-bug-and-the-dangers-of-implicit- state-machines-a5f0f61bdaa2 ©Solace | Proprietary & Confidential 29 

Additional resources • https://egghead.io/courses/introduction-to-state-machines-using-xstate • https://github.com/DevanB/xstate-examples/tree/master/trivia-game-vue • https://kyleshevlin.com/what-are-state-machines ©Solace | Proprietary & Confidential 30 

Widget Factory ©Solace | Proprietary & Confidential 31 

©Solace | Proprietary & Confidential 32 

©Solace | Proprietary & Confidential 33 

Proximity reading processor state machine chart • hJps://xstate.js.org/viz/?gist=d2b2941cfee3c6fa25f04187310ebc85 ©Solace | Proprietary & Confidential 34