Stella Styling
Experiment to mix sinatra and javascript.
####Demo
-
React
-
JSPM is used to manage and package the javascript.
-
Isomorphic React - how does this work in practice ?
-
Rack provides an asset pipeline for SASS -> CSS compilation
-
Sinatra provides a simple json endpoint to drive the demo app
-
Rake pulls it all together
It's responsive...
Isomorphic React
One of the problems with react, is that the initial load and parsing of the javascript can be slow. On a modern device this isn't a problem,
but on an older phone, the delay can make for a bad user experience - it appears as though the website has stopped responding.
The work around for this is to pre render the page using 'isomorphic' react. For stella, most of the content is pulled dynamically from
json endpoints - this can not be pre-redndered. However parts of stella can be pre-rendered:
####Isomorphic version (Best viewed on a mobile)
This works really well on a mobile device and effectively disguises what can be a slow first render.
Node
Stella uses node to create a pre-rendered version of the site, and embeds this as static content into the page.
Dev Setup
When running in dev mode, the ES6/2015 javascript is compiled at runtime.
bundle
rake bootstrap
rake start
Open http://localhost:9292/index.html
Isomorphic
The isomorphic version uses node to pre-render the page. It's missing a fair bit of content, but on slow mobile devices at least the user isn't left with an empty page.
Open http://localhost:9292/iso
You will see an initial static version of the site, until react takes over client side. This works best on a mobile.
Production setup
bundle
rake bootstrap
rake prod:build
This will create a ./dist
folder with minified veriosn of the javascript. It will also pre-render a static version of the site,
and embed this into the index.html and iso.html
Running in production mode
rake prod:start
This will serve up content from the dist
folder
http://localhost:9292/index.html
http://localhost:9292/iso.html
Deploying to heroku
rake deploy:heroku