learn riot.js

"Riot is an incredibly fast, powerful yet tiny client side (MV*) library for building large scale web applications."

Table of Contents

• Why
• What
• Can We Use "Native" Web Components?
• How
• FAQ
• Resources
• Official links
• Introductory Tutorial
• Examples
• Screencasts

Why?

We need a way of organising the pieces of our web applications into discrete components that can be developed/tested independently and composed into a fast User Interface/Experience.

What?

Can We Use Native Web Components ?

Web Components are going to revolutionize the web. Eventually.
Sadly, there is not yet widespread adoption for the Web Component spec.

Even though Google Chrome supports all the pieces of Web Components and has over 50% Market Share, Internet Explorer and Safari are still lagging behind: http://caniuse.com/#search=components

The current status is "working draft" see: http://www.w3.org/standards/techs/components#w3c_all
which means the finer details are still being debated by the W3C, which means we might sill have a few months (years?) to wait...

So, while we wait for Internet Explorer to catch up, we are using Riot because its much smaller and thus faster-to-learn than everything else out there...

A quick introduction to the Riot.js client side MVP library for people who want to build minimalist apps.

Imagine React went on a diet and got better syntax, that's Riot.js.

How?

On the Riot.js website, visit the "Guide" page: http://riotjs.com/guide/

W3C Valid Code: https://validator.w3.org/nu/?doc=https%3A%2F%2Flearn-riot.herokuapp.com%2Ftodo%2F

Videos

Searching YouTub for riot.js https://www.youtube.com/results?search_query=riot.js there are thousands of results. If you are totally new to Riot and want a "Why Riot" overview,

FAQ?

If you are wondering how you can require() a .tag file ( that is not .js or .json - the standard files you require in node.js ) The answer is simple: when you require('riot') the riot module extends node's native require method (this is JavaScirpt after all, everything is accessible/mutable) which means that require() understands how to load a .tag file.

More FAQ: http://riotjs.com/faq/

Resources

Official links

• Site: http://riotjs.com/
• GitHub repo: https://github.com/riot/riot
• Muut Manifesto (the makers of riot.js): https://muut.com/manifesto

Introductory Tutorial

• http://riotjs.com/guide/

• Cheat Sheet: http://martinmuzatko.github.io/riot-cheatsheet/ (basic examples)

Examples

• Riot ToDoMVC: https://github.com/3den/riotjs-todomvc

Screencasts

• RiotJS - Introdution Part #1 by @andrewdelprete - Youtube [03:29]
• RiotJS - Event Handlers and Rendering Part #2 by @andrewdelprete - Youtube [03:10]
• RiotJS - Looping with each attribute Part #3 by @andrewdelprete - Youtube [02:19]
• RiotJS - Nested Tags / Inheritance Part #4 by @andrewdelprete - Youtube [03:38]
• RiotJS - Expressions and Classes - Part #5 by @andrewdelprete - Youtube [02:00]
• RiotJS - Observables - Part #6 by @andrewdelprete - Youtube [05:09]
• RiotJS - Routing - Part #7 by @andrewdelprete - Youtube [05:36]

license

MIT: https://en.wikipedia.org/wiki/MIT_License