RiotJS App Starter

A Rapid Application Starter kit for RiotJS minimalists

Rapidly prototype your next single-page application, with a zero-build out-of-the-box web-component solution using RiotJS for the fastest way to iterate over UI for development -- bar-none.

No crazy syntax, just HTML, CSS and JavaScript.

No isolated eco-system, work with any library, any tool, any way you want!

RiotJS is tiny; tiny foot print, tiny API, and this leads it to be extremely fast to learn -- closest to web standards as you can get.

What are you waiting for -- GO FORTH AND BUILD YOUR APP, RAPIDLY!

Designed to be as simple as possible, but no simpler

Features

• RiotJS 3.x give us the core UI building blocks
  • Web Components for composable and reusable UI
  • Events to communicate between components or other code
• Riot-Route the simplest way to manage URL navigation
• Grayscale Small, 2kb gzipped CSS framework with a layout focus
• Gulp is there for when your ready for production. See [Build for Production](#build production) below

Requirements

• NodeJS

Installs vendor/ dependencies and npm build to get your project into production

Why Zero-Build?

SPEED!

A production pipe-line should NOT be in your way while developing. You should be able to iterate over your designs FAST , see those changes FAST, and when your ready, you should be able to build your solution FAST , but only as the final step -- not every step.

npm build is still there. See Below.

How

RiotJS client-side compiler is blazing fast, it only adds about 10kb, and it can easily handle thousands of tags/actions in hundreds of milliseconds.

Getting Started

1. Run npm install, this will install all vendor dependencies

2. Start coding in app

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

* try live-server from npm or via Visual Studio Code plug-in it's awesome!

Project Structure

app/               <-- develop here
    css/           <-- your css files
    js/            <-- your javascript files
        app.js     <-- basic routing/utils bootstrap
    images/        <-- your images
    tags/          <-- web-components
    vendor/        <-- vendor dependencies, ie code you did not write
    index.html     <-- start here
    ...            <-- web meta files
docs/              <-- additional documentation
test/              <-- tests (one day)
gulpfile.js        <-- task runner
README.md
...                <-- misc project meta files

Web Components

Web-components are just HTML files wrapped in a custom tag, which means they can be as simple as

<my-component>
    <button>
        Say Hello!
    </button>
</my-component>

These files are usually saved as my-component.tag, but to get proper syntax highlighting the norm is keep them as HTML files naming them something like my-componet.tag.html

Save in the tags/ folder, organize this however you like

Of course we want our component to do more, so...

...for now, go check out the RiotJS Guide

Build for Production

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 10kb

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.

Testing

• TBD

Additional Documentation

• How Dependencies are Used

TODO

• compile vendor libs to vendor.js
• Include a testing framework Jasmine, test.it, or?
• Is good AJAX support the missing ingredient? or isfetch good enough?
• add routing example

Support

Please open an issue for support.

Contributing

Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the guidelines, they're minimalistic;)

License

MIT