FormidableLabs/notes-react-backbone

Name: notes-react-backbone

Owner: Formidable

Description: Notes using React + Backbone.js

Created: 2014-09-28 23:39:18.0

Updated: 2017-11-13 14:12:29.0

Pushed: 2014-11-05 13:52:28.0

Homepage:

Size: 988

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Notes - React + Backbone

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.

m install
scripts/init-db.js

Run the watchers, dev and source maps servers

lp 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.

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

Run the server.

DE_ENV=production node server/index.js

React Notes

Optimizations

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

lp prod

nified size
rl -so /dev/null -w '%{size_download}\n' http://127.0.0.1:3000/app/js-dist/bundle.js
28

nified gzipped size
rl -so /dev/null -w '%{size_download}\n' --compressed http://127.0.0.1:3000/app/js-dist/bundle.js
7

And in dev (for a comparison):

lp dev

minified size
rl -so /dev/null -w '%{size_download}\n' http://127.0.0.1:3000/app/js-dist/bundle.js
156

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.