Fork me on GitHub
#clojurescript
<
2021-07-14
>
JoshLemer01:07:36

I wonder if any of the leading (or maybe new up and coming) libraries/frameworks in clojurescript world are working towards support server-side rendering ala next.js? That would be really cool

Michaël Salihi13:07:16

I wrote this adapter https://github.com/prestancedesign/inertia-clojure for using Inertia https://inertiajs.com/ on Clojure back-end. Inertia now support SSR. I put a SSR version of a demo app on this repo's branch https://github.com/prestancedesign/pingcrm-clojure/tree/ssr, if you want to play with it. I didn't update the README, but check the shadow-cljs.edn, there is two builds. After cloning the repo, checkout on the ssr branch, then npm install following to npx shadow-cljs release app ssr . You can now run the app: 1. The JVM backend clj -M:run 2. The Node backend for SSR node out/ssr.js A live version of the demo can be access here: https://inertia.prestance-design.com/ Ask me, if you have questions.

✔️ 2
JoshLemer15:07:54

Wow thanks Michael, I'll take a look 🙂

👍 2
JoshLemer17:07:59

Do you notice that the demo page kind of flickers as if it's rendering twice on page load?

Michaël Salihi21:07:33

Thanks for the feedback. No I didn't notice that. Which browser?

JoshLemer02:07:19

That's Google Chrome Version 91.0.4472.114 (Official Build) (x86_64) on Mac os big sur 11.4,

JoshLemer02:07:35

I'll try and see if I can get a screen recording

👍 3
JoshLemer19:07:18

Having trouble getting a screen recorder to work for some reason, giphy doesn't seem to work 😕

Michaël Salihi20:07:27

FYI, I just pushed some new feature commits, etc and some dependencies Inertia deps which should fix this double render. https://inertiajs.com/releases/inertia-0.9.2-2021-06-04 This already push on the Ping CRM demo, can you confirm please?

JoshLemer22:07:09

Seems to be fixed now! 🙂

Michaël Salihi23:07:18

Perfect, thanks for your feedback! 👌

blak3mill3r02:07:34

Many have explored that @joshlemer, I have seen several different approaches. Here's a recent one with GraalVM embedding a cljs app inside the JVM https://nextjournal.com/kommen/react-server-side-rendering-with-graalvm-for-clojure

🎉 4
blak3mill3r02:07:13

I also saw one doing server-side rendering with a pure-jvm-clojure implementation of an interface like reagent... removing the need to run JS on the server at all

blak3mill3r02:07:25

I cannot recall the name of that one, perhaps someone else will

dgb2309:07:04

Nextjs does a few things in addition to that though. You can also statically render on build time and I think they also produce sitemaps. I’m pretty sure similar can be achieved with something like fulcro but I don’t think it is provided out of the box.

dgb2310:07:20

I generally really like this approach. There are voices that say that things like Nextjs are overkill for most of webdev. I disagree. I haven’t had a single project where requirements didn’t evolve and that includes frontend interactivity. So you end up wanting a unified and isomorphic dev environment (languages, tools) even if things start out simple. Currently exploring to leverage Clojure/Script for this. The insanity I had to deal with just this and the last week working in traditional stacks are pushing me into this direction. I have high hopes.

zendevil.eth11:07:18

I have the following test that raises an exception in the go block. I know that the exception exists because it shows up in the browser, however, when I run the karma test or the browser test, it shows success (despite showing the exception in the console) Why is that and how to fix this? The exception is raised in the expression:

(.getByText screen "Sign p/Sign In")
(deftest signin-signup
    (render (r/as-element [rc/navbar]))
    (async done
      (go
        (e/init-login)
        (<p!
         (waitFor
          (fn []
            (.click fireEvent (.getByText screen "Sign p/Sign In"))
            (is (some? (.getByPlaceholderText screen "Your email")))
            (is (some? (.getByText screen "Close")))
            (is (some? (.getByText screen "Submit")))))))
           (done)))
  

mauricio.szabo14:07:18

@ps async tests are really tricky in ClojureScript. I'm working on a test library to make these things easier (you can use it right now if you want - it's called check) but if you decide to not use it, the idea is to capture all exceptions, wrap everything around a finally, check if something return promises and wrap these too, etc... Or give up and use interop over a JS test framework (I saw people doing this also)

zendevil.eth14:07:50

what’s the link for check?

zendevil.eth14:07:57

would love to test it out!

mauricio.szabo20:07:48

It's this one: https://gitlab.com/mauricioszabo/check. I'll publish a new version late today, and also add more documentation to it

mauricio.szabo20:07:13

I'll also post on #testing channel what I meant to solve with check

alpox12:07:01

@ps Is it possible that the exception occurred in the click handler?

Justin Chandler13:07:15

I use clojurescript pretty extensively for my own webGL applications and I was giving someone a tutorial on the whole process. They did have one question that I couldn't answer though, and I'm sure someone here knows. What kind of negative performance impact would you see in creating something like 300 clojure datastructures representing entities versus 300 javascript objects, and what is the normal process to mitigate performance difference between the 2? I know there's advanced compilation for google closure, but is there some kind of best practice that will make sure your clojure doesn't end up weighing the program down?

p-himik14:07:15

I'd say it's worth measuring in your specific case. Creating any ClojureScript data structure will always be slower than creating a JS object/array/typed array. By how much - depends on many factors: what those data structures are exactly, what CLJS version you're using, what browser version, probably your OS, likely even your hardware.

p-himik14:07:38

With that being said, that slowdown often doesn't really matter. And when it does matter - you just find the bottleneck and optimize it specifically. Maybe by switching the data structure, maybe the algorithm, maybe by writing low-level JS and interop-ing with it.

Justin Chandler14:07:58

Thank you that's exactly what I was looking for! I figured there's no all-in-one solution as there never is in programming, but that second answer was what I was hoping would be the case and probably should have expected. As with any abstraction, the key is to just optimize the bottle-necks because the benefits of the abstraction out-weigh the minor slow-downs. Anyway thank you I appreciate it!

sova-soars-the-sora15:07:31

I suspect that Clojure script collections are more surgical than [Object object]

p-himik15:07:06

What do you mean by "surgical"?

Oliver George23:07:54

Can you make the clojurescript compiler fail with an error when it reports a WARNING?

Michaël Salihi13:07:16

I wrote this adapter https://github.com/prestancedesign/inertia-clojure for using Inertia https://inertiajs.com/ on Clojure back-end. Inertia now support SSR. I put a SSR version of a demo app on this repo's branch https://github.com/prestancedesign/pingcrm-clojure/tree/ssr, if you want to play with it. I didn't update the README, but check the shadow-cljs.edn, there is two builds. After cloning the repo, checkout on the ssr branch, then npm install following to npx shadow-cljs release app ssr . You can now run the app: 1. The JVM backend clj -M:run 2. The Node backend for SSR node out/ssr.js A live version of the demo can be access here: https://inertia.prestance-design.com/ Ask me, if you have questions.

✔️ 2