rv.js sample application
This is a very simple app to demonstrate the use of RequireJS and the use of the Ractive.js loader plugin (
src/index.html and read the comments to understand how everything fits together.
Make sure you have node.js installed, then install RequireJS:
npm install -g requirejs # the -g makes it globally available via the command line
To view the sample app, you'll need to fire up a webserver. I recommend installing
http-server for node:
npm install -g http-server http-server src -p 8000 # this assumes you're in the sample/ folder
Once the server is up and running, navigate to localhost:8000.
Optimising the app
Loader plugins come into their own when you use the RequireJS optimizer to bundle your application into a single file. In our case, the rv.js file will take a template and parse it, so that rather than including a whole load of HTML, your bundle contains the result of calling
Ractive.parse() on that HTML. Doing this means that each user's browser doesn't have to parse the template - it can skip ahead to rendering it.
Run the build script:
This will create an optimised version of the app - with Ractive, the template, and the app itself bundled into a single file - in the
http-server dist -p 8001
Navigate to localhost:8001 to see the end product.
It's worth going through the RequireJS documentation - heavy reading, but it will help you understand how to tweak settings for your project.