Live data from Hacker News

Removing User Interface Complexity, or Why React is Awesome

jlongster.com

211–220 of 228 posts

Re: Removing User Interface Complexity, or Why React is Awesome

#211
post #54

Earlier quoted context omitted.

Based on my initial explorations using React with Rails, I'd say React might even be better when used with an existing server-side framework. With React, you can basically store all you data (state) in the root component (which could be the root of your entire page), and replace that with new state without thinking too much about the DOM updates and view changes that result from this. This is perfect for a server-sid…

Can you please explain how to store data from the server on a "root component"? The data portion is the main reason I was looking at Angular. Thank you.

If you keep it client-side: you turn the server-side data into json, then pass that to the renderComponent function (in a script tag or whatnot). Inside your component, you'd use this data in the getInitialState function to set the state of this component (which could pretty much be the whole page).

Does that answer your question?

Re: Removing User Interface Complexity, or Why React is Awesome

#212
post #106

Tester: The UI is wrong right here... Developer: Hmm...I wonder how long it's going to take me to figure out where that HTML was generated in my javascript.

Your comment implies that you recommend web apps never do any DOM generation or manipulation using JavaScript, and are instead purely static HTML documents. For that matter, your argument would logically extend to opposing backend HTML generation as well, like Rails templates.

>you recommend web apps never do any DOM generation

Full stop right there and you're correct. I really prefer to limit code that looks like:

     element.innerHTML = 'Do you really like content in your JS like this?';
I'd rather have the HTML loaded as one file and have the javascript in another acting on that HTML. Right now my favorite library to use for this is Knockoutjs.

Re: Removing User Interface Complexity, or Why React is Awesome

#213
post #97

Earlier quoted context omitted.

Nope, it calls it regardless of state change—that's the point, you eliminate the challenge of determining when state has changed. To quote TFA: > A set method to change state could trigger a rerender (React has setState), but there's an even easier way to react to changes: continuously call renderComponent with requestAnimationFrame to repaint the UI, and only change the DOM when the component returns different conte…

Thanks for clearing up the confusion. Although, I think it's worth it for you to edit your initial reply since it's the most upvoted comment so far. Also, your comment, to me, shows there is still some confusion regarding Om's internals: > However, this relies on being able to listen for state change from the underlying model data. [...] Instead, it seems that with Om, you are limited to consuming data structures tha…

Interfacing with an external js library that publishes changes would be trivial though. Typically if you're building a ClojureScript app you're building a ClojureScript app... which means using atoms.

Re: Removing User Interface Complexity, or Why React is Awesome

#214

I think this post is missing something in its description of Web Components: the fundamental difference between a JS-based framework like React and a Web Components-based framework like Polymer is that the former takes JS objects as primitives and the DOM as an implementation artifact, while the latter takes the DOM as a primitive and JS as an implementation artifact. You cannot wrap your head around Web Components a…

> The line in the post where "You can't even do something as basic as that with Web Components."

Actually that's factually inaccurate. You certainly can do that. registerElement returns a Constructor function, so you can export that in your module if you want to be able to require it elsewhere.

Re: Removing User Interface Complexity, or Why React is Awesome

#215
post #29

As mostly an outsider to the web front end development, React.js is probably the easiest one for me to understand among the typical "frameworks", especially Angular and Ember. After all the excitement about Angular for example, I went to learn about it and just got lost with new concepts: DOM transclusion, scopes, services, directives, ng-apps, controllers, dependency inversion and so on. I can use it but need someon…

Angular is huge bloat. Unfortunately Google's name is behind that mess so it will live for little bit longer before getting forgotten. I myself prefer frameworks that are minimal, least invasive and plays nicely with pure JS/HTML instead of treating them as bug. So anything that requires me to call .createClass to create an instance is out. Personally I've used Knockout.js pretty successfully. I think any average js…

KO is not a framework it's "just" a data binding library

Re: Removing User Interface Complexity, or Why React is Awesome

#216
post #201
post #179

