2015-03-03 13:15:56 +11:00
|
|
|
# TodoMVC done with re-frame
|
2015-02-26 14:51:59 +13:00
|
|
|
|
2015-03-07 00:39:09 +11:00
|
|
|
A [re-frame](https://github.com/Day8/re-frame) implementation of [TodoMVC](http://todomvc.com/).
|
2015-02-26 14:51:59 +13:00
|
|
|
|
|
|
|
|
2015-03-03 13:15:56 +11:00
|
|
|
## Setup And Run
|
|
|
|
|
2015-03-07 00:39:09 +11:00
|
|
|
1. Install [Leiningen](http://leiningen.org/) (plus Java).
|
2015-03-03 13:15:56 +11:00
|
|
|
|
2015-05-12 13:17:31 +10:00
|
|
|
2. Get the re-frame repo
|
2015-03-03 13:15:56 +11:00
|
|
|
```
|
|
|
|
git clone https://github.com/Day8/re-frame.git
|
|
|
|
```
|
|
|
|
|
2015-05-12 13:17:31 +10:00
|
|
|
3. cd to the right example directory
|
2015-03-03 13:15:56 +11:00
|
|
|
```
|
|
|
|
cd re-frame/examples/todomvc
|
|
|
|
```
|
|
|
|
|
2015-05-12 13:17:31 +10:00
|
|
|
4. Clean build
|
2015-03-03 13:15:56 +11:00
|
|
|
```
|
2015-05-12 13:17:31 +10:00
|
|
|
lein do clean, figwheel
|
2015-03-03 13:15:56 +11:00
|
|
|
```
|
|
|
|
|
2015-05-12 13:17:31 +10:00
|
|
|
5. Run
|
2015-05-28 23:17:40 +10:00
|
|
|
You'll have to wait for step 4 to do its compile, but then:
|
2015-03-03 13:15:56 +11:00
|
|
|
```
|
2015-05-28 23:17:40 +10:00
|
|
|
open http://localhost:3450
|
2015-03-03 13:15:56 +11:00
|
|
|
```
|
|
|
|
|
2015-05-12 13:17:31 +10:00
|
|
|
|
2017-02-03 08:58:58 +13:00
|
|
|
## Compile an optimised version
|
2015-05-12 13:17:31 +10:00
|
|
|
|
|
|
|
1. Compile
|
|
|
|
```
|
|
|
|
lein do clean, with-profile prod compile
|
|
|
|
```
|
|
|
|
|
|
|
|
2. Open the following in your browser
|
|
|
|
```
|
|
|
|
resources/public/index.html
|
|
|
|
```
|
|
|
|
|
|
|
|
|
2015-03-03 13:15:56 +11:00
|
|
|
## 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)
|
|
|
|
```
|
|
|
|
|
2015-03-07 00:39:09 +11:00
|
|
|
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)
|
2017-01-31 14:58:05 +01:00
|
|
|
└── events.cljs <--- event handlers (control/update layer)
|
2015-03-07 00:39:09 +11:00
|
|
|
```
|
2015-03-03 13:15:56 +11:00
|
|
|
|
|
|
|
## Notes
|
|
|
|
|
2015-03-07 00:39:09 +11:00
|
|
|
Various:
|
2016-06-11 22:22:06 +10:00
|
|
|
- The [official reagent example](https://github.com/reagent-project/reagent/tree/master/examples/todomvc)
|
|
|
|
- Look at the [re-frame Wiki](https://github.com/Day8/re-frame/wiki)
|