When comparing Ractive vs Preact, the Slant community recommends Preact for most people. In the question“What are the best React.js alternatives?” Preact is ranked 11th while Ractive is ranked 22nd. The most important reason people chose Preact is:
The size when gzipped is only 3kb, and performance is as good as (or even faster than) React itself.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro Live, reactive templating
Ractive.js 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.
Pro Powerful and extensible
Two-way binding, animations, SVG support and more are provided out-of-the-box – but you can add whatever functionality you need by downloading and creating plugins.
Pro Supports a true templating language
Ractive fully supports a templating language. To be more precise, views are written with a variant of Mustache, which is also extended to support inline JavaScript expressions. Soon it will be able to support other templating languages.
Pro Virtual DOM
Instead of relying on the DOM, Ractive implements a virtual DOM from scratch, allowing it to calculate precisely what needs to be patched during the next screen refresh. This is orders of magnitude faster than fiddling with the DOM itself.
Pro Lightweight
The size when gzipped is only 3kb, and performance is as good as (or even faster than) React itself.
Pro Same API as react
Avoids having to learn an entire new paradigm, and makes it easy to switch between the two libraries later on.
Pro Lots of examples and libraries
They have a bunch of examples and addon libraries.
Pro Awesome CLI
Preact CLI gives you a perfect scoring PWA out-of-the-box with no configuration.
Cons
Con Ractive's two way binding can be a source of bugs
Two-way data-binding means that a HTML element in the view and an Ractive model are binded, and when one of them is changed so is the other. One-way data-binding for example does not change the model when the HTML element is changed.
This is a rather controversial subject and many developers consider two-way data binding an anti-pattern and something that is useless in complex applications because it's very easy to create complex situations by using it and being unable to debug them easily or understand what's happening by just looking at the code.
Con Difficult to learn
You need to be good in React JS first to learn Preact. Documentation is not rich. And some of the examples given on site are not working. Developers are not much active on Stack Overflow as well.
![Vetted.ai illustration](/images/ai/vetted-illustration.png)