Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Notes - React + Backbone

Build Status

A version of Notes written using React and CommonJS, built with Webpack.


Notes is now client-side and server-side rendered thanks to the magic of React. The app uses:

  • React for view logic.
  • Backbone for models, collections and routers.
  • Lodash for Backbone and utilities.
  • jQuery.
  • Markdown JS for markdown conversion.
  • Bootstrap for CSS (not JS).
  • es5-shim, es5-sham, html5shiv for IE8 support.

Notably, the app does not include:

  • Bootstrap JS


Dev Mode

Install, setup.

$ npm install
$ ./scripts/init-db.js

Run the watchers, dev and source maps servers

$ gulp dev

URLS to test things out:

  • Server-side bootstrap, JS takes over.
  • Pure JS.
  • Pure server-side. Note that while some links may work (e.g. clicking on a note title in list), many things do not since there are absolutely no JS libraries. This is intended to just be a small demo of SEO / "crawlable" content.


Install, setup.

$ npm install --production
$ npm run-script build
$ ./scripts/init-db.js

Run the server.

$ NODE_ENV=production node server/index.js

React Notes


To test out how optimized the build is, here are some useful curl commands:

$ gulp prod

# Minified size
$ curl -so /dev/null -w '%{size_download}\n'

# Minified gzipped size
$ curl -so /dev/null -w '%{size_download}\n' --compressed

And in dev (for a comparison):

$ gulp dev

# Unminified size
$ curl -so /dev/null -w '%{size_download}\n'

Server/Client State & Rendering

One gotcha is to make sure the DOM state renders exactly the same on both client and server-side. Failing this, you will get a message like:

React attempted to use reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server.

in the dev. console. One such mistake that can cause this is setting a key or DOM id property off something like a Backbone Model cid, which can vary across client / server side, instead of the more reliable, consistent id property.


Notes using React + Backbone.js



No releases published


No packages published
You can’t perform that action at this time.