Learning material

Tutorials

Examples

Plugins

Adaptors

Interface with different backends.

Components

Encapsulate functionality behind the guise of a custom element.

Decorators

Augment the DOM with more functionality.

Easings

Custom animation progressions.

Events

Augment the DOM with custom events beyond those supported by the browser.

Partials

Reusable pieces of markup.

Transitions

Apply custom animation.

Libraries

jQuery

Sergio Castillo has made a jQuery mobile plugin, which you can see in action on this JSFiddle.

Loaders

By itself, neither Ractive nor tools know what to do with a component files. Loaders take in component files and parse them into a representation that other tools understand.

Vanilla

  • ractive-load - Uses XHR to load your component files and creates component constructors at runtime.

Rollup

SystemJS

  • ractem - A plugin for SystemJS for loading Ractive components

RequireJS

Browserify

Broccoli

  • broccoli-ractive - Converts your component files into either AMD, CJS, or ES modules.

Webpack

  • ractive-component-loader - Allows you to load component files as constructors via Webpack.
  • ractive-bin-loader - Write Ractive.js components and have them available pre-compiled for the rest of your webpack build.

Grunt

  • grunt-ractive - Compiles Ractive component files into AMD, CJS or ES modules.

Babel

TODO

Tools

Ractive CLI

As of version 0.9, Ractive now comes with a CLI tool that comes with a few handy commands. See ractive help for more details on available commands.

Ractive utilities

Ractive provides a couple of modules to aid you in loader development:

  • rcu - An importable/embeddable library that provides utility APIs to help your loader parse the different portions of the component file.
  • rcu-builders - A module that provides utility APIs to help your loader convert parsed component files into other module formats like ES, AMD and CJS.

Yeoman

Jorge Colindres has created generator-ractive, a Yeoman generator to quickly set up a Ractive application.