Notes using React + Backbone.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app/css
client
scripts
server
templates
.gitignore
.jshint-backend.json
.jshint-frontend.json
.travis.yml
README.md
TODO.md
gulpfile.js
package.json
webpack.config.js

README.md

Notes - React + Backbone

Build Status

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

Application

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

Development

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:

  • http://127.0.0.1:3000/: Server-side bootstrap, JS takes over.
  • http://127.0.0.1:3000/?__mode=noss: Pure JS.
  • http://127.0.0.1:3000/?__mode=nojs: 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.

Production

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

Optimizations

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' http://127.0.0.1:3000/app/js-dist/bundle.js
279528

# Minified gzipped size
$ curl -so /dev/null -w '%{size_download}\n' --compressed http://127.0.0.1:3000/app/js-dist/bundle.js
88977

And in dev (for a comparison):

$ gulp dev

# Unminified size
$ curl -so /dev/null -w '%{size_download}\n' http://127.0.0.1:3000/app/js-dist/bundle.js
1206156

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.