React Implementation Notes

I have a question, lack of dynamic scope in render functions is causing me major issues in making highly dynamic and complicated UIs in ClojureScript. I understand that Javascript doesn't have proper dynamic scope so you guys probably weren't thinking about it, but I also see you guys moving farther and farther away, there's the whole Context hacks and now the web worker call stack serialization thing. Are there technical reasons that this can't be made to work with dynamic scope? I think you lose a lot of stuff by, well, not being actual function composition, only pretending to be.

    cljs.user=> (ns foo.core (:require [reagent.core :as reagent]))
    nil
    foo.core=> (def ^:dynamic *foo* 42)
    #'foo.core/*foo*
    foo.core=> (defn inner [] [:div *foo*])
    #'foo.core/inner

    ; React component call - broken
    foo.core=> (defn root1 [] (binding [*foo* (inc *foo*)] [inner]))    
    #'foo.core/root1
    foo.core=> (reagent/render-to-string [root1])
    "42"

    ; Direct function call - works
    foo.core=> (defn root2 [] (binding [*foo* (inc *foo*)] (inner)))    
    #'foo.core/root2
    foo.core=> (reagent/render-to-string [root2])
    "43"

A quick example of dynamic scope:

    cljs.user=> (def ^:dynamic *foo* 42)
    #'cljs.user/*foo*
    cljs.user=> (defn negate [x] (- x))
    #'cljs.user/negate
    cljs.user=> (binding [*foo* (inc *foo*)] (negate *foo*))
    -43

I'm a Rails developer. I work on pretty standard web apps for a living. Some more complicated than others, but still, web apps.

I still haven't found a person that was able to give me a concrete reason why someone like me should invest time and resources into learning React and using it in my projects.

This is an honest question, I'm not trying to be sarcastic. It's just that there are so many frameworks that come out that it's very hard to know where to invest your time.

the obvious case:

consider a complex submission form with updating state

eg you want to show uploaded images while editing parts of it etc

the realistic case:

if you have a rails app and do frontend "interactive stuff" you end up w/ some js frontend framework - let's say backbone - or even if it's just jquery send as ejs - you will have some sort of dynamic updates, maybe even frontend duplication of templates, you will add classes to places and interact with parts of the page, other people will add more features, some parts of the feature gets removed, that part of it moved to another site, to keep it working you need a certain setup on the page, etc et

pretty soon this gets complex - this is where react shines

reasoning about the frontend is easy because you think in components and in state. not in ui and the interactivity with it over time.

tl;dr: react can help for either a by design complex part of your frontend or your frontend becomes complex over time

it does not help for fast prototyping or small apps imo

Thanks! So is react the only JS framework you use now (besides jQuery)?

I understand your dilemma very well. I have experience building server-rendered web apps, web apps enhanced with jQuery, Angular apps, and React apps. I resisted React for a while, but I'm glad I finally tried it out. Compared with jQuery or purely server-rendered apps, React elevates what you can accomplish within a short time frame. A complex web form with async validation, client side calculations, and multiple branches can be a real pain to code as a server-rendered web app or using jQuery, but React uses a different abstraction that makes a lot of code easier to reason about.

React achieves that with the virtual DOM concept. On the initial render, the virtual DOM concept is nearly equivalent to the kind of HTML templating you're familiar with; you simply render a document with some substitutions. It's what comes next that's interesting: when you need to change something on the page (for example, when you need to display validation feedback for a form field), you don't add code that finds the DOM element and changes it. Instead, with a virtual DOM, you re-render your components with new data, and the virtual DOM figures out what changed and applies the changes. Event handling is much simpler.

React has only a few concepts; once you get it, there's only occasionally a need to read the React documentation. Angular is also powerful, but Angular has many concepts and I found myself referring to the documentation for every little thing. That may have changed with Angular 2.

EDIT: I should also point out that React adheres to the idea of putting HTML tags in code, rather than putting code in HTML tags. For simple templates, it doesn't really make a difference, but for some of the whopper HTML templates I've written before, putting HTML in code (aka JSX) would have been a major benefit. There are plugins for editors like Sublime Text that make JSX smooth.