Camlistore Web UI: A modern single-page web application using React and Closure

[aboodman]

In this talk I'm going to walk through the architecture of the Camlistore web UI. It takes some interesting new design approaches, including the use of Facebook's React JavaScript library, that make many features which used to be difficult and time consuming to implement fast and fun.

Quick walkthrough of the UI features

React: Holy crap, how come nobody invented this before?

I have been doing JavaScript development since 2000. UI frameworks have basically not changed since then. Architecturally, JavaScript UI frameworks typically either follow the component model, which can be traced all the way back to NetWindows (and Qt, Cocoa, etc, before then), or to MVC which of course has ancient heritage too.

None of these models are great fits for the web, for one reason: URLs. Because of URLs, your application has to be enterable at any possible state. This means there has to be code somewhere that knows how to go from the bootstrap state to any possible state a user could navigate to, directly.

Well, that's a perfect fit for React because React code always renders every state fresh anyway. It's trivial to associate a URL with every single state in a React application.

# Efficient Infinite scrolling: Yay, React

Once you get the hang of thinking about UI this way, it makes tons of things easier. When I first built the Camlistore search result page, it had infinite scrolling, but it wasn't efficient. It just appended more and more nodes as you scrolled.

When I started thinking about how to make it efficient, I sudden realized it was absolutely trivial with React: just make the scroll position an input to the render function. React takes care of all the bookkeeping to make minimal updates to the DOM. Whoa.

Live Updates: React makes it auto-freaking-matic. Seriously.

I built live update for the search page, and then the first time I navigated to the detail page it worked automatically.

Search-engines trivially supportable via Node.

Unit testing.

[aboodman]

I'm going to continue updating this until it is complete, over the next 24 hours.