3 ms·

I'm a designer and not a coder, so I feel obliged to provide my comments with salt added up front. That being said, JSX vs. wrapping HTML in if-statements seem

I'm a designer and not a coder, so I feel obliged to provide my comments with salt added up front. That being said, JSX vs. wrapping HTML in if-statements seems like the same kind of trouble to me. I've done a few simple prototypes in Clojure/Script, so my reasoning is heavily influenced by the fact that I know very little about other languages, and only have moderate amount of knowledge about Clojure. The solution I've encountered in Clojure is to represent the entire page as a data structure. Conditionals and transformations are applied directly to this data structure, which is then sent as-is into the rendering pipeline (which commonly seems to be React). The HTML is never really written by hand, it's just a final "coat of paint" on top of the data. To me, this seems far easier to wrap my head around than splicing two languages together in the same file and potentially finding that the interaction between the two is not as harmonious as one may wish. Rendering to HTML, rather than rendering within HTML (so to speak), seems like it would remove the entire decision point where you have to pick between one library or the other based on the quirks of how it looks when it's spliced into HTML.

mark_edward 10y ago
Can you tell me what clojure libraries/frameworks work the way you describe? I'm learning clojure and would like to build some toy web apps because I've never done webdev before.
- vectorjohn 10y ago
  Sounds like they're referring to hiccup.
- fnordsensei 10y ago
  Start with Figwheel[1] to enable hot-loading code and live reloading: lein new figwheel <app-name> I have used Reagent[2] since I'm only doing prototypes and don't have to worry about production quality. Om/Om Next[3] seems like it would be worth checking out since it does a bunch of clever things that Reagent doesn't. Reagent is very straightforward and therefore might be the better starting point, seeing as you're just starting out. Like the sibling comment pointed out, Reagent uses Hiccup-style data structures to represent HTML. Om can be configured to do the same, but doesn't out of the box last time I checked. Either way, the Hiccup syntax looks like this: [:div [:h1 "Hello world"]] It's just regular arrays with symbols, strings and what-have-you, meaning you can construct them using standard Clojure functions in any way you see fit. Add either Reagent or Om to your project.clj, and off you go. [1]: https://github.com/bhauman/lein-figwheel https://github.com/bhauman/lein-figwheel [2]: https://github.com/reagent-project/reagent https://github.com/reagent-project/reagent [3]: https://github.com/omcljs/om https://github.com/omcljs/om
- serpix 10y ago
  All you need is re-frame. It is well documented and the philosophy is explained as well.
  - fnordsensei 10y ago
    Thanks for the tip, I enjoyed their comprehensive readme. I might give this a go next time around. https://github.com/Day8/re-frame https://github.com/Day8/re-frame
    - bschwindHN 10y ago
      Definitely try it sooner rather than later, it's good stuff. I feel like re-frame is what you would get if you put the time into selecting the best libraries to integrate with React, and then removed as much boilerplate as possible.
aikah 10y ago
> I've done a few simple prototypes in Clojure/Script > I'm a designer and not a coder, so I feel obliged to provide my comments with salt added up front. If you are good enough to be able to pick clojure/script which requires a JVM and a specific approach to programming, then you are a programmer.
- fnordsensei 10y ago
  Fair enough, thank you for the kind words. I feel that a certain amount of humility is due when commenting on a field of study that's not my own. I know that there are many—particularly here, most likely—who have thought far longer and harder about these problems than I have. Edit: by the way, the reason I picked up Clojure is because I (for some reason) watched Rich Hickey's talk Simple Made Easy and thought to myself, "hey, that person is thinking of programming in the same way that I think about design." I felt that the design principles he described that guided the development of Clojure were very similar to a lot of things I've come to consider when designing for human interaction. So I thought that by learning Clojure I might become a better designer, even though I don't write code professionally.
  - sk1pper 10y ago
    That's a super interesting perspective. After programming for many years I found Clojure pretty mind-bending, so definitely props for being able to pick it up. Clojure 100% made me a better programmer. I got pretty in to it for a while but ended up punting and going back to React, and then later Vue, because I really started to feel like the "code is data" thing makes the code really hard to understand at a glance. Example: in Reagent (this applies to all of the react-wrappers I think), displaying a table is as simple as returning a vector in a certain format; thus my code is a simple function mapping what I have (probably a vector of maps) to what Reagent wants. Simple. Mathematical. But here's the thing - my brain doesn't work in functions that transform data. Instead, I'm trying to think in HTML, because that's the target result anyway. So I have to kind of parse the code mentally and mentally compile it to what it will "really" look like. Maybe I didn't work with it long enough to get used to it or something, though. JSX, Vue, Angular really help with that mental compilation step and allow you to see something a lot closer to what's going to be actually output, and therefore make it a lot easier to reason about what the browser's gonna do. Anyway, I was curious, have you continued working with Clojure very much?
