updated README

This commit is contained in:
Geoff Doty 2018-11-30 05:17:45 -05:00
parent 258cef8568
commit 7358678c98
1 changed files with 52 additions and 8 deletions

View File

@ -1,39 +1,83 @@
# Rapid RiotJS # RiotJS App Starter
> A Starter kit > 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. 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 ### Features
- `RiotJS` 3.x - `RiotJS` 3.x
- `Web Components` for reuseable UI - `Web Components` for reuseable UI
- `Events` for communication - `Events` for communication
- `Route` for url navigation - `Route` for url navigation
- Based on `HTML5Boilerplate` 6.x - `HTML5Boilerplate` 6.x static file base
- `JSCS` for coding style - `ESLint` for coding style
- `Jasmine` for testing
- `Gulp` for production builds - `Gulp` for production builds
- `Rollup` to only export the code your using
### Requirements
[NodeJS](https://nodejs.org/) is used to install `vendor/` dependencies and a method to `build` your project for production via `gulp`
## Getting Started ## 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? ## Why Zero-Build?
**SPEED!** **SPEED!**
A production pipe-line should *NOT* be in your way while developing... A production pipe-line should *NOT* be in your way while developing...
...however, `npm build` adds it when you need it ...however, `npm build` is there when you need it
## How ## 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]('gulpfile.js') 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 ## 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 ## 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... 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. ...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