RiotJS App Starter

A Rapid Application Starter kit for RiotJS

Rapidly prototype your next single-page application, with a zero-build out-of-the-box web-component solution. Need to go beyond the prototype stage, fret not, the tools are in-place to take you to production.

This is built as simple as possible, but no simplier

Features

• RiotJS 3.x
  • Web Components for reuseable UI
  • Events for communication
  • Route for url navigation
• HTML5Boilerplate 6.x static file base
• ESLint for coding style
• Gulp for production builds

Requirements

NodeJS is used to install vendor/ dependencies and a method to build your project for production via gulp

Getting Started

1. Run npm install to load vendor dependencies

2. Start coding in src/public

3. run the public/index.html from your favorite web server*

* try live-server from npm or via Visual Studio Code plug-in

Why Zero-Build?

SPEED!

A production pipe-line should NOT be in your way while developing...

...however, npm build is there when you need it

How

RiotJS is blazing fast, outside of a production build, this project uses the runtime-compiler that can easily handle thousands of tags/actions in hundreds of milliseconds.

Build

When you are ready to move to production you can run npm build. This will create a dist folder with all your optimized assets, web-components, vendor dependencies and remove the riot runtime-compiler to shave off another 100kb

Check out the gulpfile for all the build options if you do not want to build everything. Every task is commented, and split-up so you can grep it easily.

Project Structure

docs/                 <-- additional documentation
src/
    public/           <-- development is done here
       css/           <-- your css files
       js/            <-- your javascript files
       images/        <-- your images
       tags/          <-- web-components
       vendor/        <-- vendor dependencies, ie code you did not write
       index.html     <-- start here
       ...            <-- web meta files
test/                 <-- tests (one day)
gulpfile.js           <-- task runner
README.md
...                   <-- project meta files

Polyfills

Todays "Evergreens" browsers support 99% of ES6, providing a pethra of capabilities, such as import, class, fetch, and promise. Depending on your desired browser support, you may find a polyfill to suit your needs...

...but such is beyond the scope of this starter kit.

Testing

• TBD

TODO

• integrate Jasmine for tests
• bring in ajax lib (n2geoff/riot-http) for non-es6 environments?
• add routing example