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

60 lines
2.4 KiB
Markdown
Raw Normal View History

2016-08-23 21:07:14 +00:00
## Simpler Apps
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)
For simpler apps, you should put code for each layer into separate files:
```
src
2016-08-27 02:41:26 +00:00
├── core.cljs <--- entry point, plus history, routing, etc
2016-08-23 21:07:14 +00:00
├── 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)
```
For a living example of this approach, look at the [todomvc example](https://github.com/Day8/re-frame/tree/master/examples/todomvc).
2016-08-27 02:41:26 +00:00
### There's A Small Gotcha
2016-08-23 21:07:14 +00:00
If you adopt this structure there's a gotcha.
2016-08-27 02:41:26 +00:00
`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.
2016-08-23 21:07:14 +00:00
2016-08-27 02:41:26 +00:00
And, if the code does not get loaded, the registrations in these namespaces
never happen. You'll then be baffled as to why none of your events handlers
are registered.
2016-08-23 21:07:14 +00:00
2016-08-27 02:41:26 +00:00
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.
2016-08-23 21:07:14 +00:00
## Larger Apps
2016-08-27 02:41:26 +00:00
Assuming your larger apps has multiple "panels" (or "views") which are
relatively independent, you might use this structure:
2016-08-23 21:07:14 +00:00
```
src
2016-08-25 13:35:48 +00:00
├── panel-1
2016-08-24 14:53:37 +00:00
│ ├── 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)
2016-08-25 13:35:48 +00:00
├── panel-2
2016-08-24 14:53:37 +00:00
│ ├── 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)
2016-08-23 21:07:14 +00:00
.
.
2016-08-25 13:35:48 +00:00
└── panel-n
2016-08-23 21:07:14 +00:00
```
Continue to [Navigation](Navigation.md) to learn how to switch between panels of a larger app.