React alternatives [closed]
Asked Answered
S

7

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?

Shea answered 1/1, 2014 at 0:35 Comment(6)
Check out blocks.js: github.com/Tixit/blocks.js . Its easier to use than React. There's also a comparison between them here: github.com/Tixit/blocks.js/wiki/Comparison-to-ReactDisassemble
Did you have a look at Mithril (mithril.js.org)? Check a comparison with large datasets here and some jsperf benchmarking jsperf.com/angular-vs-knockout-vs-ember/777Hercules
blocks.js is renamed to gem.jsHaldeman
i found preactjs.comDora
yeah preactjs.com is awesome and very lightweightSutton
dodo.mikosoft.com - Dodo as alternatove to react framework. Blazing fast, easy to learn, Javascript, frontend framework for reactive web pages & appsCramoisy
M
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.

Mariken answered 18/2, 2015 at 1:50 Comment(0)
M
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!

Masorete answered 14/6, 2015 at 2:31 Comment(1)
Vue js more powerful than react, Easy to implement in any web project.Sutton
L
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.

Lastminute answered 1/1, 2014 at 0:35 Comment(2)
Very interesting. I implemented something similar (although it does not have a React specific component yet): github.com/iamnoah/muShea
Hi @Shea 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 gist.github.com/slorber/096953f247ba2c744057Ghats
M
4

I have recently discovered Deku

Moralize answered 28/5, 2015 at 3:51 Comment(0)
S
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:

Shultz answered 1/1, 2014 at 0:50 Comment(3)
I would not consider Backbone and Ember alternatives since 1. They're full MVCs, not just rendering. 2. They're event drivenShea
@Shea Angular was the main suggestion, but I thought that you might find Ember/Backbone useful. You can take it or leave it.Shultz
@Shea 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.Stahl
N
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.

Newness answered 2/12, 2014 at 9:32 Comment(0)
L
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.

Lutz answered 14/3, 2015 at 19:14 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.