Docs

Everything You Need to Know

Tutorials

Demos

ChocolateChip-UI provides four reference apps for you to see how to put ChocolateChipJS's layouts, views, models, widgets and routes together to make apps. Get them by running the following command in the terminal:

chui -r

This will output a folder named "Chui Reference Apps" to your desktop. Inside are two folders: "basic" and "jspm". Each of these holds four examples:

  • SFCoffee - Specialty coffeeshops in San Francisco.
  • Vino - Wines of Northern California.
  • Fragranž - Sample colognes for men, women and children.
  • TodoMVC - Based on the popular TodoMVC, but reimaged for a mobile experience.

The difference between the contents of the two folders are in how the versions run. All demos in the "basic" folder use standard JavaScript. You can double click the index file to launch the app in the browser. In contrast, the apps in the "jspm" folder use ES6 syntax and features. They therefore require a build step to launch.

JSPM

The JSPM demos show how to organize your code using ES6 modules, ES6 coding patterns, a build process and browsersync. The end result is a single app file to load in the browser. Look inside the dev folder. This holds the app.js and whatever modules the app is using.

Build and Run

In order to run the JSPM examples you need to hve JSPM installed globally. To install it, run:

npm i -g jspm

Once you have JSPM installed, cd to the folder of an app and run:

npm i

When that's done, run:

jspm i

When that's done, run:

gulp

The gulp command will launch Babel to transpile the ES6 code into ES5, and JSPM to parse the imports, exports, figure out the dependencies and bundle it all up into one file, which it outputs into the app's js folder. The app's index.html file loads that app.js file from there when the server instance starts up. The gulp task also spans code watchers, so any changes make and save should automatically trigger a rebuild and browser reload for you.