FormidableLabs/notes-react-exoskeleton

Name: notes-react-exoskeleton

Owner: Formidable

Description: Notes using React + Exoskeleton

Created: 2014-11-03 23:53:52.0

Updated: 2017-09-01 18:03:35.0

Pushed: 2015-03-18 21:23:18.0

Homepage: http://formidablelabs.github.io/notes-react-exoskeleton/app.html

Size: 895

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Notes - React + Exoskeleton

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.

m install
de 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
de scripts/init-db.js

Run the server.

DE_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,

m install
lp 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:

lp prod

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

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

Demo LocalStorage Version: And minified, unzipped in LocalStorage version

m run-script build-ls
lp server:sources

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

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