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?
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.
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!
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.
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:
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.
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:
- http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html
- http://todomvc.com/examples/react-backbone/
- https://github.com/tastejs/todomvc/tree/gh-pages/examples/react-backbone
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
© 2022 - 2024 — McMap. All rights reserved.