https://github.com/xlisp/re-frame-todomvc
https://github.com/xlisp/re-frame-todomvc
Last synced: 25 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/xlisp/re-frame-todomvc
- Owner: xlisp
- Created: 2019-03-30T12:18:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-30T12:38:28.000Z (over 6 years ago)
- Last Synced: 2025-08-25T02:34:58.298Z (2 months ago)
- Language: Clojure
- Size: 42 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TodoMVC done with re-frame
A [re-frame](https://github.com/Day8/re-frame) implementation of [TodoMVC](http://todomvc.com/).
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 are not
really required to get the job done. So lean and minimal is no longer a goal.
## Setup And Run
1. Install [Leiningen](http://leiningen.org/) (plus Java).
2. Get the re-frame repo
```
git clone https://github.com/Day8/re-frame.git
```
3. cd to the right example directory
```
cd re-frame/examples/todomvc
```
4. Clean build
```
lein do clean, figwheel
```
5. Wait for step 4 to do the compile, and then run the built app:
```
open http://localhost:3450
```
## Compile an optimised version
1. Compile
```
lein do clean, with-profile prod compile
```
2. 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)
```
## Further Notes
The [official reagent example](https://github.com/reagent-project/reagent/tree/master/examples/todomvc).