Fork me on GitHub
#shadow-cljs
<
2018-05-15
>
grounded_sage08:05:22

@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.

grounded_sage08:05:50

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.

thheller08:05:44

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

4
thheller08:05:56

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

thheller08:05:09

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

grounded_sage09:05:55

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.

thheller09:05:35

what do you mean by similar?

thheller09:05:31

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

thheller09:05:04

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

4
grounded_sage09:05:02

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.

grounded_sage09:05:33

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

thheller09:05:15

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

thheller09:05:26

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

grounded_sage09:05:12

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

thheller09:05:52

are we not doing that already?

thheller09:05:19

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

thheller09:05:33

in CLJS it sometimes looks like React is your only option

grounded_sage09:05:33

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

thheller09:05:06

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

grounded_sage09:05:36

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.

grounded_sage10:05:42

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.

grounded_sage10:05:08

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.

thheller10:05:32

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

troglotit10:05:07

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

thheller10:05:41

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

thheller10:05:54

but then lose in actual real world apps

thheller10:05:40

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?

thheller10:05:11

@christopher.rosengren if you use tools.deps you must upgrade that to the latest version. needs this fix https://dev.clojure.org/jira/browse/TDEPS-26

thheller10:05:15

but yeah adding the dep also works

grounded_sage11:05:04

@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. https://svelte-sierpinski.surge.sh/ Another animation example. https://svelte.technology/repl?version=2.6.1&amp;gist=c1cdfadefd7c7aee3e312b2b7e332053 https://svelte.technology/repl?version=2.6.0&amp;gist=cfdaa8caaba693666acefba8b85a050b

grounded_sage11:05:22

@troglotit this is the thing I was referring to https://custom-elements-everywhere.com/ 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".

grounded_sage11:05:27

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.

grounded_sage11:05:11

There is quite a bit of stuff on here which may be relevant to your queries also. https://github.com/flagello/awesome-sveltejs#built-with-svelte

troglotit11:05:16

<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

grounded_sage11:05:49

@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.

thheller11:05:42

@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)

thheller12:05:56

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

grounded_sage12:05:09

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

grounded_sage12:05:01

This is built with Sapper/Svelte. https://offert.hitta.se/

thheller12:05:28

I don't understand .se but it only seems to be the homepage. the "dynamic" stuff seems to be something else https://www.hitta.se/s%C3%B6k?vad=snickeri#offert

thheller12:05:59

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

thheller12:05:32

but they have downsides too ... nothing is perfect

grounded_sage12:05:33

Yea fulcro seems really good when doing full stack

thheller12:05:41

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

grounded_sage12:05:02

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

grounded_sage12:05:57

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.

troglotit12:05:02

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

troglotit12:05:02

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

grounded_sage12:05:44

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

thheller12:05:45

https://www.gatsbyjs.org/ might be interesting for you as well

grounded_sage12:05:51

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.

thheller13:05:49

seems like a bit of over-engineering but interesting

grounded_sage13:05:37

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.

jjttjj14:05:45

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?

thheller14:05:23

@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?

thheller14:05:47

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

thheller14:05:11

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

thheller14:05:53

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

jjttjj14:05:43

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$fs_readdir_recursive.read is not a function

thheller15:05:01

it only exports the single function

thheller15:05:22

(def x2 (fsr dir)) should work

jjttjj15:05:36

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

denik19:05:51

@thheller is self-hosted cljs broken or just this demo? I can’t get it to run: https://code.thheller.com/blog/shadow-cljs/2017/10/14/bootstrap-support.html

thheller19:05:27

can't get what to run?

denik19:05:40

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

thheller19:05:46

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

denik19:05:56

that’s what I got too

thheller19:05:35

should compile fine if you add reagent to the classpath

thheller19:05:50

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

denik19:05:10

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

thheller19:05:09

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

thheller19:05:11

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

thheller19:05:21

no wait .. looking at the wrong file

thheller19:05:32

shadow-cljs watch bootstrap-host bootstrap-support

thheller19:05:26

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

thheller19:05:29

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

thheller19:05:10

don't know about reagent though.

thheller19:05:13

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

thheller19:05:23

this works demo.selfhost.simple

denik20:05:22

@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?

thheller20:05:55

it should just work with reagent

thheller20:05:04

but I don't remember which reagent version I tested

thheller20:05:11

it might break with 0.8.

denik20:05:02

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)

denik20:05:10

is there a repl-based workaround?

thheller20:05:36

are you using lein with cursive?

thheller20:05:53

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

denik20:05:03

🙏:skin-tone-2: problem solved

denik20:05:25

yes. aha! ok, will try

justinlee20:05:11

@thheller you sound more professorial than I was expecting 🙂

thheller20:05:54

is that a good thing or a bad thing? 🙂

justinlee20:05:45

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 🙂

thheller20:05:44

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

justinlee20:05:39

well you have demonstrated that that is obviously not needed

grounded_sage23:05:41

@jjttjj what are you using Electron for?

jjttjj23:05:57

@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