Ractive.js - Next-generation DOM manipulation

Got questions? Tag Stack Overflow questions with ractivejs or contact @RactiveJS on Twitter

What is Ractive.js?

It's a JavaScript library for building reactive user interfaces in a way that doesn't force you into a particular framework's way of thinking. Its features include...

data-binding, with a beautiful declarative syntax
event handling that doesn't make you tear your hair out
flexible and performant animations and transitions

...among many others. It takes a radically different approach to DOM manipulation - one that saves both you and the browser unnecessary work.

To get a feel for how it will make your life as a web developer easier, visit ractivejs.org, follow the interactive tutorials, or try the 60 second setup.

Get help

If you don't find what you're looking for in the docs, ask a question in Google Groups forum, Stack Overflow with the ractivejs tag, or send a tweet to @RactiveJS.

Developing and building

If you want to hack on Ractive, the first step is to clone the repo and install all its development dependencies:

git clone https://github.com/ractivejs/ractive   # or your fork
cd ractive
npm install

Ractive is built with Gobble and Grunt. While developing the library, you can serve it with gobble-cli:

npm install -g gobble-cli
gobble

Navigate to localhost:4567 - you'll see three folders:

sandbox - this contains some template files to help with debugging. Start by copying the sandbox/sample folder and following the instructions therein
src - this contains all of Ractive's source code, transpiled from ES6 modules to AMD for easy debugging
test - the test suite (duh)

After the initial build, any subsequent changes will result in fast incremental rebuilds. If you're using Chrome, you can use the LiveReload plugin.

Gobble is still in development - please report any bugs to the issue tracker - thanks!

To run a complete build (including linting, testing and minification), you'll need to have Grunt installed. Clone the repo, navigate to the folder, then run

$ grunt

If all the build steps succeed, files will be created in the build folder.

Other grunt commands available:

# Lint the source code
$ grunt jshint

# Build the code (will run jshint first)
$ grunt build

# Run tests on the build
$ grunt qunit

# Run node non-browser tests (parse and toHTML) on the concatenated code
$ grunt nodeunit

# Rebuilds the test runners when test folders and files change (based on ./test/modules)
$ grunt buildTests

# Rebuilds the tests, runs the nodeunit tests, runs the qunit tests
$ grunt test

Contributing

Pull requests and issues are always welcome! Please read CONTRIBUTING.md to learn how to contribute.

Browser support

Tested successfully in IE8+ and all modern browsers. If your experience differs please let me know! (For legacy browser support, use the builds with legacy in the filename - these include polyfills for Array.prototype.forEach and other ES5 features used by Ractive.)

deutschlion / ractive