Fork me on GitHub

@thheller just listened to you on defn. Something interesting to check out is Svelte and its accompanied framework Sapper. Interesting concept as it allows you to write applications that compile down to virtually hand written JS size/perf.


I’ve moved to using Sapper for now as most things I am building are more websites than full blown apps. I’m 100% betting on web now as PWA is now hitting desktop and once it’s standard on phones I see little need for native apps anymore. It’s still really new so things will likely change but would be great if we could do something like this without dropping to JS for logic.


I looked at svelte but I don't buy the "compiles to hand written JS" argument at all.


It looks nice but it is data binding with JS objects again.


I don't want to do data bindings again ever 😛


I’m wondering how much work it would be to do something similar in cljs land. I’ve never done much at the js level as I dove straight into Clojure first and moved around Elixir, Elm space before coming back to Clojure.


what do you mean by similar?


their .html files can pretty much just be .cljs files with one simple macro


unless you really want to write html. but who wants to do that if you can write hiccup instead


Not sure really haha. I like using React from cljs but have found it difficult to get the kind of workflow I am looking for. Also I’ve come to realise that vdom has noticeable overhead and only really serves the purpose of hedging bets by spreading out across rendering targets and handling issues that browsers are progressively smoothing out.


Hiccup is so much cleaner and less error prone than HTML lol of course.


what kind of workflow are you looking for? I do agree that vdom/react is not the perfect solution either but every abstraction is going to have weaknesses


I do like it far more than the old mutable dom style though


JAMstack. I think separation of front end and back end makes a tonne of sense


are we not doing that already?


I do think that people reach for React too quickly sometimes though. If you only have one tiny thing on a page that actually is a bit dynamic you can usually do it with a tiny bit of DOM interop


in CLJS it sometimes looks like React is your only option


Last time I looked at Hoplon it didn’t have a story for ssr


yeah ssr is tricky subject. I don't want to use CLJS on the server but if you go with React you pretty much have to


I’m big on the idea of Netlify and other services like it. Just put your whole front end on a CDN (set and forget) and use an API for the data you need.


I thought about using Preact CLI as it’s very lightweight but it still requires the vdom boot up time and memory resources. Plus it still requires compat if you want to take full advantage of the React ecosystem. Svelte seems to win or be on par on the js benchmarks site. Especially when it comes to memory usage. Doing lighthouse testing on Sapper. Taking out images you can get interactive in under 1 second and meaningful render around 0.5 for simple stuff like what I am doing now. Plus the entire web application can be shipped in the first network packet. In performance profile it’s like 20ms compared to almost 300 ms scripting time. Those are just baseline numbers I have seen.


There also seems to be a growing number of people bundling up components into web components. So people are using like Vue/React/Angular mixed together. I get this funny feeling that we are going to see a swing back to non vdom UI’s when PWA is everywhere.


do you have a svelte example that actually does dynamic stuff? I can only find mostly static pages


Vue/React/Angular all have huge runtimes, it’s somewhat possible to compile them to WebComponents, but it doesn’t mean you should mix them


benchmarks are dangerous since you can build frameworks that are optimized to win in those benchmarks


but then lose in actual real world apps


100kb gzip'd JS is fine I think and you can fit a whole lot of stuff into that

Chris Rosengren10:05:32

Hello, new user trying to setup, when running shadow-cljs watch app, I got the error: HTTP startup failed java.lang.IllegalArgumentException: XNIO001001: No XNIO provider found. Adding org.jboss.xnio/xnio-nio {:mvn/version "3.4.6.Final"} to deps.edn fixed it and the clojurescript compiled. Am I doing something wrong?


@christopher.rosengren if you use tools.deps you must upgrade that to the latest version. needs this fix


but yeah adding the dep also works


@thheller I've been slowly collating things but there is a heap that I simply didn't bookmark because I didn't think. This is that demo that they used to show off React Fiber. Another animation example.;gist=c1cdfadefd7c7aee3e312b2b7e332053;gist=cfdaa8caaba693666acefba8b85a050b


@troglotit this is the thing I was referring to I also know this is a thing as I have watched a few videos with respect to Elm being able to interact with the non-typed js world and other people saying they let front end devs write in whichever framework they wish and treat it as front-end "microservices".


If you look at the first thing in FAQ at the bottom it clearly states that the full intention is for people to share components everywhere which doesn't make sense with runtimes embedded.


There is quite a bit of stuff on here which may be relevant to your queries also.


<my-awesome-component/> to be able to render it - this component should be bundled with it’s renderer. If it’s handwritten/Svelte or similar - it’s ok, but it can come with React or something else


@troglotit that's the perspective I am looking at right now. React and React Native was created to hedge bets on which platform will win. Whilst dealing with dev productivity across platforms and web version + edge cases + web inconsistencies. Everyone grabbed the vdom and ran with it. Now we have a very fragmented web ecosystem with less composition/sharable work. I haven't been around for a long time in programming/web world but from where I am standing it looks like the PWA and newer more consistent browsers with automatic updates will have us going back to JS without bundled runtimes.


