EmojiSweeper: 💣💥 with Reagent and re-frame

Presented on 28th April 2016 at the TriClojure lightning talks session.

EmojiSweeper is a web-based Minesweeper that uses emoji to present a pleasant game interface. Coded in ClojureScript using Reagent and re-frame, it was designed to be the kind of game that a serious Minesweeper player would want to play.

Transcript

1. with Reagent and re-frame EmojiSweeper Chris Jester-Young, April 2016 cky@cky.nz @cky944
2. Mining My Own Business ❖ Aim: make a web-based Minesweeper I would play ❖ Beautiful, functional, fast
3. 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
4. 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
5. What do we want? Speed! When do we want it? In 3.1337 µs!
6. 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?
7. 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
8. 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.
9. Future Directions ❖ Small and medium boards ❖ Choice of other emoji sets ❖ “Pro” Minesweeper stats (like 3BV/s) ❖ Leaderboards?
10. Play It Like You Mean It emojisweeper.com gitlab:cky/emojisweeper