As a beginner, am I going to be better off using re-frame instead of reagent? I really like building my own logic with respect to the html dom, but at the end of the day I'm not a web designer and I'm wondering whether I'd be better off switching to re-frame and learning to use that instead of reagent, instead of switching half way through?

I think re-frame greatly simplifies development by providing a clean structure and separation of concerns, so I’d highly recommend it. If you want the result to look nice, I’d also recommend checking into Bulma — a CSS library like Bootstrap or Foundation, but with no JS dependencies to fight with.

I have looked at it actually

and I'm 100% interested. So when you say re-frame provides structure, what do you mean? Do you still write things such as [:div, or does it abstract away the html components?

It uses the [:div syntax like reagent does (in fact it’s built on top of reagent)

You might be interested in a talk I did at the last conj on re-frame and building components https://www.youtube.com/watch?v=JCY_cHzklRs

it goes over how re-frame sets up the flow of events and data.

Thank you!! If it simply enhances reagent then I don't see a problem with using it!

:thumbsup:

In that thumbnail, it talks about app-db. My goal for today is to actually learn how to connect my front end to my backend, I was under the impression that re-frame is simply just improved reagent with structure, is that the case?

You can use re-frame for that with this extra lib:

I was also looking into liminus you see, Im trying to research what my options are

Yes, and app-db is part of that structure. The app-db is where you put all the data that your client uses. So for example, you’ll make an AJAX call to the server to get, say, a list of todo items, and put them in the app-db. Once they’re in the app-db, they’ll render automatically, because you’ll have built components that subscribe to the app-db and render whatever they find there.

okay! so is re-frame-http-fx an alternative to luminus and thus if I use re-frame I don't need luminus?

Luminus is kind of a bigger picture. Let me give you some background.

thank you, I apologise for not being so clued up

Some languages like Ruby have frameworks like Rails that are basically a pre-built web application with both front and back end, and you basically just customize them to get a web app up and running quickly.

Clojure, by contrast, doesn’t have a big all-in-one framework like Ruby does. Instead, you get each little piece by itself: a web server, and AJAX plugin, a front-end client, etc.

Luminus is a tool for putting together a bunch of the individual pieces so that you end up with something similar to Ruby on Rails. It’s very customizable, and you can, for instance, specify that you want to make a web app that uses re-frame.

re-frame-http-fx is an additional plugin that you add in addition to re-frame to make it easy to do AJAX calls with re-frame.

I think luminus will give you re-frame-http-fx along with re-frame, but it’s easy to add manually if luminus doesn’t give it to you automatically.

okay so it sounds like I'll be using both. Does re-frame sit in the front end, back end or in both? I imagine luminous sits in the back?

Luminus is more like the cook that goes to the store, gets the ingredients, and then comes back and puts them together for you. One of the ingredients will be re-frame, which sits on the front end and manages your user interface for you. Another will be the web server (jetty, or possibly http-kit), which sits on the back end. Once your project is created, you won’t be using luminus itself, you’ll be using the skeleton application that luminus put together for you. (You’ll probably also be referring to the docs on the luminus web site a lot, he’s got some pretty good reference material there).

okay, I think this going to be not so trivial as I thought it might be

anyway I need to go and dofamily things now sadly, hopefully I'll crack this later!

:thumbsup: Good luck and feel free to post either here or in #beginners if you have any questions.

So I've got the reframe example in my front end, but for some reason figwheel-main isn't hot reloading the page like it did with reagent. I have to manually refresh the page

hmm

Im using this example, is it because of the event system that I have to refresh it or something?

https://github.com/Day8/re-frame/blob/master/examples/simple/src/simple/core.cljs

Hmm, we recently switched from figwheel sidecar to figwheel main and had some trouble with hot-reloading too.

it really is a shame as I really love figwheel with reagent, allows me to be playful

Try putting in a (js/console.log "Loaded page.") right before the (defn ui …

Loaded page only prints once

That will print a message in your browser console whenever the page re-loads, which will tell you whether it’s figwheel failing to reload your page, or React failing to re-render.

Doesn’t figwheel require the use of one of its hooks to hot reload?

That could be, I’m not real expert on figwheel

@manutter51 if I edit the page, save and switch to browser, figwheel reloads but nothing changes and the console doesn't print loaded page again

Ok, :thinking_face:

I've ammended the top with this

@lucio

(ns ^:figwheel-hooks client.space.core
  (:require [reagent.core :as reagent]
             [re-frame.core :as rf]
             [clojure.string :as str]))

so.. the hook is there, I think?

The ^after-load one? :)

I’ve had more success with shadow-cljs over figwheel when it comes to clojurescript

https://github.com/juxt/edge/blob/master/lib/edge-app-template/resources/clj/new/app.template/main.cljs#L13

Do this to your entry point

@ashley have you got the reagent example you had working

Ah, here’s some relevant docs: https://figwheel.org/docs/hot_reloading.html#re-rendering-ui-after-saving-a-file

there might be a difference - re-frame shouldn’t stop figwheel from working, so it might just have been set up differently

That looks like you got it! @lucio

;; -- Entry Point -------------------------------------------------------------

(defn ^:export run
  []
  (rf/dispatch-sync [:initialize])  ;; puts a value into application state
  (reagent/render [ui]              ;; mount the application's ui into '<div id="app" />'
                  (js/document.getElementById "app")))

;; This is called every time you make a code change
(defn ^:after-load reload []
  (rf/dispatch-sync [:initialize])  ;; puts a value into application state
  (reagent/render [ui]              ;; mount the application's ui into '<div id="app" />'
                  (js/document.getElementById "app")))
  ;(set! (.-innerText (js/document.getElementById "app")) "Hot Reloaded {{name}}!"))

Awesome 👌:skin-tone-3:👌:skin-tone-3:

:thumbsup:

obviously time to simplify

but I'm glad I can use reframe comfortably! ❤️

🙂

For future reference, is ^ special or is it a naming convention for a type of function?

it’s a shorthand for adding metadata

https://clojure.org/reference/metadata

you won’t see it that often in normal code - but it crops up often in tooling, a bit like annotations in other languages

You could see it quite often if you loop over some data to render in your html .i.e. ^{:key “foo”} .. I find myself using this specific one a lot

I like re-frames systems from the small snippet I've seen. Its elaborate but it does save me from having to write my own when my program gets a bit bigger

thank you 🙂

yes - I find it quickly fades into the background once there’s more of your application code, and adds a nice structure to proceedings

and I can still use my reagent knowledge seamlessly

okay so this is all going well, now to do some reading about the backend stuff like I was asking about earlier. But I'm glad I understand events a bit better

@ashley if you're interested in two great video series on reagent and re-frame, I would highly recommend https://www.learnreagent.com/ and https://www.learnreframe.com/. Both created by @jacek.schae

Very well constructed and easy to digest

Thank you very much @yogidevbear @jacek.schae!! I'll give them a watch. Right now I'm focusing on the backend, so I won't be doing much front end until I've got the entire picture!