re-frame/docs/Basic-App-Structure.md

72 lines
2.9 KiB
Markdown

## Simpler Apps
To build a re-frame app, you:
- design your app's data structures (data layer)
- write Reagent view functions (domino 5)
- write event handler functions (control layer and/or state transition layer, domino 2)
- write subscription functions (query layer, domino 4)
For simpler apps, you should put code for each layer into separate files:
```
src
├── core.cljs <--- entry point, plus history, routing, etc
├── db.cljs <--- schema, validation, etc (data layer)
├── views.cljs <--- reagent views (view layer)
├── events.cljs <--- event handlers (control/update layer)
└── subs.cljs <--- subscription handlers (query layer)
```
For a living example of this approach, look at the [todomvc example](https://github.com/Day8/re-frame/tree/master/examples/todomvc).
*No really, you should absolutely look at the [todomvc example](https://github.com/Day8/re-frame/tree/master/examples/todomvc) example, as soon as possible. It contains all sorts of tips.*
### There's A Small Gotcha
If you adopt this structure, there's a gotcha.
`events.cljs` and `subs.cljs` will never be `required` by any other
namespaces. To the Google Closure dependency mechanism it appears as
if these two namespaces are not needed and it doesn't load them.
And, if the code does not get loaded, the registrations in these namespaces
never happen. You'll then you'll be puzzled as to why none of your events handlers
are registered.
Once you twig to what's going on, the solution is easy. You must
explicitly `require` both namespaces, `events` and `subs`, in your `core`
namespace. Then they'll be loaded and the registrations will occur
as that loading happens.
## Larger Apps
Assuming your larger apps have multiple "panels" (or "views") which are
relatively independent, you might use this structure:
```
src
├── panel-1
│ ├── db.cljs <--- schema, validation, etc (data layer)
│ ├── subs.cljs <--- subscription handlers (query layer)
│ ├── views.cljs <--- reagent components (view layer)
│ └── events.cljs <--- event handlers (control/update layer)
├── panel-2
│ ├── db.cljs <--- schema, validation. etc (data layer)
│ ├── subs.cljs <--- subscription handlers (query layer)
│ ├── views.cljs <--- reagent components (view layer)
│ └── events.cljs <--- event handlers (control/update layer)
.
.
└── panel-n
```
***
Previous: [Correcting a wrong](SubscriptionsCleanup.md)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Up: [Index](README.md)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Next: [Navigation](Navigation.md)
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<!-- END doctoc generated TOC please keep comment here to allow auto update -->