|
||
---|---|---|
.. | ||
resources/public | ||
src/todomvc | ||
.gitignore | ||
README.md | ||
project.clj |
README.md
TodoMVC done with re-frame
A re-frame implementation of TodoMVC.
But this is NOT your normal, lean and minimal todomvc implementation, geared towards showing how easily re-frame can implement the challenge.
Instead, this todomvc example has evolved into more of a teaching tool and we've thrown in more advanced re-frame features which aren't really required to get the job done.
Setup And Run
-
Install Leiningen (plus Java).
-
Get the re-frame repo
git clone https://github.com/Day8/re-frame.git
-
cd to the right example directory
cd re-frame/examples/todomvc
-
Clean build
lein do clean, figwheel
-
Run You'll have to wait for step 4 to do its compile, and then:
open http://localhost:3450
Compile an optimised version
-
Compile
lein do clean, with-profile prod compile
-
Open the following in your browser
resources/public/index.html
Exploring The Code
From the re-frame readme:
To build a re-frame app, you:
- design your app's data structure (data layer)
- write and register subscription functions (query layer)
- write Reagent component functions (view layer)
- write and register event handler functions (control layer and/or state transition layer)
In src
, there's a matching set of files (each small):
src
├── core.cljs <--- entry point, plus history
├── db.cljs <--- data related (data layer)
├── subs.cljs <--- subscription handlers (query layer)
├── views.cljs <--- reagent components (view layer)
└── events.cljs <--- event handlers (control/update layer)
Notes
Various:
- The official reagent example
- Look at the re-frame Wiki