6 ms·

The React tutorial rewritten in Om

97 points by jlehman 13y ago

NikhilVerma 13y ago
Now I really want to try building a project with Om and React.
swannodette 13y ago
Excellent :) I do caution people getting too deep into Om at this point, some details may change over the next couple of months and I've got a few big ideas coming as well.
- hueyp 13y ago
  Know of any resources of using clojurescript + react without Om (while we wait for more awesome)? Would the idea be calling setState from an atom's watch and transforming the map to a javascript object?
  - bretthopper 13y ago
    This was posted yesterday: https://github.com/holmsand/cloact https://github.com/holmsand/cloact
    - kenko 13y ago
      "cloact" is ... not a good name.
    - cnp 13y ago
      As someone who is having a hard time wrapping my head around the syntax of ClojureScript with its terse variables and so on, I really appreciate that the author took the time to make this so readable.
- jlehman 13y ago
  Writing this felt really good. This is been the first time writing CLJS in which dom manipulation wasn't a primary concern (to the point of distraction from application logic). This is awesome work. Really looking forward to seeing where you take it.
catshirt 13y ago
so... React in clojurescript is great. the other bindings i have seen are pump [1], but as i'm new to lisp/clojurescript i struggled with some of the parallels. a tutorial comes welcome. somewhat aside- am i crazy for thinking React should bundle some sort of internal style processor? having your template and and your logic in the same place, in the same language, (cljs + react) seems to transcend the dirty feeling of template interpolation (Backbone muddies your JS with selectors. Angular muddies your HTML with directives and logic). having your styles in the same place, in the same language, seems like next step to truly portable web components. probably lots of ways to do this wrong but probably at least one way to do it right. [1] https://github.com/piranha/pump https://github.com/piranha/pump
- ds_ 13y ago
  Why would you want to bundle styles with your components? There is already a nice separation there, maybe you could give an example use case?
  - catshirt 13y ago
    maybe it's nice, but it's nice in the same way we've been separating HTML and JS for years, which React completely disregards. if styles were solved in a similar way i think you'd be able to get rid of the notion of a selector all together (though it would compile down to normal selector based css). also, components would just be easier to grok and more portable.
    - ds_ 13y ago
      I can't see the parallels between js/html and css/html. React disregards the js/html because they acknowledge that there never really was proper separation. With css/html, at least to me, it seems like there is a clearer separation. Maybe I'm being shortsighted.
      - catshirt 13y ago
        not short sighted at all. i haven't completely convinced myself yet either. :) i guess the question i struggle with then is, what is so nice about that separation? and, could those problems not also be solved in JS?
recuter 13y ago
"Lets have a tinybrowser like thing to target that will run inside the browser and output to it as if it was a GPU" is truly one of those its-so-crazy-it-just-might-work ideas. I'm a tad miffed about the size (70KB), but then again it is smaller than Angular. I took a wait-and-see attitude with Angular/Ember/Meteor/Yet-another-Express, they are all neat in a way but never completely shoo away the feeling that the whole Javascript MVC thing is some sort of programming Vietnam. The OP is totally different and alien and actually gives me hope! Hurrah! Exciting times.
- Robin_Message 13y ago
  Programming's Vietnam is supposedly object-relational mapping, although MVC does tend to be built on top of ORM so maybe the comparison is apt :) http://blogs.tedneward.com/2006/06/26/The+Vietnam+Of+Computer+Science.aspx http://blogs.tedneward.com/2006/06/26/The+Vietnam+Of+Compute...
vijaykiran 13y ago
This should fix the innerHTMLstuff - https://github.com/vijaykiran/react-tutorial-om/commit/15281e3c9429b52ef265087371fcebe3e0d7a00e https://github.com/vijaykiran/react-tutorial-om/commit/15281... Also, why clojurescript 2127 ? I thought 2120 is the latest stable version.
- vijaykiran 13y ago
  Apparently 2127 is about to announced while I was typing the parent comment - https://groups.google.com/forum/#!topic/clojure/0nxFc9xDmDw https://groups.google.com/forum/#!topic/clojure/0nxFc9xDmDw
hencq 13y ago
I know very little about React, so this might be a dumb question. I looked at the source for the example and it looks very nice, but I noticed the DOM is built using constructs like (dom/div ...). Is it also possible to use something akin to hiccup's syntax like [:div ...]?
- vijaykiran 13y ago
  As suggested somewhere else on this thread - try https://github.com/holmsand/cloact https://github.com/holmsand/cloact
  - ds_ 13y ago
    I'm wondering if the two projects are aware of each other and if there is the possibility for some collaboration there(similar ideas/approaches?)?
- graue 13y ago
  Looks like Sablono, which provides a Hiccup-style syntax you can use with Om, is your best bet there: https://github.com/r0man/sablono https://github.com/r0man/sablono
john2x 13y ago
Does anyone else think the name is unfortunate? I can't imagine how difficult it would be to google "om".
- ds_ 13y ago
  It's the first result for "om clojurescript". So not really.
- y3di 13y ago
  I think it's super clever. It's like we've finally achieved enlightenment over the dom
- jlehman 13y ago
  Plus, think about the possibilities for use of the word "nom".
