When comparing Riot vs Sencha Ext JS, the Slant community recommends Riot for most people. In the question“What are the best Angular.js alternatives?” Riot is ranked 6th while Sencha Ext JS is ranked 14th. 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 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.
Pro Comprehensive documentation
The Sencha documentation is comprehensive, with detailed documentation and a number of examples displaying the various widgets, tools and themes.
Pro Supports MVC and MVVM development
Pro Supports Web and Mobile deployment out of the one framework or codebase
Pro Support for easy theming of applications
Pro Visual Design tool available
The Sencha Architect product allows you to visually build your application, or rapidly prototype a system.
Pro IDE Plugins available
A number of plugins are available for some of the commonly used IDEs (eg: JetBrains, Eclipse, Visual Studio), providing templates, refactoring support, hinting and code completion/generation, as well as management of includes and other time-saving features.
Pro Charting package included
Cons
Con Sencha CMD is bloated and frustrating to work with
To do any meaningful development, you are stuck with CMD. There is a gulp task that will handle the JS concatenation, but there is nothing outside of CMD that can handle theming in their ecosystem.
In addition, CMD is based on Java, and is very heavy to run (600MB+ on Windows 10 to watch for changes in the application and recompile).
Con Sencha CMD (their CLI) is under documented, and out of date
Their latest release of CMD changed some configuration locations, but the documentation was not updated to reflect this. There is no reference guide on the json configuration files, other than the (unfortunate use of) comments in the generated json files.
Con They use proprietary extensions to SASS, making it incompatible with anything but their Fashion processor
On the plus side, you do not have to install ruby alongside CMD for more recent versions of ExtJS. However, their Fashion processor seems to only be available through CMD.
Con Too often breaking changes between versions. They have little concept of backwards compatibility
Compounded by the fact that there are now two "toolkits" in the same "version" of ExtJS, with certain components not existing in one vs the other.
Con The IDE tools are not sold separately - you must purchase the appropriate license pack
You get all the IDE plugins, even if you only need one. They should offer sell them individually, or continue to bundle them with a dev license pack.
Con Difficult to integrate with 3rd party software
Any third party library you wish to include has to be wrapped in some sort of component adapter. You have to do a lot of tweaking to get the build process right if you want the 3rd party lib to be bundled into your application in the right order.
Con Can be expensive
The framework is a commercial package, and the recent decision to start with a minimum of 5 users may rule out smaller developer teams or startups. Recently, they have started a program that allow essentially what are contractors to purchase single licenses, but not individual, independent developers.
