84 lines
2.8 KiB
Markdown
84 lines
2.8 KiB
Markdown
# 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](https://nodejs.org/) 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]('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
|
|
|
|
```
|
|
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
|