zzzap v0.2.2
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 zzzapExample (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 eventsstate.params- router parameters that are provided bynanorouterstate.query- router querystrings provided bynanorouterstate.href- a current hrefstate.route- current matched routestate.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 callemit('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 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 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!