Fun Functional Programming with the Choo Framework

Today we'll be exploring Choo by @yoshuawuyts — the little framework that could.

It's a brand new framework to help you build single page apps that includes state management, unidirectional data flow, views and a router. With Choo you'll be writing similar style applications to React and Redux but at a fraction of the cost (file size) and number of API's. If you prefer minimal frameworks and like playing with new technology at the bleeding edge, you'll enjoy exploring Choo. Because it's so slender another place it makes a lot of sense is for mobile web apps where you should keep the file size to a minimum.

There's nothing genuinely new that Choo introduces, it simply builds on top of a lot of good ideas that have come from React, Redux, Elm, the Functional Programming paradigm and other inspirations. It's a neat little API that wraps all of these good things into one cohesive package you can install and start building single page apps.

This article will be covering Choo v3. At the time of writing v4 is in alpha so you'll need keep an eye out for changes — this train is moving quickly.

Note: This article will make most sense if you have some knowledge of a declarative view library like React and a state management library like Redux. If you don't have experience with those yet you might find Choo Docs - Concepts offer more in depth explanations of the important concepts.

Do Try This At Home

Follow along by pulling down the demo repo and installing the dependencies.

git clone http://ift.tt/2dXBBcH
cd choo-demo
npm install

There's npm scripts to run each of the examples e.g.

npm run example-1
npm run example-2

Hello Choo

First, we need to require the choo package and create an app.

View file on GitHub: 1-hello-choo.js

const choo = require('choo')
const app = choo()

We use models to house our state and functions to modify it (reducers, effects & subscriptions), here we initialize our state with a title property.

app.model({
  state: {
    title: '🚂 Choo!'
  },
  reducers: {}
})

Views are functions that take state as input and return a single DOM node. The html function that ships with Choo is a wrapper around the yo-yo package.

const html = require('choo/html')
const myView = (state, prev, send) => html`
  <div>
    <h1>Hello ${state.title}</h1>
    <p>It's a pleasure to meet you.</p>
  </div>
`

This html`example` syntax may be new to you but there's no magic going on here, it's an ES6 tagged template literal. See the Let's Write Code with Kyle episode for an excellent explanation of them in detail.

Routes map URLs to views, in this case / matches all URLs.

app.router(route => [
  route('/', myView)
])

To get this locomotive moving we call app.start and append the root node to the document.

const tree = app.start()
document.body.appendChild(tree)

And we're done. Run npm run example-1 and you should see the following document:

<div>
  <h1>Hello 🚂 Choo!</h1>
  <p>It's a pleasure to meet you.</p>
</div>

We're making solid progress through Choo's tiny API. We have basic routing in place and are rendering views with data from our models. There's not all that much more to learn really.

Read more in the docs: Models, Views

Running Choo in the Browser

If you're following along at home the examples are all using a dev server named budo to compile the source with browserify and run the script in a simple HTML page. This is simplest way to play with Choo examples but you can also easily integrate Choo with other bundlers or take a look at the minimal vanilla approach if that's your jam.

Ch-ch-ch-changes

Now I'm sure by this point your mind is blown, alas there is zero point of using Choo to render static content like this. Choo becomes useful when you have changing state over time and dynamic views: that means responding to events, timers, network requests etc.

Continue reading %Fun Functional Programming with the Choo Framework%

by Mark Brown via SitePoint