133 lines
4.9 KiB
Markdown
133 lines
4.9 KiB
Markdown
# 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](https://riot.js.org/) 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](https://riot.js.org/) 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](https://riot.js.org/) 4.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](https://riot.js.org/api/route/) the simplest way to manage URL navigation
|
|
- [Grayscale](http://n2geoff.github.io/grayscale/) Small, 2kb gzipped CSS framework with a layout focus
|
|
- [Gulp](https://gulpjs.com/) is there for when your ready for *production*. See [Build for Production](#build production) below
|
|
|
|
**Requirements**
|
|
|
|
- [NodeJS](https://nodejs.org/)
|
|
|
|
> 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](https://riot.js.org/) [client-side compiler](https://riot.js.org/online-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 `public`
|
|
|
|
3. run the `public/index.html` from your favorite web server
|
|
|
|
> try `live-server` from `npm` or via [Visual Studio Code]() plug-in it's awesome!
|
|
|
|
### Project Structure
|
|
|
|
```
|
|
public/ <-- develop here
|
|
css/ <-- your css files
|
|
js/ <-- your javascript files
|
|
config/ <-- configuration files used in app.js
|
|
config.js <-- global app settings, such as version
|
|
routes.js <-- routes combined
|
|
mixins/ <-- collection of mixins
|
|
store.mixin.js <-- localStorage mixin
|
|
app.js <-- application 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
|
|
|
|
```html
|
|
<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](https://riot.js.org/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](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.
|
|
|
|
|
|
## Testing
|
|
|
|
- TBD
|
|
|
|
|
|
## Additional Documentation
|
|
|
|
- [How Dependencies are Used](docs/dependencies.md)
|
|
- [Module System](docs/modules.md)
|
|
|
|
## TODO
|
|
|
|
- compile vendor libs to vendor.js
|
|
- Include a testing framework [Jasmine](https://jasmine.github.io/), [test.it](https://github.com/n2geoff/testit), or?
|
|
- Is good AJAX support the missing ingredient? or is`fetch` good enough?
|
|
- add routing example
|
|
|
|
## Support
|
|
|
|
Please open [an issue](http://code.negative9.net/geoff/riot-starter/issues/new) for support.
|
|
|
|
## Contributing
|
|
|
|
Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the [guidelines](CONTRIBUTING.md), they're minimalistic;)
|
|
|
|
## License
|
|
|
|
[MIT](LICENSE)
|