Ractive.js - Next-generation DOM manipulation
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. It takes a radically different approach to DOM manipulation - one that saves both you and the browser unnecessary work.
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.
- And much more!
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.
Documentation and Help
If you don't find what you're looking for in the docs, here are other channels you can ask:
- Create a new issue on Github.
- Ask a question on Google Groups.
- Ask a question on Stack Overflow with the
ractivejs
tag. - Send us a tweet via @RactiveJS.
If you'd like to include an example in your issue, this fiddle has a convenient minimal setup that has easily switchable Ractive versions.
Contributing
Pull requests and issues are always welcome! Please read CONTRIBUTING.md to learn how to contribute.
Development
If you want to hack on Ractive, the first step is to fork the repo. Then do the following commands.
# Clone your fork of the repo
git clone https://github.com/YOUR_USERNAME/ractive
# Move into the repo directory
cd ractive
# Install the dependencies
npm install
# Run a server for development
npm start
Navigate to localhost:4567. You'll see:
-
ractive.js
- A build of Ractive. -
sandbox
- Contains some template files to help with debugging. -
test
- The test suite.
To start development, copy the sandbox/sample
, following the instructions therein. After the initial build, any subsequent changes will result in fast incremental rebuilds. If you're using Chrome, you can use the LiveReload plugin.
The development server is served by gobble and is still in development. Please report any Gobble-related bugs to Gobble's issue tracker. Thanks!
Build
To build, the following must be met:
-
A real shell. Linux and OS X should be good. Windows needs MSYS or something similar at least on the path.
-
On Windows, if you get an
EINVAL
when running the tests, you may need to update thephantomjs
script in thenode_modules/.bin
to use{ stdio: 'inherit' }
when spawning the child process instead of manually piping afterwards.
To run a complete build including linting, testing and minification:
npm run build
Browser support
Tested successfully in all modern browsers. If your experience differs please let us know!
Ractive will require the following APIs:
Array.isArray
Array.prototype.every
Array.prototype.filter
Array.prototype.find
Array.prototype.forEach
Array.prototype.indexOf
Array.prototype.map
Array.prototype.reduce
Function.prototype.bind
Node.prototype.contains
(only used in testing)Object.assign
Object.create
Object.defineProperty
Object.defineProperties
Object.freeze
Object.keys
performance.now
Promise
requestAnimationFrame
String.prototype.trim
window.addEventListener
window.getComputedStyle
Should your target environment lack the mentioned APIs, please shim/polyfill accordingly. Ractive ships with a separate, minimal polyfill file containing only the above APIs for older browsers. Simply load it before Ractive.
Published versions
All builds are published to the default npm registry and can thus be accessed from the lovely unpkg CDN:
- https://unpkg.com/ractive is the latest stable unminified version of Ractive.
- https://unpkg.com/ractive/ractive.min.js is the latest stable minified version of Ractive.
- The rest of the builds play out as you would expect too: ractive.runtime.js, ractive.runtime.min.js
- https://unpkg.com/ractive@0.7.3 is the unminified build of Ractive v0.7.3
- You can also pull specific builds for specific versions e.g. https://unpkg.com/ractive@0.7.3/ractive.min.js
- The latest pre-release build in a series is tagged e.g.
v0.8-dev
orv0.9-dev
, starting withv0.8
. This dev tag will point to the latest released version in a series if there is no dev build e.g. immediately after a release. dev
builds are periodically published to npm with a pre-release version like0.8.1-build-1
, and the latest dev build is taggededge
.
License
Copyright (c) 2012-16 Rich Harris and contributors. Released under an MIT license.