choo
Version:
A 4kb framework for creating sturdy frontend applications
348 lines (287 loc) • 16.5 kB
Markdown
## `7.0.0` All the little things
It has been quite a while since the last major version of Choo. Since it's
release, `choo@6` has recieved a bunch of features and patches, but some changes
has been put off because they'd have an affect on the API in a way that could be
breaking for some users. With this release we've merged all these minor, but
breaking changes all at once.
The way in which Choo handles hashes in the URL has proved confusing for both
newcomers and seasoned Choo users. In a prior patch the `hash` option was added
which could be used to disable hash routing. With this release we're changing it
to be *disabled by default*.
Rendering pages server side is an excellent way to increase page performance and
Choo supports it out of the box. Choo also allows for rehydrating the client
with what state was used when rendering on the server side. To ensure that the
application state is identicial regardless if hydrated or not, the internals for
routing has been changes so that `href`, `query`, `param` and `route` are all
available on application state at the time when stores are initialized.
In prior versions, when rendering on the server, the state that was provided to
`toString` would be merged onto the application state. Meaning consecutive calls
to `toString` would accumulate on the application state and persist in-between
render. With this change, application state is no longer mutated during server
side render. This will affects those of you doing server side rendering and then
plucking out properties from the application state. You can now be assured that
only the state that is provided to `toString` is modified during rendering.
```diff
var html = app.toString('/', state)
- var title = app.state.title
+ var title = state.title
```
And lastly, we've updated depndencies and even dropped a dependency which is
no longer required by modern browsers. The dependency `xtend` was dropped in
favour of
[Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign). This change has also been propagated throughout
the Choo universe i.e. choo-devtools and choo-service-worker etc. If you are
supporting legacy browsers (IE11 and bellow), we recommend the polyfill service
https://polyfill.io which will detect legacy browsers and load the appropiate
polyfills.
That's all for now, keep being awesome!
## `6.0.0` Same as it ever was
In the past few months we've been able to use `choo@5` a bunch, and people seem
to like it a lot! In this patch all we're doing is taking choo's existing API,
and polishing the internals. In theory this means breaking changes, but in
practice it will mostly mean people need to update their dependencies, and
things will work great.
Choo v6 includes the upgrades to `bel@5` and `nanomorph@5`. This means up to
20x faster server rendering, and up to 10x improved browser rendering speeds.
We've also fixed DOM node caching, and introduced sibling node reordering.
This release also includes an overhauled timing API. We're now capturing more
events, and are leveraging this in tools like `choo-log` to provide consistent
feedback on performance.
Choo is now also completely prototype based. It not only means faster execution
times, and more maintainable codebase - but you can also override methods if
you ever need to.
We've also tweaked the event system a little. All built-in event names are now
available as constants under `app.state.events`. And we've introduced three new
events: `'navigate'` will trigger whenever a route changes, `'replaceState'`
can be called to redirect routes, and `popState` which is emitted when the back
button in the browser is pressed.
To top things off, we've reintroduced querystring parsing. An object containing
the current represenation of the search query (e.g. `?foo=bar`) can be found
under `state.query`. We used to do something similar in choo v4 and below, and
we're happy to reintroduce it in this release!
And that's about it - we've upgraded a whole slew of deps, and removed a few we
didn't quite use. Overall we're quite proud of the new codebase, and filled
with joy we didn't have to make any changes to the API - additions only.
Thanks heaps for reading this far, we hope you enjoy this release as much as we
did building it. Happy coding! -Team Choo :sparkles:
## `5.1.0` Timing API support
In order to improve, we must measure first. Specifically when it comes to
framerate there are very specific numbers we can rely on: `~16ms` for any given
frame to achieve 60fps. That's why in `5.1.0` we're adding support for the
[window.Performance](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
API.
We hope that by adding support for timers, people building applications on
`choo` will become more aware of their application's performance and learn how
and when to optimize. Hopefully this will help in making applications
accessible to all sorts of devices, and not just the latest and greatest.
Timing support will be enabled by default, and can be toggled off by passing
`{ timing: false }` to the `var app = choo()` constructor.
Timing calls will not run in browsers that don't support it out of the box.
For unsupported browser's there's a polyfill available at
[nolanlawson/marky](https://github.com/nolanlawson/marky). The timing marks are
`choo:renderStart`, `choo:renderEnd`. The resulting diff is stored as
`choo:render`.
We hope you'll enjoy this release; thanks heaps for using choo!
### changes
- added out of the box support for performance timings (`window.performance`)
- updated `nanobus` to `3.0.0`; `'*'` events now run after named events
---
## `5.0.0` Welp Welp Welp
So it turns out Choo could be radically simplified. We're now comfortably
sitting at `~4kb`, have removed a whole bunch of words from the API and should
be a whole lot faster. We've [written about it
before](https://medium.com/@yoshuawuyts/choo-v5-bc775b007b5e); if you're
interested we recommend reading through that post.
We're now using an event emitter, mutable state and explicit re-renders. Some
people might frown at first at the words "mutable state", but if you think it
through the mental model doesn't change. "State" has always been a concept of
an object that changes over time; we then render the DOM as a snapshot of that
state.
What we've done is change the way we mutate that state - we no longer generate
a ton of expensive intermediate objects to mutate the state, but instead mutate
the state directly. In turn we've also removed the magic re-rendering and made
it explicit. This enables people to create tight render loops that can even be
used in GC constrained environments like games or music production. We think
this change was well worth it, and will make a lot of sense going forward.
People might also wonder why we've moved away from `flux`/`elm` and are using
an event emitter now. It turns out that the previous architecture had a lot of
confusing words that made it harder to learn than it should. It was also not
possible to react to changes; the thing that changed always had to specify what
needed to respond to it. By using event emitters we've changed this, which will
make relations in the application more expressive. All in all, it turned out
that all we needed for this was a simple event emitter - we think this was well
worth the change and breaking away from what we were previously doing.
_Pretty much everything about the API changed in this version. There's
literally nothing left to remove from the API tho so this is probably the last
time we get to break anything in a significant way._
### changes
- :exclamation: state is now mutable and renders are triggered through
`.emit('render')`.
- :exclamation: we've replaced `.use()`, `.model()` and the rest of the choo
architecture with a reworked `.use()` method. It's called once on boot, and
exposes a mutable reference to `state` and [an event
emitter](https://github.com/yoshuawuyts/nanobus/) that's compatible with
Node's
[`require('events').EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter)
- :exclamation: the `.router()` method has been replaced with `.route()`,
replacing the nested array API. This should be easier to remember and more
performant.
- :exclamation: we've replaced `morphdom`/`yo-yo` with `nanomorph`. The two
algorithms are very comparable. The differences are that the new algorithm
is smaller and the value of input fields on re-rendering will be whatever the
`value=""` attribute is.
- :exclamation: `choo/mount` is now available as `app.mount()` and calls
`app.start()` internally now
---
## `4.0.0` The routing patch
This patch changes the way we handle routes. It introduces query string
support (!), and changes the router to use a lisp-like syntax. It also inverts
the argument order of effects and reducers to be more intuitive. We also
managed to sneak in some performance upgrades :sparkles: - We hope you enjoy
it!
### changes
- :exclamation: slim down server side rendering API |
[issue](https://github.com/yoshuawuyts/choo/issues/191) |
[pull-request](https://github.com/yoshuawuyts/choo/pull/203)
- :exclamation: update router API to be lisp-like
- :exclamation: swap `state` and `data` argument order |
[issue](https://github.com/yoshuawuyts/choo/issues/179)
- :exclamation: remove `choo/http`. Use [xhr](https://github.com/naugtur/xhr)
instead | [pull-request](https://github.com/yoshuawuyts/choo/pull/269)
- update `router` to use memoization |
[issue](https://github.com/yoshuawuyts/sheet-router/issues/17) |
[pull-request](https://github.com/yoshuawuyts/sheet-router/pull/34)
- support inline anchor links |
[issue](https://github.com/yoshuawuyts/choo/issues/65)
- allow bypassing of link clicks in `sheet-router` |
[issue](https://github.com/yoshuawuyts/sheet-router/issues/15) |
[pull-request](https://github.com/yoshuawuyts/sheet-router/pull/27)
- update router API to handle hashes by default
- update router to provide out of the box support for Electron
- update `location` state to expose `search` parameters (query strings) |
[issue](https://github.com/yoshuawuyts/sheet-router/issues/31)
---
## `3.3.0`
Yay, `plugins` now support `wrappers` which is a segway onto HMR, time travel
and other cool plugins. These changes have come through in barracks `v8.3.0`
and a lil fix in `v8.3.1`. This is a lil patch before `4.0.0` comes through,
but should be super valuable. Wooh!
### changes
- updated barracks to `v8.3.1`
---
## `3.2.0`
Wooh, `plugins` are a first class citizen now thanks to the `.use()` API. It's
a multiplexed version of the old `app = choo(hooks)`. It should enable
attaching multiple hooks onto the same API, which is useful to create re-usable
extensions to `choo`. They should be used with care though, and be as generic
as possible, but the docs should provide enough backdrop for that. Anyway,
have fun with plugins! :tada:
### changes
- added `app.use()`
---
## `3.1.0`
And another patch down. This time around it's mostly maintenance and a bit of
perf:
- The addition of the [nanoraf](https://github.com/yoshuawuyts/nanoraf)
dependency prevents bursts of DOM updates thrashing application performance,
quite possibly making choo amongst the fastest frameworks out there.
- We now ship standalone `UMD` bundles on each release, available through
[https://unpkg.com/choo](https://unpkg.com/choo). The goal of this is to
support sites like codepen and the like; __this should not be used for
production__.
---
## `3.0.0`
Woooh, happy third birthday `choo` - _thanks dad_. You're all grown up now;
look at how far you've come in the last month. You've grown... tinier? But yet
you do more? I love you `choo` - _shut up dad_.
### Notable changes
#### Who's the tiniest of them all?
`choo` is now `5kb` optimized! That's `2kb` less compared to v2. _Woah, how?_
We now support [yo-yoify](https://github.com/shama/yo-yoify) which optimizes
those lil template tags to `document.createElement()` calls. So not only is it
smaller, creating elements now has no overhead. Pretty nifty eh? Mad shoutout
to [Shama](http://twitter.com/shamakry) for building this!
#### Captain Hook(s)
V3 introduces `hooks` - powerful functions that are called at certain points in
the refresh cycle. Unlike functions in `models` these functions have unfiltered
access to all properties, call stacks and more. They're super useful when
building error handling, logging or persisting for stuff like `hot reloading`.
I quite like them, and I'm def keen to see what uses people will come up with!
#### Effect Composition :train::train::train::train:
`effects` are now composable by calling a `done(err, res)` callback when
they're done executing. This means that multiple namespaced effects can be
chained together to form some higher level behavior.
Think of cases like "logout" - multiple models must be cleared, perhaps tokens
invalidated on the server, all in a certain order. This requires multiple
models to work in tandem. - And now that's possible! :sparkles:
#### Pathfinders guide
We've started work on the [choo
handbook](https://github.com/yoshuawuyts/choo-handbook) - a lil manual to help
you get started, not only with choo, but with web development in general. It's
super modest still, only containing a single `choo` tutorial, but we'll be
expanding this over the coming months. If you want to contribute some docs,
there's [a whole section of
ideas](https://github.com/yoshuawuyts/choo-handbook/issues/10) on stuff that
might be neat to write. Any lil bits are welcome! Shout out to
[Tim](https://twitter.com/timwis) for making this happen :tada:
#### The Cycle of Life
`views` have gone through a bit of a change - they're now required using
`require('choo/html')` so they can be factored out of a project into standalone
[bel](https://github.com/shama/bel) components at any time. But additionally
these components have gained super powers through the adition of `onload` and
`onunload` hooks. Components can now react to being mounted or not, which makes
them ideal to implement standalone widgets. This behavior uses [html5
MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
under the hood, so it will work anywhere with a DOM! Again, this was all
[Shama](http://twitter.com/shamakry)'s hard work.
#### Test coverage
`choo` has gained a beaut blanket of tests, courtesy of
[Todd](https://twitter.com/whale_eat_squid) and
[Ben](https://twitter.com/bendrucker/). We've got server, browser and
_pretty-much-all-browsers-known-to-mankind_ style testing which should give us
a pretty good idea if stuff breaks. Neat!
#### Core dump
Internally we've moved the core of `choo` into a separate package -
[barracks](https://github.com/yoshuawuyts/barracks). `choo` is now mere glue
code around `barracks`, `yo-yo` and `sheet-router`. This is good news for folks
who like `choo`, but don't agree with all decisions. Go forth and build your
own lil framework!
### Changelog
- move `choo.view` out to `require('choo/html')` #71 | pr #103
- streamline view API #35 | pr #111
- higher order functions #34 | pr #104
- create lifecycle hooks #1 | feature addition in dependency covered by semver
- implement state hooks #15 | pr #104
- add yo-yoify #3 | pr #110
- rename "app" namespace #82 | pr #111
- enable browser testing | pr #86
- propagating actions creates infinite loop #114 | pr #104
- state is now immutable in `reducers` and `effects`
### Thanks
Huge thanks to everyone who's collaborated on this, provided feedback or
even mentioned it anywhere. It's been a hella lot of people, but seriously,
you're the best :steam_locomotive::train::train::train::train::train:
---
## `2.3.1`
- [76](https://github.com/yoshuawuyts/choo/pull/76) - fix router arguments
---
## `2.3.0`
- [55](https://github.com/yoshuawuyts/choo/pull/55) - load subscriptions once
DOM is ready
- heaps of documentation fixes; looks like choo is taking off 🐨
---
## `2.2.2`
- [53](https://github.com/yoshuawuyts/choo/pull/53) - fix assert call for
subscriptions
- [52](https://github.com/yoshuawuyts/choo/pull/52) - fix naming rootId
---
## `2.0.0`
### breaking changes
- namespaces are now enforced more strictly
- models now only accept a single argument
- the `namespace` key was introduced inside of models (was prior the leading
string in models)
- namespaced models can now only operate within themselves
---
## `1.0.0`
- first version of choo