Notes using React + Exoskeleton
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app/css Some qa attrs, add server global dev modes. Nov 12, 2014
client
scripts
server Add backend eslinting too. Jan 27, 2015
templates Switch to divs instead of buttons for ie. Sheesh. Nov 12, 2014
test Add alternate ports for test server. Nov 7, 2014
.eslintrc
.gitignore Initial import. Nov 3, 2014
.jscsrc Finish off jscsrc Jan 29, 2015
.travis.yml
README.md
app.html Switch to known good BS lib for ie8. Nov 13, 2014
gulpfile.js
package.json
webpack.config.js Update JSCS rules. Jan 28, 2015

README.md

Notes - React + Exoskeleton

Build Status

A version of Notes written using React and CommonJS, built with Webpack. Test out the LocalStorage version at: http://formidablelabs.github.io/notes-react-exoskeleton/app.html

Application

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

  • React for view logic.
  • Exoskeleton for models, collections and routers.
  • Markdown JS for markdown conversion.
  • Bootstrap for CSS (not JS).
  • HTML5Shiv, ES5 shim + sham for polyfills.
  • Standalone $.ajax replacement.

Notably, the app does not include:

  • Bootstrap JS
  • jQuery
  • Underscore/Lodash

Instead relying on React to mostly take care of DOM work with a little bit of VanillaJS.

Development (REST)

This section is for the convention (REST) server, with a real backend.

Dev Mode

Install, setup.

$ npm install
$ node 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
$ node scripts/init-db.js

Run the server.

$ NODE_ENV=production node server/index.js

Development (LocalStorage)

For public, static GitHub pages branch (gh-pages), we post a different version of the app with the extra environment variable setting: BUILD_LOCALSTORAGE=true. This includes the additional Backbone.LocalStorage library in bundle.js, which we drive from a static, in-repo page, app.html.

To develop against the local storage version,

$ npm install
$ gulp ls

URLS to test things out:

  • http://127.0.0.1:3001/app.html: Static web page served from our static sources server (same as is used for source maps).

The live URL pushed to gh-pages is available at: http://formidablelabs.github.io/notes-react-exoskeleton/app.html

React Notes

Optimizations

Production REST App: 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
170775

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

Demo LocalStorage Version: And minified, unzipped in LocalStorage version

$ npm run-script build-ls
$ gulp server:sources

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

Development REST App: And unminified, unzipped 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
770537