I experimented with React a bit but I was a bit bugged by how large it was. The basic idea of rendering to a virtual DOM and having unidirectional data flow is really simple but I had trouble actually diving in to React's source code and seeing things under the hood (for example, I had to find a blog to see how the diffing algorithm worked). What are the other libraries out there that we can use for this virtual DOM…

I have a similar frustration with React. The source code is very hard to read our follow. An ideal "barebones" virtual dom library looks like https://github.com/Matt-Esch/virtual-dom . The `virtual-dom` module was build out of frustration with the readability of react source code and is the minimal modular subset. I've also built a small framework on top `virtual-dom` to add in essentials like immutable state and eve…

Is there a single-file version of virtual dom available for download? I am not finding any instructions in the repo on how to build it. Also, why does it have so many files in the first place?

Re: Removing User Interface Complexity, or Why React is Awesome

#218
post #217

Leo Horie, author of Mithril, has written a blog post where he explains how to re-implement some of the article's examples using Mithril (React-like client-side Javascript MVC framework): http://lhorie.github.io/mithril-blog/an-exercise-in-awesomen...

Mithril docs: http://lhorie.github.io/mithril/

Re: Removing User Interface Complexity, or Why React is Awesome

#219

Earlier quoted context omitted.

Here's my experience with frameworks: They're really good at getting you to 80% completion really fast. The next 10% takes a little work but its doable. But that last 10%... its like pulling teeth. With tweezers. Covered in grease. That last 10% is the thing you need done to successfully deliver the project but which the framework designers didn't consider. In my experience you always run into that last 10%. The net…

The trouble is that many devs can't see past that 80% to see the 20% that's left. They whip up a little app at night, it works really nicely and they assume this means the app they're working on during the day should be "rewritten" in the framework-du-jour. Then they hit that 20% "wall", blame the framework as "lame" and start hunting for an alternative. Rinse and repeat. Last year I got excited about NodeJS and star…

I agree with the clarification that there are differences between Rails, .NET, PHP, and NodeJS. Rails & .NET are frameworks (strictly speaking, .NET is an amalgamation of frameworks and languages). PHP and NodeJS are languages.

Re: Removing User Interface Complexity, or Why React is Awesome

#220
post #179

I experimented with React a bit but I was a bit bugged by how large it was. The basic idea of rendering to a virtual DOM and having unidirectional data flow is really simple but I had trouble actually diving in to React's source code and seeing things under the hood (for example, I had to find a blog to see how the diffing algorithm worked). What are the other libraries out there that we can use for this virtual DOM…

Hi, Mithril author here.

I'm not familiar w/ React's implementation, so I can't speak for them. With Mithril, the diffing algorithm is basically a recursive tree diff. In addition to diffing at the attribute level (and taking care of some broken edge cases), it can do things like detect parent changes and reattach unmodified trees to new parents, if needed. I generally don't like corner-case-specific optimizations because I believe there are better directions to explore in order to improve performance (Mithril has a concept called SubtreeDirectives that I'm planning to expand on, for example). At the end of the day, one has to ask themselves if loading and parsing code to handle a bazillion rare corner cases is really significantly better than just doing the naive thing. The benchmark on the Mithril homepage seems to suggest that being minimalist performs better at the worst and arguably most important case (the first render).

Mithril in its entirety (with router, promises, ajax, etc) is ~500 lines of code (vs Bloop's 250) and the diff implementation has gotten more and more robust over the course of v0.1.* thanks to the Mithril community. I'd love to be proven wrong, but I'm seriously doubtful you can get a better balance between leanness and robustness elsewhere.

Re: best way to structure apps: I just posted an article ( http://lhorie.github.io/mithril-blog/an-exercise-in-awesomen... ) that ports some of the examples in this article over to Mithril to see how the two compared. My conclusion was that it's definitely possible to structure apps in a React-like style with Mithril. There a lot of benefits that this structure brings to the table, and using well understood design patterns effectively can go a long way to complement the componentization paradigm.

I don't force any particular implementation of the MVC pattern with Mithril, but I try to always organize code following the classic MVC pattern in my own code. My blog is partly an effort to document the techniques that can be used to support a liberal MVC pattern without necessarily committing to React's OOP paradigm or whatever.

Post reply on HN