Meta Refresh 2015

The web in your pocket

UIs as Values

Submitted by Shashi Gowda (@g0wda) on Tuesday, 20 January 2015

videocam_off

Technical level

Intermediate

Section

Front-end build processes and tools – full talks

Status

Confirmed & Scheduled

View proposal in schedule

Vote on this proposal

Login to vote

Total votes:  +6

Objective

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

Description

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

Comments

  • 2
    Jaseem abid (@jaseemabid) 3 years ago

    Looking forward.

Login with Twitter or Google to leave a comment