This episode is for subscribers only. Sign Up or Log in to watch it.

19. re-frame

Published 11 October 16

Reagent is a popular and easy to use option for using React with ClojureScript. re-frame builds on top of Reagent, providing an elegant and opinionated way to structure applications and deal with application state. The documentation for re-frame can easily overwhelm. With this episode you get a practical hands-on introduction, so you can be making your own apps in no time.

Show notes

Reagent is one of the more popular ClojureScript libraries for building React apps. It gives you an easy way to define components, and some basic tools for working with application state.

Using Reagent atoms and cursors directly is fine for simple apps, but as your application gets more complex this can easily get messy. This is where re-frame comes in, it’s designed to be functional, reactive, and fast, and it provides structure to keep your code maintainable.

re-frame is both an architecture, a library implementing that architecture, and an application template to easily get you started. As an example I’m going to implement a level editor for the retro game “breakout”.

To get started I’ll generate an application skeleton using the re-frame leiningen template. I’m passing some options to the generator here, one for CIDER support, so I can launch Figwheel from Emacs, and one for Garden, because I like to write my CSS in Clojure.

lein new re-frame breakout +cider +garden

The directory layout is fairly typical. Notice though that there are already a handful of cljs files, each with a specific purpose.

~/breakout $ tree
.
├── project.clj
├── README.md
├── resources
│   └── public
│       └── index.html
└── src
    ├── clj
    │   └── breakout
    │       ├── core.clj
    │       └── css.clj
    └── cljs
        └── breakout
            ├── config.cljs
            ├── core.cljs
            ├── db.cljs
            ├── events.cljs
            ├── subs.cljs
            └── views.cljs

7 directories, 11 files

browse source code

In this episode you’ll build a level editor for the retro game Breakout. You can try it out on-line.

If you want to follow along, then check out the re-frame-start branch, and start from there. The final result is in the re-frame-episode-1 branch.

git clone https://github.com/lambdaisland/breakout.git
cd breakout
git checkout re-frame-start

Prerequisites

This episode assumes you are somewhet familiar with Reagent, and hence, React. These episode will get you up to speed