zzzap

0.2.2 • Public • Published

A performant, zappy framework for a futuristic SPA apps with unbelievably simplistic API.

What is zzzap?

Other than an electric shock, zzzap originated as a fork of choo being ported to a very perfomant virtual DOM implementation (it utilizes amazing snabbdom API under the covers).

Why not just use choo?

Native DOM diffing has advantage of being very versatile and compatible with most of the regular DOM APIs/libraries, but it also suffers from a performance penalty when diffing over a large number of elements. And this is why zzzap happened.

Features

  • a very small and easy to understand API
  • very performant (snabbdom virtual dom API)
  • isomorphic / SSR ready

Installation

$ npm install zzzap

Example (original choo example):

var html = require('zzzap/html')
var log = require('choo-log') // anything compatible with choo 6.x.x API
var zzzap = require('zzzap')
 
var app = zzzap()
app.use(log())
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 countStore (state, emitter) {
  state.count = 0
  emitter.on('increment', function (count) {
    state.count += count
    emitter.emit('render')
  })
}

For a Jsx example, please visit examples

Events

Events system is the very same, intact choo event API driven by nanobus.

Possible built-in events are:

  • DOMContentLoaded in state.events.DOMCONTENTLOADED
  • render in state.events.RENDER
  • navigate in state.events.NAVIGATE
  • pushState in state.events.PUSHSTATE
  • replaceState in state.events.REPLACESTATE
  • popState in state.events.POPSTATE
  • DOMTitleChange in state.events.DOMTITLECHANGE

State

One of the original advantages of choo is a well-though, simple concept of a shared state that is very fast and easy to reason about. It comprises of some built-in properties and interfaces such as:

  • state.events - a current track of all event emitter events
  • state.params - router parameters that are provided by nanorouter
  • state.query - router querystrings provided by nanorouter
  • state.href - a current href
  • state.route - current matched route
  • state.title - current DOM title, responds to DOMTitleChange event

Server-side rendering

Using app.toString() in NodeJs will call snabbdom's snabbdom-to-html and render the whole virtual DOM tree to string.

API

The following API section is mostly the exceprt from the original choo repository.

This section provides documentation on how each function in zzzap works. It's intended to be a technical reference.

app = zzzap([opts])

Initialize a new zzzap 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 emitter.emit(). Callbacks passed to app.use() are commonly referred to as 'stores'.

If the callback has a .storeName property on it, it will be used to identify the callback during tracing.

See #events for an overview of all events.

app.route(routeName, handler(state, emit))

Register a route on the router. The handler function is passed app.state and app.emitter.emit as arguments. Uses [nanorouter][nanorouter] under the hood.

See #routing for an overview of how to use routing efficiently.

app.mount(selector)

Start the application and mount it on the given querySelector. Uses [nanomount][nanomount] under the hood. This will replace the selector provided with the tree returned from app.start(). If you want to add the app as a child to an element, use app.start() to obtain the tree and manually append it.

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.

zzzap/html

Create virtual DOM nodes from template string literals. Exposes snabbdom.

zzzap/html/h

Exposes virtual dom snabbdom-pragma. Requires additional .babelrc property and transform-react-jsx package:

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "h"
    }]
  ]
}

Contribution

Anyone is welcome to contribute and submit PRs. Don't be shy!

License

MIT

Package Sidebar

Install

npm i zzzap

Weekly Downloads

2

Version

0.2.2

License

MIT

Last publish

Collaborators

  • graforlock