@grounded_sage those are all toy examples. I was thinking more along the line of some kind of form with some dynamic properties (eg. select boxes depending on previous choices, suggestions from the server and so on)


web components would be nice but its all this old mutable horror show I want to get away from


Yea I feel ya. I will ping them in Gitter and see if anyone has anything.


This is built with Sapper/Svelte.


I don't understand .se but it only seems to be the homepage. the "dynamic" stuff seems to be something else


I'm in the GraphQL/ camp. Those actually seem to do something "better"


but they have downsides too ... nothing is perfect


Yea fulcro seems really good when doing full stack


Apollo has some interesting stuff as well but who wants to do JS 😉


Every time I look at Fulcro the docs and resources impress me


I really don't want to do JS haha. I'm using Svelte/Sapper because I can't justify the runtime and there isn't a good static site generator story for Clojure ecosystem.


I started at new position w/o experience in april - spent month learning and writing fulcro, then decided to rewrite in re-frame.


I came from JS & React. I had thoughts of writing bindings to Apollo for reagent, but I’m too inexperienced


Interesting. I haven't looked at Apollo before only heard about it

thheller12:05:45 might be interesting for you as well


Yea I assessed that and really considered it. Though I wasn't sure how far I would get due to plugins etc. I already messed around enough in Cljs playing around with React Native for Web. If I was going to use plain React I would use Preact-cli due to preact being more lightweight. Anything more complex I'd rather use Cljs.


seems like a bit of over-engineering but interesting


I've done a heap of reading and testing. Preact is pretty comparable and I don't see how Svelte way could be made functional.


I'm very new to node and electron and shadow-cljs. Am I supposed to be able to access node libraries from the :browser targeted renderer in electron? It seems like (defonce fs (js/require "fs")) works for me but (:require ["fs" :as fs]) results in Uncaught SyntaxError: Unexpected token . Also, this might be unrelated, but when I (defonce fsr (js/require "fs-readdir-recursive")) after installing the package with npm I get Uncaught ReferenceError: fs_readdir_recursive is not defined This is all after adding only these modifications to the shadow-cljs electron example. Any obvious things I'm doing wrong here?


@jjttjj I have not done any electron development myself and I don't know what the recommend approach is. Do you know if you are supposed to use require in the renderer or not?


you can set :js-options {:js-provider :require} in the renderer config which should make all packages work


but I honestly do not know if you are supposed to it that way or not


seems to be ok to just use :js-provider :require. this will just call js/require basically instead of trying to bundle/convert the code that :browser usually does


Ok great that seemed to work for fs thanks! Still having issues with the external node dep ["fs-readdir-recursive" :as fsr] ... (def x2 (fsr/read dir)) getting shadow.js.shim.module$ is not a function


it only exports the single function


(def x2 (fsr dir)) should work


that did it! awesome thanks so much for the help 🙂


@thheller is self-hosted cljs broken or just this demo? I can’t get it to run:


can't get what to run?


npm install -g shadow-cljs
git clone 
cd shadow-cljs
shadow-cljs watch bootstrap-host bootstrap-support


uhm I didn't touch that example in forever. seems to be missing reagent


that’s what I got too


should compile fine if you add reagent to the classpath


this is not an official example though. its just files I randomly have in the repo 😛


I added it to the deps in the lein cljs profile and it didn’t work 😕


this stuff is way more complicated than it needs to be in the repo since it does stuff in the worker


shadow-cljs watch bootstrap-host bootstrap-support bootstrap-worker


no wait .. looking at the wrong file


shadow-cljs watch bootstrap-host bootstrap-support


this works if you remove the reagent.core from the config


  {:target :bootstrap
   :output-dir "out/demo-selfhost/public/bootstrap"
   :exclude #{cljs.js}
   :entries [cljs.js demo.macro demo.lib]
   :macros []}


don't know about reagent though.


(require '[demo.lib :as x])
   (js/console.log "x" (x/hello))


this works demo.selfhost.simple


@thheller I’d need to be able to require the cljs deps of the project within self-hosted cljs, so how would I get reagent in there?


it should just work with reagent


but I don't remember which reagent version I tested


it might break with 0.8.


hmm. for one I’m in this yakshave because having a cljs repl as a devtool in browser would be cool but also because unfortunately I can’t seem to get a cljs-repl going within cursive from an embedded shadow-cljs process (I get a window prompt)


is there a repl-based workaround?


are you using lein with cursive?


if so you need to add the nrepl-middleware for the prompt to go away


🙏:skin-tone-2: problem solved


yes. aha! ok, will try


@thheller you sound more professorial than I was expecting 🙂


is that a good thing or a bad thing? 🙂


it’s neither good nor bad. it’s just funny to have a person who is nothing more than text to me suddenly become real 🙂


I don't have a degree or anything of that sort though 😉


well you have demonstrated that that is obviously not needed


@jjttjj what are you using Electron for?


@grounded_sage basically experimenting with making just a "file explorer" type thing. Fed up with the default Windows one and have a few ideas I want to play with. Started with jvm clj but wasn't liking the gui situation there