This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-15
Channels
- # aws (4)
- # beginners (98)
- # boot (23)
- # cider (63)
- # cljsrn (3)
- # clojure (259)
- # clojure-boston (1)
- # clojure-dev (2)
- # clojure-italy (6)
- # clojure-nl (17)
- # clojure-russia (1)
- # clojure-serbia (1)
- # clojure-spec (36)
- # clojure-uk (74)
- # clojurescript (11)
- # cursive (2)
- # datascript (12)
- # datomic (36)
- # defnpodcast (1)
- # devops (1)
- # docs (1)
- # emacs (15)
- # euroclojure (3)
- # fulcro (13)
- # graphql (1)
- # juxt (2)
- # lumo (27)
- # off-topic (46)
- # onyx (23)
- # pedestal (6)
- # planck (2)
- # portkey (27)
- # re-frame (18)
- # reagent (12)
- # remote-jobs (2)
- # ring-swagger (11)
- # rum (4)
- # shadow-cljs (104)
- # spacemacs (4)
- # sql (3)
- # tools-deps (5)
- # vim (45)
@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.
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.
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
JAMstack. I think separation of front end and back end makes a tonne of sense
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
have you seen http://hoplon.io/?
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
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 https://dev.clojure.org/jira/browse/TDEPS-26
Thanks.
@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&gist=c1cdfadefd7c7aee3e312b2b7e332053 https://svelte.technology/repl?version=2.6.0&gist=cfdaa8caaba693666acefba8b85a050b
@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".
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.
@thheller db monster one. https://svelte-dbmonster.surge.sh/
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
<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. https://offert.hitta.se/
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
I'm in the GraphQL/om.next/fulcro camp. Those actually seem to do something "better"
Yea fulcro seems really good when doing full stack
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
https://www.gatsbyjs.org/ 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.
As a side note relating to Gatsby this is interesting @thheller https://blog.mgechev.com/2018/05/09/introducing-guess-js-data-driven-user-experiences-web/
Definitely.
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
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$fs_readdir_recursive.read is not a function
@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
npm install -g shadow-cljs
git clone
cd shadow-cljs
shadow-cljs watch bootstrap-host bootstrap-support
open
this is not an official example though. its just files I randomly have in the repo 😛
this stuff is way more complicated than it needs to be in the repo since it does stuff in the worker
:bootstrap-support
{:target :bootstrap
:output-dir "out/demo-selfhost/public/bootstrap"
:exclude #{cljs.js}
:entries [cljs.js demo.macro demo.lib]
:macros []}
@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?
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)
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 🙂
@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
@jjttjj kind of like this? https://keminglabs.com/finda/