with Reagent and re-frame EmojiSweeper Chris Jester-Young, April 2016 cky@cky.nz @cky944

Mining My Own Business ❖ Aim: make a web-based Minesweeper I would play ❖ Beautiful, functional, fast

In the Eye of the Beholder ❖ Aesthetic icons that display well on high-DPI devices ❖ I can’t draw, so I need to borrow others’ work ❖ Initial version used system emoji font ❖ Only usable on El Capitan ❖ Thanks to Twemoji, beautiful emoji everywhere

Mine It Your Way ❖ I want to customise Minesweeper to the way I play ❖ Single-click “clear-around” ❖ 1.5-click ❖ Game pausing ❖ Special status indicator for a “no-flag” win

What do we want? Speed! When do we want it? In 3.1337 µs!

Fast Reaction ❖ React’s value proposition: virtual DOM ❖ Frees me from having to worry about DOM state ❖ Only need to worry about model state ❖ Encourages functional-style programming ❖ Facebook’s Immutable library ❖ Why not Clojure’s own persistent data structures?

Paradox of Choice ❖ There’s just 1 React, but 3 ClojureScript interfaces ❖ Had to start somewhere, went with Reagent ❖ Discovered re-frame and knew I struck gold

Who re-framed Roger Rabbit ❖ re-frame: like Flux, only easier ❖ Subscribers: only get notified if relevant state changes ❖ Event handlers: arbiters of all state changes ❖ Components do not change state directly, unlike React ❖ Dispatch events to trigger (async) state change ❖ Can dispatch from: DOM events, AJAX callbacks, tick events, etc.

Future Directions ❖ Small and medium boards ❖ Choice of other emoji sets ❖ “Pro” Minesweeper stats (like 3BV/s) ❖ Leaderboards?

Play It Like You Mean It emojisweeper.com gitlab:cky/emojisweeper