top | item 20475686

(no title)

cljs-js-eval | 6 years ago

You should check out CLJS's reagent. It mixes the best of both worlds, everything is a plain CLJS object without special syntax, but it's also obviously HTML/CSS:

  [:div {:style {:display "flex", :flex-direction "row"}}
   [:label {:for "email"}]
   [:input {:type "text"}]]

discuss

order

benbristow|6 years ago

That looks really ugly IMHO, compared to JSX which is more HTML-like.

Perhaps it might look better if there's a bigger example?

pcr910303|6 years ago

> That looks really ugly IMHO, compared to JSX which is more HTML-like.

The point of this is not of asthetics, (IMO it’s not that ugly :-)) but more that it just consists of common data structures that is easy to manipulate. If you’re a React person, think of directly writing JSON instead of using indirect React.createElement calls. Writing components in JSON would be impractical; (actually it might not be - I think I’ve seen blogposts using React without JSX) but writing components in cljs data structures are practical and less tooling is needed!

rhaksw|6 years ago

is this much different than JSX?

    <div style="display: flex; flex-direction: row">
        <label for="email"/>
        <input type="text"/>
    </div>
I definitely want to try CLJS some time.

edit Oh I see. You don't need the extra {} to jump into JS mode. And, CLJS requires : to denote keys. I think as long as my editor colors the syntax appropriately I'm okay with either.

rafd|6 years ago

The difference is that in the cljs version you are writing clojure at all times using clojure data structures and types (vector, map, keyword, string) which lets you manipulate and generate things easily, and, you don't have to jump between "jsx" mode and "JS" mode.

sooheon|6 years ago

Also the CLJS you see is using the vectors and hashmaps of the language, meaning much more direct manipulation the same way you'd program any other datastructure.

cljs-js-eval|6 years ago

The :display is a keyword, which works like keywords in Ruby or Erlang; it's a special, never-garbage-collected string for when you use the same string over and over. Though I'm not sure whether the implementation is the same when compiling to Javascript instead of the JVM.

cljs-js-eval|6 years ago

Not really - and that's why I like it. I like JSX too.