lilactown 10y ago
That is what React does, though: you write your page using a data structure (in JSX, an XML-based DSL, or you can use the createElement function directly), and then the React engine parses, diffs and renders your data structure into the DOM. This was React's most touted advantage at the beginning: you write what you know (JavaScript), and React handle's the tricky DOM stuff. JSX isn't templates, it's JavaScript. Clojure(Script) benefits greatly from the fact that Clojure's data structures are much more expressive and robust than JavaScript's, and so a thing like JSX that paints over some of the language's warts is less necessary. Many people opt for using something like virtual-dom or snabbdom instead, which provide a more Hiccup-like API on a surface level. There are wrappers for React (react-hyperscript) as well.

mark_edward 10y ago

Can you tell me what clojure libraries/frameworks work the way you describe? I'm learning clojure and would like to build some toy web apps because I've never done webdev before.

vectorjohn 10y ago
Sounds like they're referring to hiccup.
fnordsensei 10y ago
Start with Figwheel[1] to enable hot-loading code and live reloading: lein new figwheel <app-name> I have used Reagent[2] since I'm only doing prototypes and don't have to worry about production quality. Om/Om Next[3] seems like it would be worth checking out since it does a bunch of clever things that Reagent doesn't. Reagent is very straightforward and therefore might be the better starting point, seeing as you're just starting out. Like the sibling comment pointed out, Reagent uses Hiccup-style data structures to represent HTML. Om can be configured to do the same, but doesn't out of the box last time I checked. Either way, the Hiccup syntax looks like this: [:div [:h1 "Hello world"]] It's just regular arrays with symbols, strings and what-have-you, meaning you can construct them using standard Clojure functions in any way you see fit. Add either Reagent or Om to your project.clj, and off you go. [1]: https://github.com/bhauman/lein-figwheel https://github.com/bhauman/lein-figwheel [2]: https://github.com/reagent-project/reagent https://github.com/reagent-project/reagent [3]: https://github.com/omcljs/om https://github.com/omcljs/om
serpix 10y ago
All you need is re-frame. It is well documented and the philosophy is explained as well.
- fnordsensei 10y ago
  Thanks for the tip, I enjoyed their comprehensive readme. I might give this a go next time around. https://github.com/Day8/re-frame https://github.com/Day8/re-frame
  - bschwindHN 10y ago
    Definitely try it sooner rather than later, it's good stuff. I feel like re-frame is what you would get if you put the time into selecting the best libraries to integrate with React, and then removed as much boilerplate as possible.

aikah 10y ago

> I've done a few simple prototypes in Clojure/Script > I'm a designer and not a coder, so I feel obliged to provide my comments with salt added up front. If you are good enough to be able to pick clojure/script which requires a JVM and a specific approach to programming, then you are a programmer.

fnordsensei 10y ago
Fair enough, thank you for the kind words. I feel that a certain amount of humility is due when commenting on a field of study that's not my own. I know that there are many—particularly here, most likely—who have thought far longer and harder about these problems than I have. Edit: by the way, the reason I picked up Clojure is because I (for some reason) watched Rich Hickey's talk Simple Made Easy and thought to myself, "hey, that person is thinking of programming in the same way that I think about design." I felt that the design principles he described that guided the development of Clojure were very similar to a lot of things I've come to consider when designing for human interaction. So I thought that by learning Clojure I might become a better designer, even though I don't write code professionally.
- sk1pper 10y ago
  That's a super interesting perspective. After programming for many years I found Clojure pretty mind-bending, so definitely props for being able to pick it up. Clojure 100% made me a better programmer. I got pretty in to it for a while but ended up punting and going back to React, and then later Vue, because I really started to feel like the "code is data" thing makes the code really hard to understand at a glance. Example: in Reagent (this applies to all of the react-wrappers I think), displaying a table is as simple as returning a vector in a certain format; thus my code is a simple function mapping what I have (probably a vector of maps) to what Reagent wants. Simple. Mathematical. But here's the thing - my brain doesn't work in functions that transform data. Instead, I'm trying to think in HTML, because that's the target result anyway. So I have to kind of parse the code mentally and mentally compile it to what it will "really" look like. Maybe I didn't work with it long enough to get used to it or something, though. JSX, Vue, Angular really help with that mental compilation step and allow you to see something a lot closer to what's going to be actually output, and therefore make it a lot easier to reason about what the browser's gonna do. Anyway, I was curious, have you continued working with Clojure very much?

lilactown 10y ago

That is what React does, though: you write your page using a data structure (in JSX, an XML-based DSL, or you can use the createElement function directly), and then the React engine parses, diffs and renders your data structure into the DOM. This was React's most touted advantage at the beginning: you write what you know (JavaScript), and React handle's the tricky DOM stuff. JSX isn't templates, it's JavaScript. Clojure(Script) benefits greatly from the fact that Clojure's data structures are much more expressive and robust than JavaScript's, and so a thing like JSX that paints over some of the language's warts is less necessary. Many people opt for using something like virtual-dom or snabbdom instead, which provide a more Hiccup-like API on a surface level. There are wrappers for React (react-hyperscript) as well.