Ractive.JS Workshop - April 20

Whether you're a beginner or a veteran of web development, leverage your HTML, JS, and CSS knowledge to easily create dynamic data-driven applications and websites.

What is Ractive JS?

Ractive is a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default.

Some tools force you to learn a new vocabulary and structure your app in a particular way. Ractive works for you, not the other way around – and it plays well with other libraries.

What will the workshop cover?

Templating

We'll cover the mustache basics and then dive into the expanded abilities of two-way binding, sections and expressions. Patterns for common use cases like master/detail relationships.

Data, Binding and Observers

Controlling data through template binding and programmatic manipulation. Establishing data flows with observers.

Decorators, Events and Transitions & Animations

Encapsulate DOM manipulation, respond to events and provide intro and outro effects

Components

Apply the fundamentals of Ractive in a modular fashion to build composable, powerful apps

Advanced Configuration and Instantiation, and more

Resources to get started

• http://www.ractivejs.org/
• https://github.com/martypdx/ractive-workshop

Installation

Using Ractive can be as simple as adding a script tag in the browser.

However, for this workshop please make sure you have node.js installed as will be exploring ractive in a modern build environment. Here's how to get started:http://docs.ractivejs.org/latest/get-started-with-node-js