Master Riot: Learn Riot.js from Scratch
4.8 (101 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
499 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Master Riot: Learn Riot.js from Scratch to your Wishlist.

Add to Wishlist

Master Riot: Learn Riot.js from Scratch

Go from zero to Master with the React-inspired, Riot.js library. A powerful, yet flexible, javascript view layer.
Best Seller
4.8 (101 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
499 students enrolled
Created by Ray Viljoen
Last updated 4/2017
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 26 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create customised Riot implementations specific to the project they are working on.
  • Understand, in depth, each individual aspect of the Riot API.
  • Have the know-how to implement Riot in practical ways to build rich, real-world web applications.
  • Know how to use Riot both client-side & server-side.
  • Implement dynamic HTML5 routing, using the built-in Riot router.
  • Write more logical & modular Javascript via simple Riot design principles.
View Curriculum
  • Good understanding of the basic of Javascript.
  • Have a simple text editor with some syntax highlighting.
  • Basic knowledge of HTML is required.
  • Pre-installing Node.js would be advantageous, but is not required.


Learn to create rich web applications using the Riot javascript library.

Go from zero to mastery in all aspects of Riot, including configuration, client & server-side rendering, routing and more.

Master Riot is suited to both complete newcomers to Riot, and advanced Javascript developers looking to quickly and efficiently add Riot to their arsenal.

  • Learn to set up a base Riot configuration according to your project needs
  • Understand the entire Riot API in depth
  • Configure HTML5 routing and route filtering
  • Integrate Riot in more advanced server-side projects
  • Be more creative with your code via Riot’s flexible approach

An incredibly powerful library to know for any Javascript developer.

Javascript is hands-down the fastest growing programming language, and Riot is an invaluable skill for any developer with existing Javascript knowledge.

Riot will enable developers to create rich, powerful web applications without the steep learning curve of React or Angular, and also works exceptionally well as a view layer for native mobile & desktop apps, through the use of technologies such as Phonegap and Electron.

This course will allow Javascript developers to use Riot to it’s full potential and go from complete Riot novice to an an advanced level as quickly as possible.

Content and Overview

This course comprises of 25+ concise video lessons designed to make learning Riot as quick and efficient as possible. The course is suited to anyone with a good understanding of the Javascript programming language.

Absolutely no knowledge of any other Javascript libraries is required, although a basic grasp of Node.js would be helpful for a small section of the course.

The course starts by looking at the different variations of the Riot library, different compilation options and the basics of Riot’s tag syntax.

The next section, which forms the bulk of the course, takes an in-depth look at each individual aspect of the Riot API, including concepts such as styling, looping and handling user interactions.

After mastering the API, the course will move to using Riot on the server (Node.js) and then teach you how to configure and use the Riot router for creating rich, routable web apps.

The final section of the course is a practical project which will put all the previous lessons’ knowledge to use in a real-world web app.

Completing this course will allow you to start creating practical Riot-based web/mobile apps immediately.

All the lessons are designed to be as concise as possible and the course focuses on learning in a practical way.

Who is the target audience?
  • This course is designed for developers with some experience of writing dynamic Javascript and basic working knowledge of HTML5 and CSS.
  • It is also ideal for existing React developers , looking to learn Riot as a leaner, more flexible alternative.
Compare to Other Riot.js Courses
Curriculum For This Course
34 Lectures
3 Lectures 07:55

Why you would want to use Riot, what it aims to provide as a view layer and how it compares to alternative Javascript frameworks, such as React & Polymer.

Preview 03:00

Overview of lessons' structure & tools used in the lectures.

Lesson Structure
Getting Started
3 Lectures 22:42

Basics of getting up and running with Riot.

  • Different Riot library versions
  • Compilation options
  • Mounting your first Riot tag
Setting up a Riot project

Understand some key Riot concepts and the basic structure of Riot tag files.

Syntax & Structure

An overview of using Riot with CoffeeScript, TypeScript, ES6 etc.

Core / API
11 Lectures 57:39

Basics of Riot HTML tags, including concepts like parent & child tags.


Style Riot components with modular, scoped CSS.

Preview 03:12

Understand conditional tag expressions like "if", "show" and "hide".


Yield nested HTML inside a Riot tag using the special Riot yield tag.


Learn to implement event handlers for user interactions like 'click', 'submit' etc.

See attached for complete list of Riot events.

Event Handlers

Respond to Riot's own internal events like 'mount', 'unmount' etc.


Access DOM node contexts directly using the ref attribute.

Named Elements

An in-depth look at iterating objects and arrays inside Riot tag files.


Learn how to share functionality across your Riot tags with powerful mixins.

Preview 06:03

Use Riot to turn any object into an event-emitting observable object.


A demo of Riots very simple alternative syntax for writing completely valid W3C markup.

Writing Valid W3C Markup
2 Lectures 11:42

Use the Node module to compile and serve tags from the server.

Rendering Pre-Compiled Tags

Watch and compile Riot tags during development for serving pre-compiled Javascript tag files.

Manuel Pre-Compilation
Build a Giphy Search App - Riot v3
4 Lectures 29:15

Set up the Riot project from scratch and use Bower to add dependancies.

Project Setup

Implement a search field using Riot event handlers and connect to an api mixin to get result.

Implement the Search

Make the API mixin observable and implement API events for getting data from Tags.

API Data

Add a fancy CSS animation for the loading action and format the final API results on the front-end.

Display Results
3 Lectures 16:06

An overview to the changes affecting the Riot Router post version 3.

Routing Introduction - V3 Update

Introduction to using and configuring the built-in Riot router

Basic Routing

Fine-tune routing by implementing route filters.

Route Filtering
Build a Riot Blog App - Riot v2
7 Lectures 48:51

An overview of the changes to anticipate in this version 2 project.

Breaking changes affecting the project include:

  • Named elements now use ref instead of name.
  • Riot router no longer bundled with Riot core.
  • Event handlers no longer prevent default - preventDeafult() - behavior by default.
  • Template's no longer fail silently. Undefined tag variables therefore render undefined.
Blog Project Intro - Riot Version 2

Create the initial layout of the Blog app.

Project Setup

Create and persist a blog post.

Preview 13:32

Display the newly created post(s) on the app homepage in basic blogroll format.

Implement a Blogroll

Enable individual post linking from the blogroll, to a more detailed single post view.

Single Post View

Adapt the 'new post' form to enable post editing on a unique route.

Editing Posts

Implement a simple confirm/delete action on blog posts.

Delete Posts
1 Lecture 00:36
About the Instructor
Ray Viljoen
4.5 Average rating
937 Reviews
6,215 Students
4 Courses
Practical Courses Designed for Learning Efficiency.

Stackacademy provides high-quality Courses for Developers, with learning-efficiency as the #1 priority.

My name is Ray Viljoen,
I have 9 years experience as a Full Stack Developer and have real world experience building, maintaining & improving a wide range of applications.

My courses are concise, teaches practical skills and is designed to also serve as usable future reference material.