Meta Refresh 2015

This talk aims to dwell on the benifits of representing UIs as values. We take the key contribution of Facebook’s React framework - the idea of Virtual DOM and DOM Reconciliation and push it as far as it can seemingly go.

Warning: contains Alan Kay quotes and Bret Victor-esque demos

Outline

In no small part does Facebook’s React framework owe its popularity to its magical ease -- it provides a declarative way of describing UIs, and blazing fast performance for free. Good performance in this programming model is feasible because of a key design tenet of React called DOM Reconciliation. In short, React does not mutate or create the actual DOM (for that is expensive and full of peril), instead it creates a representation of the DOM (which is called the Virtual DOM) at every app state, and then applies only the differences that need to be applied to the actual DOM.

In this talk, we will explore what designing and programming UIs with such a Virtual DOM representation entails. We extend the Virtual DOM idea to the server-side and represent complex UIs as denotations tied to their Web Component counterparts. This combination makes it easy to compose data-driven UIs from smaller reusable parts. We will also see examples of these ideas manifesting in the Elm ecosystem and some Julia UI packages (namely Interact, Patchwork, and Canvas)

Agenda/Contents:

• What are Values?
  • Numerals as the UI of numbers
• UIs as abstract values
  • Rendering abstract values into Virtual DOM
• Functionally Composing UIs
  • An algebra of layouts (aka try this with HTML)
  • Style and theming
• Reactive programming: Interaction and Animations
  • UI as a time-varying value
  • Diffing and Patching
  • The case for the server sending patches to the browser
• Making UIs at a REPL
• Debugging: Time-travel and infinite undo

Speaker bio

I’m Shashi, I build UI tools for The Julia Language. I am twitter/g0wda and github/shashi