5 ms·
An overview of JavaScript reactive frameworks
- sriku 11y agoElm [1] is also worth looking into. I've been using it of late and having fun with it, despite some quirks. It's quite performant in practice too. Though I haven't done comparisons myself, Elm benchmarks claim it to be the fastest only next to Mercury [2]. [1] http://elm-lang.org http://elm-lang.org [2] http://elm-lang.org/blog/Blazing-Fast-Html.elm http://elm-lang.org/blog/Blazing-Fast-Html.elm
- k__ 11y agoCan it be used for big web-apps?
- proyb2 11y agoDepending, JSBlock is another one.
- sriku 11y agoNot sure yet. I'm exploring. It is a compile-to-js language and not just a framework though. So far, the static typing has been addictive. The time travel debugger is also intriguing. So far, I don't see any particular reason to not use it for big apps ... except maybe the compiled size, which you can expect to be minimum 100k compressed as a thumb rule.
- k__ 11y agoYes, from looking into it, it seems to be a very good language. But last time I tried to get into it, the tutorials were all outdated and even the simple hello world didn't work without extensive searching. Also there doesn't seem to be any examples of how to structure a big app.
- lewisl9029 11y agoAnyone with experience with either/both Morearty.js and Omniscient.js care to explain the differences between the two? From what I could gather with a quick look, they seem almost identical in terms of features and scope. https://github.com/moreartyjs/moreartyjs https://github.com/moreartyjs/moreartyjs https://github.com/omniscientjs/omniscient https://github.com/omniscientjs/omniscient
- mikaelbr 11y agoWith Omniscient there is a syntactic sugar on top of React class factories, which encourages to think of components as pure and smaller/more focused functions. This tries to lead more to simpler and composable components.
- markfinger 11y agoThis is a really nice overview of the status quo. It's also great to see a statement on JS lib proliferation which lays out a concise, balanced and pragmatic argument.
- nailer 11y agoNice. I've used ractive for nearly two years now. It's backed by the Guardian and you can learn it by reading this comment: var binding = new Ractive{ el: '.where-to-put-it', data: {some: data}, template: '<p>Put {{ some }} thing here</p>' } Bang, two way binding, virtual DOM, and ridiculously fast when using the same benchmarks that ember and react use to test their performance.
- WorldWideWayne 11y agoIt's pretty nice, but you don't get two-way binding for free and it's not really baked in. In your example you'd have to use an input or content-editable element and then call ractive.observe and write your own code for binding user-input to your model data. Compare to something like Knockout.js where you don't write any special code to get the two-way binding (other than creating each data field as an 'observable' field.)
- ThrustVectoring 11y agoMuch like Javascript's "==" operator gives you type conversion for "free", it's not clear to me that getting two-way binding for "free" is a good thing. One-way binding is significantly easier to reason about.
- dkempner 11y agoMost of the time, data binding IS one-way when using Knockout. Input field? That's one-way from display => a variable in your viewmodel. P tag? That's one-way from variable in viewmodel => display. But when do you really need two-way data binding? Form validation and formatting. Man, this stuff is hard even with two-way data binding. You have to be able to accept, parse, format, and validate all in the same element. It's very helpful to be able to use knockout for a task like this.
- nailer 11y agoIn my example, I'd just add <input value={{ some }}> That's all.
- EGreg 11y agoWhat about Mithril? It's tiny, efficient and predates React. Here is a good overview of it: https://lhorie.github.io/mithril/comparison.html https://lhorie.github.io/mithril/comparison.html
- lampe3 11y agoWhere is MeteorJS ? or to be more specific MeteorJS Tracker Lib ?
- rounce 11y agoMy thoughts exactly!
- vhf 11y agoI'd be curious as well. No idea how it compares to the others.
- ch49 11y agoI think articles discuses reactivity and Virtual DOM based implementations. Didn't blaze move away from virtual-dom diffing?
- Liron 11y agoSee also JFramework, a sophisticated rapid prototyping framework for React + Meteor. https://github.com/quixey/jframework https://github.com/quixey/jframework
- danmaz74 11y agoNice comparison. Didn't anybody think of implementing a react-like framework in CoffeeScript? There is a coffee-react library tool, but I feel like the ideas of react implemented natively for CoffeeScript would be a match made in heaven...
- habitue 11y agoApparently Zorium is what you're looking for
- danmaz74 11y agoThanks, interesting. At a first glance, compared to react, this isn't self-contained as it requires (or simply suggests?) RxJS, but I'll give it a deeper look as soon as I can.
- jessaustin 11y agoIf you don't insist on JSX, which you don't need, then just use react itself directly in coffeescript, and you won't be able to tell the difference without looking really close. The "canonical" description of this is at [0], but that page is kind of "old". I haven't found value in wrapping everything in parentheses like he recommends. Also that code is using renderComponent() which nowadays should be replaced by some combination of createClass(), createFactory(), and render(). [0] http://blog.vjeux.com/2013/javascript/react-coffeescript.html http://blog.vjeux.com/2013/javascript/react-coffeescript.htm...
- cpursley 11y agoCheck out Arch. It uses LiveScript, which is an indirect descendant of CoffeeScript, but with a focus on functional programming. https://github.com/redbadger/arch/blob/master/docs/02-basic-tutorial.md#livescript-as-template-language https://github.com/redbadger/arch/blob/master/docs/02-basic-...
- sosuke 11y agoIs ReactJS (the virtual DOM) considered a 'reactive framework' but 'reactive programming' something else entirely? https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
- tel 11y agoI have no idea what "reactive framework" might mean, but by most definitions of "reactive" that I know... React actually isn't even close. It's not "not reactive", just tangential entirely.
- ch49 11y agoThe link you referred is about Functional Reactive Programming. Reactive programming by itself is more of a pattern than paradigm. I would call React a reactive framework. How reactive a framework/library is varies from framework to framework. Every framework has its own flavour of Reactivity. Mostly it's some kind of implementation of Observer pattern. Two famous Reactive approaches are FRP and Meteor's reactive computations.
- andy_ppp 11y agoI'd go with Facebook and the consequent support, testing and community over a framework that does it's own thing. Performance is simply not a concern for most applications (i.e. React itself is more than good enough) and having learned React to a good standard, I'm super excited about building something in React Native.
- j_m_b 11y agoReact seems like a game loop with some functions built in to update your state.
- marvel_boy 11y agoNewbie here. In your opinion React delivers the promise to get out all the business logic of the UI?
- iLoch 11y agoReact actually doesn't address that concern. With that being said, React is often used with Flux, which does seek to separate business logic from presentation logic.
- cpursley 11y agoI recently came across Arch, a compelling functional style approach to React using LiveScript with a central immutable state architecture inspired by Om. - https://github.com/redbadger/arch/tree/master/docs https://github.com/redbadger/arch/tree/master/docs - http://www.slideshare.net/LondonReact/react-london-april http://www.slideshare.net/LondonReact/react-london-april
- alexro 11y agoRiotJS also looks very compelling
- colin_jack 11y ago>Essentially any event where the user would expect feedback means you need write the conditional structure in the output. So if the user types a character in an input box then you need to write the value of the input box to be the characters the user has typed so far Anyone able to provide a quick description of what this means?