composable views #43
composable views #43
Conversation
content/reference/views.md
Outdated
| _note: There's not an exact word for what we're doing here. Because it's a | ||
| pattern, and not an API the exact word also doesn't matter too much. This is | ||
| also not at all the only way to compose functions - so don't worry too much | ||
| about getting the terminology right - we're also just making it up as we go._ |
There was a problem hiding this comment.
i really like this too!
yoshuawuyts
force-pushed
the
templates
branch
from
ae7be20 to
304eb75
Compare
content/reference/views/index.md
Outdated
|
|
||
| var app = choo() | ||
| app.route('/', template(main)) // 1. | ||
| app.route('/bar', template(bar)) // 2. |
content/reference/views/index.md
Outdated
| } | ||
| ``` | ||
|
|
||
| 1. We create a route `'/'` which calls the `template` function, and passes it |
content/reference/views/index.md
Outdated
| that share a lot of the same layout. If you find that you're repeating the same | ||
| layout in a lot of code, it can be beneficial to make it reusable instead. | ||
|
|
||
| The most common way to create reusable templates, is to create a function that |
content/reference/views/index.md
Outdated
| takes a view as an argument and returns a view. Inside the function the | ||
| childView is called, and wrapped with some HTML. The end result is a nicely | ||
| composed function that's also known as a "composable view", "higher order view", | ||
| "template". |
There was a problem hiding this comment.
or a "template" instead of the last comma
content/reference/views/index.md
Outdated
| childView is called, and wrapped with some HTML. The end result is a nicely | ||
| composed function that's also known as a "composable view", "higher order view", | ||
| "template". | ||
|
|
There was a problem hiding this comment.
I would rewrite this entire paragraph:
The easiest way to create a reusable view in Choo is to create a function that takes a view (meaning a snippet of HTML) and then inserts it into another, function-internal view. This makes it easy to create functions that construct HTML that you always want to keep static, such as a menu bar, but at the same time construct dynamic HTML defined by whatever you pass it as an argument. Functions like these are called "composable functions" and, funnily enough, are a fundamental piece of functional programming!
or something like that
There was a problem hiding this comment.
function-internal is an absolutely stupid phrase as i just noticed
content/reference/views/index.md
Outdated
| argument. | ||
|
|
||
| _note: There's not an exact word for what we're doing here. Because it's a | ||
| pattern, and not an API the exact word also doesn't matter too much. This is |
|
Updated with all feedback! |
Docs on how to make composable views (aka higher-order views or templates). Hope this is useful!