Package Exports

choo
choo/html

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (choo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

choo

🚂🚋🚋🚋🚋🚋

Fun functional programming

A 4kb framework for creating sturdy frontend applications

Handbook | Ecosystem | CLI | Contributing | Chat

_{The little framework that could. Built with ❤︎ by
Yoshua Wuyts and

contributors}

Features

minimal size: weighing 5kb, choo is a tiny little framework
single state: immutable single state helps reason about changes
small api: with only 6 methods there's very few to learn
minimal tooling: built for the cutting edge browserify compiler
isomorphic: renders seamlessly in both Node and browsers
very cute: choo choo!

Example

var html = require('./html')
var choo = require('./')

var app = choo()
app.use(logger)
app.use(countStore)
app.route('/', mainView)
app.mount('body')

function mainView (state, emit) {
  return html`
    <body>
      <h1>count is ${state.count}</h1>
      <button onclick=${onclick}>Increment</button>
    </body>
  `

  function onclick () {
    emit('increment', 1)
  }
}

function logger (state, emitter) {
  emitter.on('*', function (messageName, data) {
    console.log('event', messageName, data)
  })
}

function countStore (state, emitter) {
  state.count = 0
  emitter.on('increment', function (count) {
    state.count += count
    emitter.emit('render')
  })
}

Want to see more examples? Check out the Choo handbook.

Philosophy

We believe programming should be fun and light, not stern and stressful. It's cool to be cute; using serious words without explaining them doesn't make for better results - if anything it scares people off. We don't want to be scary, we want to be nice and fun, and then casually be the best choice around. Real casually.

We believe frameworks should be disposable, and components recyclable. We don't like the current state of web development where walled gardens jealously compete with one another. We want you to be free, not shackled to a damp dungeon wall. By making the DOM the lowest common denominator, switching from one framework to another becomes frictionless. Components should run anywhere that has a DOM, regardless of the framework. choo is modest in its design; we don't believe it will be top of the class forever, so we've made it as easy to toss out as it is to pick up.

We don't believe that bigger is better. Big APIs, big dependencies, large file sizes - we see them as omens of impending userland complexity. We want everyone on a team, no matter the size, to fully understand how an application is laid out. And once an application is built, we want it to be small, performant and easy to reason about. All of which makes for easy to debug code, better results and super smiley faces.

FAQ

Why is it called choo?

Because I thought it sounded cute. All these programs talk about being "performant", "rigid", "robust" - I like programming to be light, fun and non-scary. choo embraces that.

Also imagine telling some business people you chose to rewrite something critical for serious bizcorp using choo. 🚂🚋🚋🚋

Is it called choo, choo.js or...?

It's called "choo", though we're fine if you call it "choo-choo" or "chugga-chugga-choo-choo" too. The only time "choo.js" is tolerated is if / when you shimmy like you're a locomotive.

Does choo use a virtual-dom?

choo uses [nanomorph][nanomorph], which diffs real DOM nodes instead of virtual nodes. It turns out that browsers are actually ridiculously good at dealing with DOM nodes, and it has the added benefit of working with any library that produces valid DOM nodes. So to put a long answer short: we're using something even better.

How can I support older browsers?

Template strings aren't supported in all browsers, and parsing them creates significant overhead. To optimize we recommend running browserify with yo-yoify as a global transform or using bankai directly.

$ browserify -g yo-yoify

Is choo production ready?

Sure.

API

This section provides documentation on how each function in choo works. It's intended to be a technical reference. If you're interested in learning choo for the first time, consider reading through the handbook first ✨

`app = choo([opts])`

Initialize a new choo instance. opts can also contain the following values:

opts.history: default: true. LIsten for url changes through the history API.
opts.href: default: true. Handle all relative <a href="<location>"></a> clicks and call emit('render')

`app.use(callback(state, emitter))`

Call a function and pass it a state and emitter. emitter is an instance of nanobus. You can listen to messages by calling emitter.on() and emit messages by calling bus.emit().

Choo fires messages when certain events happen:

DOMContentLoaded: when the DOM has succesfully finished loading
render: when the DOM re-renders

`app.route(routeName, handler)`

`app.mount(selector)`

Start the application and mount it on the given querySelector

`tree = app.start()`

Start the application. Returns a tree of DOM nodes that can be mounted using document.body.appendChild().

`app.toString(location, [state])`

Render the application to a string. Useful for rendering on the server. .use() calls w

`framework/html`

Create DOM nodes from template string literals. Exposes bel. Can be optimized using yo-yoify.

Installation

$ npm install choo

Support

Creating a quality framework takes a lot of time. Unlike others frameworks, Choo is completely independently funded. We fight for our users. This does mean however that we also have to spend time working contracts to pay the bills. This is where you can help: by chipping in you can ensure more time is spent improving Choo rather than dealing with distractions.