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.
4.8 (41 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.
146 students enrolled
77% off
Take This Course
  • Lectures 28
  • Length 2.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2016 English

Course Description

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.

What are the requirements?

  • 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.

What am I going to get from this course?

  • 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.

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction
Course Overview

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.


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

Section 2: Getting Started

Basics of getting up and running with Riot.

  • Different Riot library versions
  • Compilation options
  • Mounting your first Riot tag

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


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

Section 3: Core / API

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


Style Riot components with modular, scoped CSS.


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


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


Access DOM node contexts directly using name and id attributes.


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

See attached for complete list of Riot events.


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


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.


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.

Section 4: Routing

Introduction to using and configuring the built-in Riot router


Fine-tune routing by implementing route filters.

Section 5: Server-Side

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


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

Section 6: Build a Riot Blog app

Create the initial layout of the Blog app.


Create and persist a blog post.


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


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


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


Implement a simple confirm/delete action on blog posts.


Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ray Viljoen, Courses Designed for Learning Efficiency. provides high-quality e-courses for developers & digital creatives, with learning-efficiency as the number 1 priority.

My name is Ray Viljoen, I have 9 years of development experience as a full stack developer for a London-based tech company and I'm 100% self-taught.

My courses focus on practical skills and is designed to be easy to follow and review. Every lesson is concise and aims to teach real world skills.

Ready to start learning?
Take This Course