When comparing Ractive.js vs Polymer, the Slant community recommends Polymer for most people. In the question“What are the best JavaScript libraries for building a UI?” Polymer is ranked 4th while Ractive.js is ranked 7th. The most important reason people chose Polymer is:
It provides a base component.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
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 Makes it possible to handle user interaction in a readable, declarative fashion
Ractive has a concept of proxy events, which translate a user action (e.g. a mouseclick) defined via an event directive into an intention (e.g. 'select this option'). This allows you to handle user interaction in a readable, declarative fashion.on-click='activate'
with arguments:on-click = 'activate: {{a}}, {{b}}'
It's activate
(and not click
, nor your function name) that is the name of the handler event that will be fired for any registered handlers created viaractive.on('activate', your_handler)
ractive.on('activate', your_another_handler)
Of course, Ractive also supports method calls like on-click='toggle(foo
)'
Pro Two-way binding configuration
Two-way binding can be turned off by those that are concerned it may be a source of bugs.
Pro Step by step tutorial
They have a great interactive tutorial which makes the learning process easy peasy. You will get into it within a couple of minutes.
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 Various basic components
It provides a base component.
Pro HTML markup is not string
HTML markup as it can be a non-string.
Pro Flex layout components
It provides Flex layout components.
Pro CSS is easy to apply
CSS can be applied far more comfortably than React.
Pro No need for special debugging tools
The presence od specialized debugging tools are advertised by competitors. The all features of web components are natively supported by browser embedded development tools.
Pro Excellent routing
The router is embedded into CLI for project creation and covers as web as Progressive web app, also fused with Polymer layouts out of the box. The shop template for CLI has a complete solution including the routing.
Pro Complete web app stack support
Full app stack from data tier to routing, progressive web app, responsive layouts makes no need to seek outside of Polymer ecosystem for application features.
In addition to waste set of mature web components in Polymer Elements along with Vaadin Elements there are thousands of web components in the wild comparable to jQuery plugins set.
Pro Excellent documentation
Polymer guides you as with tools (cli, build environment, app templates,..) as with complimentary documentation on all phases of app development from creation of app as progresive web app to production deployment instructions.
As Polymer is standards based, the whole community around those standards also helping in documentation and support.
Pro Based on web components
Web Components are a collection of specifications released by W3C as a way to reduce the complexity of web apps by creating reusable components. Browser support is currently poor for web components, however Polymer is developed to make web components compatible with modern browsers.
Pro API is easy to understand, based on standard
The Polymer APIs are split on application layers and follow standards on all possible ways: Web Components, CSS variables, async API via Promises and so on.
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.
However, this is the default behaviour which can be changed to have one-way data binding.
Con No server-side rendering
Polymer does not support server-side rendering. This results in higher loading times, more HTTP requests and it's not very SEO friendly, since search engines have no way of indexing a page if it's not rendered in the server.