When comparing JQuery vs Riot, the Slant community recommends Riot for most people. In the question“What are the best JavaScript libraries for building a UI?” Riot is ranked 5th while JQuery is ranked 18th. The most important reason people chose Riot is:
Riot takes the expressions from a DOM tree and stores them in an array. Each of these expressions points to a DOM node. On each cycle these expressions are compared to the values in the DOM. So when a value has changed, Riot automatically updates the corresponding node. This way the operations are kept to a minimal amount and since the expressions can be cached, going through 1000 of them takes less than 1ms.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro Easy to use
Much easier to use than traditional JavaScript. Allows a lot of features and function to be completed with less lines of code.
Pro Cross-browser support
jQuery works on all modern browsers, although there may be some issues with old versions of each browser.
Pro Strong community
The open source community has really embraced jQuery and it has many readily available plugins to help speed up the development process. In addition to this, it has great documentation and tutorials
Pro Minimal DOM operations
Riot takes the expressions from a DOM tree and stores them in an array. Each of these expressions points to a DOM node. On each cycle these expressions are compared to the values in the DOM. So when a value has changed, Riot automatically updates the corresponding node. This way the operations are kept to a minimal amount and since the expressions can be cached, going through 1000 of them takes less than 1ms.
Pro Lightweight
Riot is made to be used with websites of any kind, so it's built to be easy and lightweight, but still maintaining all the needed features for a UI library. It's only 2.5 KB in size when minified. So it can also be used for mobile web apps without requiring much bandwidth to download.
Pro Components use familiar HTML tags
Riot components use custom tags which are nothing more than familiar HTML tags coupled with JavaScript. This eliminates the need to learn another templating language or syntax. For example:
<todo>
<h3>TODO</h3>
<ul>
<li each={ item, i in items }>{ item }</li>
</ul>
<form onsubmit={ handleSubmit }>
<input>
<button>Add #{ items.length + 1 }</button>
</form>
this.items = []
handleSubmit(e) {
var input = e.target[0]
this.items.push(input.value)
input.value = ''
}
</todo>
Riot tries to separate HTML and JavaScript, while still keeping them inside the component. This way, the HTML can also be neatly mixed with JavaScript expressions.
Pro Supports server side rendering
Riot has support for server side rendering. The views and data are rendered on the server, then those views are sent as HTML to the browser when a user requests them.
This helps with initial loading time and is very useful for SEO purposes because the web app is indexed by search engines same as other static websites that have their HTML on the server.
Pro Easily pluggable with JS/HTML/CSS preprocessors
It is very easy to use your favorite preprocessors with the Riot compiler. Riot comes with CoffeeScript, ES6 (Babel), TypeScript, LiveScript and Jade support. You can also add your own parsers.
Pro Very simple
It makes React look confusing as hell. Nothing against React - It's just that easy to implement!
Pro Scoped CSS available in components
Riot supports scoped CSS inside components for every browser by rewriting stylesheet rules.
Pro Lives well with any other library, framework and usage pattern
Since it's not opinionated, even the scripting can be in anything that can be transpired to JavaScript.
Pro Separation of concerns with RiotControl
RiotControl is inspired by Facebook's Flux Architecture Pattern and it's a simple Central Event Controller/Dispatcher for Riot. It's extremely lightweight (like Riot itself) but unfortunately passes up on some features in favor of performance and simplicity.
RiotControl helps with storing the stater of the application, by passing events from views to stores and vice-versa. Stores can communicate with many views and views can do the same with many stores, this enables to clearly separate concerns and inter-component communication.
Cons
Con It is not a framework, but rather a library.
Frameworks allow you to handle page routing, authentication, and services. jQuery is not a framework, but rather a library of DOM tools for websites.
e.g.: You cannot write page routing logic within jQuery.
Con Script download
As opposed to just using raw JavaScript, users will (automatically) download the jQuery script to their local computers in order for it to work. This results in more overhead on the initial page visit, regardless of how lightweight the framework is.