Clojurians Log v2

Maybe try without the /revision/latest/top-crop stuff after .jpeg

hi

What is the best way to fetch something from an API and display it in a reagent component? I found this approach where they use ajax to reset the state of a reagent atom. But is there a better way?

(ns breaking-bad-quotes.core
  (:require [reagent.core :as r :refer [atom]]
            [ajax.core :refer [GET]]))

(defn fetch-link! [data]
  (GET "<https://breaking-bad-quotes.herokuapp.com/v1/quotes>"
    {:handler #(reset! data %)
     :error-handler (fn [{:keys [status status-text]}]
                      (js/console.log status status-text))}))

(defn quote []
  (let [data (atom nil)]
    (fetch-link! data)
    (fn []
      [:div.cards&gt;div.card
       [:h2.card-header.text-center "Breaking Bad Quotes"]
       [:div.card-body.text-center
        [:p#quote @data]
        [:p#author @data]]
       [:div.card-footer.center.text-center
        [:button#twitter.outline&gt;a#tweet
         {:href "#"
          :target "_blank"}
         [:i.fi-social-twitter " Tweet"]]
        [:button#new-quote.outline
         [:i.fi-shuffle " New Quote"]]]])))

"Better" in what sense? Impossible to give any advice without knowing exactly what you want to achieve.

You are right @p-himik. I was mainly just thinking that coming from React.js and JS it is such a standard practice to make a component with a useEffect hook where fetch is called, which uses setState to update a value which then gets displayed. Is there a similarly standard approach for this in CLJS with Reagent? I have looked into cljs-http, core.async and even js/fetch . But I'm not quite sure about which one to use in this scenario: I simply need to fetch something from and external HTTP API and display it in a reagent component.

Even in React, using a hook is a practice, not something standard.

You can use hooks with Reagent just fine. Or you can use atoms. Or you can use re-frame. Or maybe something else.

Generally, people don't use hooks with Reagent simply because Reagent atoms are simpler and sufficient.

> I simply need to fetch something from and external HTTP API and display it in a reagent component. If you care about nothing else, then your current code LGTM.

Thank you for your response. i'm still quite new in the Clojure world. When would it make sense to make use of re-frame?

When you have a decent amount of state that you have to manage.

Yes that was also my understanding 🙂 Thanks again for responding so quickly and well @p-himik

Hey everyone, I am quite curious to hear from those who built applications with Elm before, what benefits does Clojurescript bring to the dev experience over Elm? Sadly, Elm React-Native never took off so I'm looking into Cljs RN. Might as well use Cljs for the SPA while I'm at it.

interop with javascript is at least a lot easier

also, the dev-experience ones you get used to a REPL, hot-reloading etc

I’m almost done with an app using Krell and I had to interop quite a bit with react libraries, so I think it would be awefull with Elm to be honest

#beginner is there a similar option to the || fall back from javascript. For example as used in this context:

<img src={image.might.be.nil || "default.jpg"} />

(or value1 value2)

Note that in both cases the second value will be used if the first one is false.

oh yeah that actually works

probably it compiles to the same expression

thanks

here’s one experience report https://www.youtube.com/watch?v=geeK1-jjlhY

For me... the ability to use Clojure Script interop with Node/TypeScript because of WASM

sorry for my really beginners questions. i am a bit confused about Reagent and Re-frame. What exactly does this "relation" to React ecosystem means? Is the "output" of my clojurescript project that is based on Reagent ...like editable React "component" that someone can use as part of react codebase in a project or what?

or is output pure javascript code?

like vanila js

Re-frame uses Reagent. Reagent uses React. Regardless of what you use, in the end you will have a JS file or files that browsers can run.

A react component is usually a function that returns a "react element"

but what about other great Elm benefits...like refactoring and maintenance of a codebase, when you can literaly dig into some specific part that you still remember about ...and then for the rest ... compiler directs you. Don't get me wrong... i just recently "moved" here... but for reasons around how Elm core team drives development of Elm... where you have a feeling that Elm is just a private project... shared with public... and that rarely community is heard

which is an object you get from calling React.createElement(...)

But i am still not fully sure, that i did the right decision. I still try to persuade myself i did.... every day

A reagent component is usually a function that returns "hiccup" data, which is a format that can be converted to a react element

so i am interested in others opinion

aha... so Reagent uses React functionalities... which i need to be aware of then. :) and the output of a project is vanila JS. ok, thanks!

I think the role you use a language (contractor, enterprise employee, cofounder) will impact your reasoning to keep commited to Clojure

what do you mean with that exactly?

for example.... I think many of us want to use a popular language because we think that helps us find a job

even though Clojure is simple... it can take time to learn... so demand can be high in the market and there is a barrier to entry

contrast that to JS... low barrier... bigger market

but more competition

aha...

that's why I use JS, Typescript, Clojure and CLJS... it gives me both strategies

big fish in small pond (I am still a small fish)... or small fish in big pond

other than that... ignoring any market reason... just pick what you like to work with

would you say (since you use both worlds) ... that for instance.... you need to equaly frequently devote time for maintaining the past projects... (updating, upgrading packages...) or would you say that Clojurescript allows you to do that less frequently. This is one really big plus for Elm ... you might be aware of, for some, slow development... but for some... this is a huge plus.

or your two ponds require equally amount of effort for this? :)