Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Show and Tell: A Survey of JavaScript and XState

Show and Tell: A Survey of JavaScript and XState

I put together these slides for a lunch & learn style talk on JavaScript, XState, and a demo I'm working. They're chock full of links and references, so I wanted to get them somewhere public.

Andrew Roberts

April 03, 2020
Tweet

Other Decks in Programming

Transcript

  1. • Survey of popular JavaScript libraries • XState and state

    machines • Widget Factory demo What I’m going to talk about: ©Solace | Proprietary & Confiden5al 2
  2. 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
  3. 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
  4. 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
  5. 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 <Seat … /> in code – https://github.com/react-spring/react-three-fiber https://codesandbox.io/embed/r3f-train-l900i • 300 ish lines of declarative code
  6. Art and animation (3/4) ©Solace | Proprietary & Confidential 9

    • dwitter – JavaScript demos in 140 characters or less – https://www.dwitter.net/top/all
  7. 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."
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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).
  17. 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.
  18. 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
  19. 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:
  20. 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.
  21. 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.
  22. 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.
  23. 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