Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shoe box documentation #197

Merged
merged 1 commit into from
May 27, 2016
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,69 @@ export default Ember.Route.extend({
});
```

### The Shoebox

You can pass application state from the FastBoot rendered application
to the browser rendered application using a feature called the "Shoebox".
This allows you to leverage server API calls made by the FastBoot
rendered application on the browser rendered application. Thus preventing
you from duplicating work that the FastBoot application is performing.
This should result in a performance benefit for your browser application,
as it does not need to issue server API calls whose results are available
from the Shoebox.

The contents of the Shoebox are written to the HTML as strings within
`<script>` tags by the server rendered application, which are then
consumed by the browser rendered application.

This looks like:
```html
.
.
<script type="fastboot/shoebox" id="shoebox-main-store">
{"data":[{"attributes":{"name":"AEC Professionals"},"id":106,"type":"audience"},
{"attributes":{"name":"Components"},"id":111,"type":"audience"},
{"attributes":{"name":"Emerging Professionals"},"id":116,"type":"audience"},
{"attributes":{"name":"Independent Voters"},"id":2801,"type":"audience"},
{"attributes":{"name":"Staff"},"id":141,"type":"audience"},
{"attributes":{"name":"Students"},"id":146,"type":"audience"}]}
</script>
.
.
```

You can add items into the shoebox with `shoebox.put`, and you can retrieve
items from the shoebox using `shoebox.retrieve`. In the example below we use
an object, `shoeboxStore`, that acts as our store of objects that reside in
the shoebox. We can then add/remove items from the `shoeboxStore` in the
FastBoot rendered application as we see fit. Then in the browser rendered
application, it will grab the `shoeboxStore` from the shoebox and retrieve
the record necessary for rendering this route.

```js
export default Ember.Route.extend({
fastboot: Ember.inject.service(),

model(params) {
let shoebox = this.get('fastboot.shoebox');
let shoeboxStore = shoebox.retrieve('my-store');

if (this.get('fastboot.isFastBoot') {
return this.store.findRecord('post', params.post_id).then(post => {
if (!shoeboxStore) {
shoeboxStore = {};
shoebox.put('my-store', shoeboxStore);
}
shoeboxStore[post.id] = post.toJSON();
});
} else {
return shoeboxStore && shoeboxStore.retrieve(params.post_id);
}
}
});
```


## Known Limitations

While FastBoot is under active development, there are several major
Expand Down