24

We use an event driven JavaScript MVC framework in our application, but have performance problems with larger data sets. We've implemented many of the same techniques used in React to alleviate our issues (render on intervals, compare data state and only update what changed), but I'm worried we are going down the road of implementing our own, less complete, framework. Before we adopt React for our data heavy UIs, what are the alternatives?

noah
  • 21,289
  • 17
  • 64
  • 88
  • Check out blocks.js: https://github.com/Tixit/blocks.js . Its easier to use than React. There's also a comparison between them here: https://github.com/Tixit/blocks.js/wiki/Comparison-to-React – B T Jul 23 '15 at 23:26
  • Did you have a look at Mithril (mithril.js.org)? Check a comparison with large datasets [here](https://insin.github.io/ui-lib-samples/large-datasets/) and some jsperf benchmarking https://jsperf.com/angular-vs-knockout-vs-ember/777 – Bondifrench Oct 22 '15 at 05:46
  • blocks.js is renamed to [gem.js](https://github.com/Tixit/Gem.js/wiki/Comparison-to-React) – Amit Kumar Gupta Dec 19 '16 at 13:52
  • 1
    i found https://preactjs.com/ – Raghavendra May 13 '17 at 20:39
  • yeah preactjs.com is awesome and very lightweight – Ilyas karim Jul 06 '17 at 09:33
  • http://dodo.mikosoft.com - Dodo as alternatove to react framework. Blazing fast, easy to learn, Javascript, frontend framework for reactive web pages & apps – Saša M Jul 23 '23 at 15:09

7 Answers7

33

Check out RiotJS. It's super-lightweight (just a few kbs) and it's way easier to use.

Riot brings custom tags to all browsers, including IE8. Think React + Polymer but with ejoyable syntax and a small learning curve.

Ryan T. Grimm
  • 1,307
  • 1
  • 9
  • 17
Steel Brain
  • 4,321
  • 28
  • 38
24

Strange, nobody has mentioned yet Vue.js
Vue.js is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.
Awesome Vue.js - a curated list of awesome things related to Vue.js
It's trending right now!

vitr
  • 6,766
  • 8
  • 30
  • 50
10

You may consider some layer on top of React for better state management.

  • Om is a nice library if you are okay with ClojureScript, you can read more about it in author's blog;
  • Quiescent - a lightweight ClojureScript abstraction over React;
  • Reagent - A minimalistic ClojureScript interface to React;
  • Morearty.js - centralized state management for React in pure JavaScript.

These libraries use immutable data structures to represent your state and define shouldComponentUpdate method for each component which simply does the comparison using fast === operator. This optimization should give more speed for your heavy UI while sane state management facilities should be very helpful in organizing and supporting your code. From my experience, it's very hard to manage mutable state scattered across components.

Tvaroh
  • 6,645
  • 4
  • 51
  • 55
  • Very interesting. I implemented something similar (although it does not have a React specific component yet): https://github.com/iamnoah/mu – noah Jul 11 '14 at 10:57
  • Hi @noah and Tvaroh. This is so nice we all have the same kind of idea. I have done my own Atom implementation here, it's an early version but I have successfully ported my whole app using a single atom and all state outside of React (even keystrokes). Maybe we could contact each others and perhaps join our forces? Check https://gist.github.com/slorber/096953f247ba2c744057 – Sebastien Lorber Jul 28 '14 at 21:51
4

I have recently discovered Deku

ReDetection
  • 3,146
  • 2
  • 23
  • 40
3

The most well known, of course, is Angular JS, which is maintained by Google (not that it matters, but I just thought it was interesting, considering that Facebook makes React). For an in depth comparison of the two, see this link.

Here are some other options:

hkk
  • 2,069
  • 1
  • 23
  • 48
  • 6
    I would not consider Backbone and Ember alternatives since 1. They're full MVCs, not just rendering. 2. They're event driven – noah Jan 01 '14 at 01:50
  • @noah Angular was the main suggestion, but I thought that you might find Ember/Backbone useful. You can take it or leave it. – hkk Jan 02 '14 at 18:39
  • 1
    @noah I thought React is superb at optimization of the rendering, but yea, AngularJS has good performance and has a room for optimizations. But really, if you want to render huge amount of data, I'd suggest to look at the way you do it in the nutshell. I mean, cut some DOM elements and render just visible part of it. You cannot be saved just *automagically* with AngularJS/React/Backbone/Batman. – dt0xff Jul 10 '14 at 17:38
3

you can try http://www.ractivejs.org/, it uses same virtual dom concept just like facebook react

quote from ractive blog http://blog.ractivejs.org/posts/whats-the-difference-between-react-and-ractive/

The most striking similarity was the use of a virtual DOM. Like Ractive, React had discovered that creating an abstract representation of the DOM allows for lightning-fast operations by minimising the amount of DOM manipulation (the bottleneck in most webapps) that needs to take place. It also facilitates server-side rendering without some of the crazy hacks users of other tools have had to employ.

blue jedi
  • 31
  • 3
2

Before dumping your existing code, you might try integrating React into your MVC application as just the view layer. For example, Backbone integration is very straightforward:

There don't seem to be any production-ready alternatives to React that give you just the "V" in MVC. Though there are some interesting ideas out there.

To directly answer your question, Mithril is an MVC framework that uses a virtual DOM and has nice documentation.

If you're already having performance problems when rendering a large number of elements, switching to something like Angular, Ember, or RiotJS is unlikely to be the most direct path to a fix.

Update

Deku and CycleJS are also options.

Max Heiber
  • 14,346
  • 12
  • 59
  • 97