harichinnan 13y ago
http://en.wikipedia.org/wiki/Om http://en.wikipedia.org/wiki/Om

97 points by jlehman 13y ago

Now I really want to try building a project with Om and React.

Excellent :) I do caution people getting too deep into Om at this point, some details may change over the next couple of months and I've got a few big ideas coming as well.

hueyp 13y ago
Know of any resources of using clojurescript + react without Om (while we wait for more awesome)? Would the idea be calling setState from an atom's watch and transforming the map to a javascript object?
- bretthopper 13y ago
  This was posted yesterday: https://github.com/holmsand/cloact https://github.com/holmsand/cloact
  - kenko 13y ago
    "cloact" is ... not a good name.
  - cnp 13y ago
    As someone who is having a hard time wrapping my head around the syntax of ClojureScript with its terse variables and so on, I really appreciate that the author took the time to make this so readable.
jlehman 13y ago
Writing this felt really good. This is been the first time writing CLJS in which dom manipulation wasn't a primary concern (to the point of distraction from application logic). This is awesome work. Really looking forward to seeing where you take it.

catshirt 13y ago

so... React in clojurescript is great. the other bindings i have seen are pump [1], but as i'm new to lisp/clojurescript i struggled with some of the parallels. a tutorial comes welcome. somewhat aside- am i crazy for thinking React should bundle some sort of internal style processor? having your template and and your logic in the same place, in the same language, (cljs + react) seems to transcend the dirty feeling of template interpolation (Backbone muddies your JS with selectors. Angular muddies your HTML with directives and logic). having your styles in the same place, in the same language, seems like next step to truly portable web components. probably lots of ways to do this wrong but probably at least one way to do it right. [1] https://github.com/piranha/pump https://github.com/piranha/pump

ds_ 13y ago
Why would you want to bundle styles with your components? There is already a nice separation there, maybe you could give an example use case?
- catshirt 13y ago
  maybe it's nice, but it's nice in the same way we've been separating HTML and JS for years, which React completely disregards. if styles were solved in a similar way i think you'd be able to get rid of the notion of a selector all together (though it would compile down to normal selector based css). also, components would just be easier to grok and more portable.
  - ds_ 13y ago
    I can't see the parallels between js/html and css/html. React disregards the js/html because they acknowledge that there never really was proper separation. With css/html, at least to me, it seems like there is a clearer separation. Maybe I'm being shortsighted.
    - catshirt 13y ago
      not short sighted at all. i haven't completely convinced myself yet either. :) i guess the question i struggle with then is, what is so nice about that separation? and, could those problems not also be solved in JS?

recuter 13y ago

"Lets have a tinybrowser like thing to target that will run inside the browser and output to it as if it was a GPU" is truly one of those its-so-crazy-it-just-might-work ideas. I'm a tad miffed about the size (70KB), but then again it is smaller than Angular. I took a wait-and-see attitude with Angular/Ember/Meteor/Yet-another-Express, they are all neat in a way but never completely shoo away the feeling that the whole Javascript MVC thing is some sort of programming Vietnam. The OP is totally different and alien and actually gives me hope! Hurrah! Exciting times.

Robin_Message 13y ago
Programming's Vietnam is supposedly object-relational mapping, although MVC does tend to be built on top of ORM so maybe the comparison is apt :) http://blogs.tedneward.com/2006/06/26/The+Vietnam+Of+Computer+Science.aspx http://blogs.tedneward.com/2006/06/26/The+Vietnam+Of+Compute...

vijaykiran 13y ago

This should fix the innerHTMLstuff - https://github.com/vijaykiran/react-tutorial-om/commit/15281e3c9429b52ef265087371fcebe3e0d7a00e https://github.com/vijaykiran/react-tutorial-om/commit/15281... Also, why clojurescript 2127 ? I thought 2120 is the latest stable version.

vijaykiran 13y ago
Apparently 2127 is about to announced while I was typing the parent comment - https://groups.google.com/forum/#!topic/clojure/0nxFc9xDmDw https://groups.google.com/forum/#!topic/clojure/0nxFc9xDmDw

hencq 13y ago

I know very little about React, so this might be a dumb question. I looked at the source for the example and it looks very nice, but I noticed the DOM is built using constructs like (dom/div ...). Is it also possible to use something akin to hiccup's syntax like [:div ...]?

vijaykiran 13y ago
As suggested somewhere else on this thread - try https://github.com/holmsand/cloact https://github.com/holmsand/cloact
- ds_ 13y ago
  I'm wondering if the two projects are aware of each other and if there is the possibility for some collaboration there(similar ideas/approaches?)?
graue 13y ago
Looks like Sablono, which provides a Hiccup-style syntax you can use with Om, is your best bet there: https://github.com/r0man/sablono https://github.com/r0man/sablono

john2x 13y ago

Does anyone else think the name is unfortunate? I can't imagine how difficult it would be to google "om".

ds_ 13y ago
It's the first result for "om clojurescript". So not really.
y3di 13y ago
I think it's super clever. It's like we've finally achieved enlightenment over the dom
jlehman 13y ago
Plus, think about the possibilities for use of the word "nom".

harichinnan 13y ago

http://en.wikipedia.org/wiki/Om http://en.wikipedia.org/wiki/Om