Another great video! And some Calva tips, as usual: 1) You should connect to the `:app` build REPL, not the `browser-repl`. (I should probably rename that.) Because you want Calva to be connected to the running app. Then you can redefine functions and stuff piece by piece, and also inspect the app from the editor. Try evaluating a re-frame subscription, for instance. Very powerful. 2) When you test threads, like you so excellently demonstrated, you can use ctrl+alt+enter to evaluate the thread up to the cursor. Nifty, if I may say so myself. 😀 3) I notice you still haven't gotten Paredit under your belt. It will amaze you. 4) This is more of wishlist thing. Would be cool if you demonstrated Calva's Getting Started REPL. I've done a video on it, but your tutorial style is superior to mine, so would be moar awesome.
1) thank you for letting me know! :) 2) Again thanks for the tip! 3) I read of the Paredit documentation on Calva and I have a lot of conflicting OS hotkeys so I need to adjust the Calva ones (I explained it in my video but cut it out :p ) 4) This is a really good idea, I think it would help me also. I'll watch your video and make one on it too :) Thank you for the compliment, but I think any content on Clojure is excellent! Thanks for watching and giving me ideas!
Way cool! I also noticed in this and some other videos that the automattic comment continuation gets in the way a bit. So I have now made it to be an on-demand thing. Use `alt+enter` when you want to continue a comment. See this tweet 😎 twitter.com/pappapez/status/1384976194861469704
I just started a new job with clojure/clojurescript and re-frame. Was panicking that it was hard to read but you broke it down super clean and easy. Totally love it!
As a learner of Clojure it would be so good if the code was published in github or elsewhere for me to look at. Vidoe is great for learning, source code is great for reference. As always great content. Thanx!
I just committed it :) github.com/danownsthisspace/clojurescript-re-frame-http-fx-eexample Thanks for watching! Is there anything in particular you want me to cover?
@@onthecodeagain the next step which I'm confused by at the moment is connecting form fields to an reagent atom. So a short tutorial on data input would be nice.
really nice Video. One remark i have to make. Your naming is a little bit command driven. For instance ::fetch-users should be an event and also named like an event. That means ::onXyButtonClick would be a better name.
Would be absolute killer to make a comparison video for Re-Frame alternatives like: "Reagent" "rum" "hoplon" "fulcro" (this one is a spaceship of frameworks but has pretty nice docs) I bet I forgot a bunch. This kind of video would be really helpful for beginners since we have a zoo of react wrappers. Also maybe cover "shadow-cljs" since it's beginner friendly and all the intros for it (on YT) have terrible sound :D
That's a great idea! re-frame uses reagent so kind included that one :p I rate I'm gonna run a bit with re-frame then get into other frameworks while still doing short syntax videos. Shadow-cljs is a great tool to cover!
You probably can inline style with "garden" {:style ... } - from "Reagent". Covering "garden" as a css template language would be cool. Especially how it benefits from Clojure standard library/hot reaload.
Hey, thanks for the tutorial! I will use re-frame on the next project for sure. Especially if maintain the state on hot-reload, Reagent doesn't have it and becomes much slower. Can you tell me what vscode theme are you using? It seems fitting perfectly clj
Thanks for watching! I change my theme pretty much hourly :p this one is called: Community Material Theme by Mattia Astorino :) maintaining state on hot-reload is the only way to make front-ends! Good luck with your project!
sorry in advance for the perhaps dumb questions. Great video, man! 1) It looks like storing all the @click etc. events in one state seems to be ending up with a reallly large file (when we have 20 pages or somethign like that?) 2) I come from vue and am used to components. Is this possibke with reframe? You meantioned it uses react, so it sounds like it should be? 3) why is the state management called db and not something like state? Thats somewhat weird to me 4) you applied the windicss/tailwindcss approach for styling, I guess I can integrate one of them into my projects? thanks in advance, if someone answers any of these.
So the way I work on lather applications is to have a separate events/subscription/view file for every page and/or component. Then house those in a folder woth the page name. You can use your own descretion and put them all in a single file if it makes sense. Every function that renders out hiccup is basically a react component. Its just called db not sure why but you could call it 'state' if you wanted to. Yeah you can use any css library you want :)
I am sorry. How did you run REPL from VsCode. I heard from your video by using "culver?" What were the hot keys you key in to activate the REPL? Are there any plugin I should install first? Thanks.
What are the advantages of using clojurescript in comparison to just JS ? it seems to me that is a lot more code to write just for an api call compared to JS. Do i miss something? don't get me wrong is a cool language, but in the real world, there are advantages?
Yeah I agree, the initial setup and use of a Cloure project is more involved then a basic html/js setup. I think where Clojure shines is on larger-scale apps. As soon as JS apps go past a certain scale they in my experience become quite hard to maintain. Clojure itself helps with complexity primarily by using immutable data and minimizing side effects. Also, repl driven development is the most awesome thing ever. the other side is that JS changes really often while Clojure itself remains quite similar. In that way I feel like Clojure codebases themselves inherently have longer lifespans because they dont become legacy code just based on Syntax. Here is a list of reasons a viewer on a video mine wrote in answer to a similar question :) 1 The main idea of Clojure is "Simple made easy" - the supremacy of simple abstractions with high synergy over the familiar, familiar, abundance of syntactic sugar at the language level - "easy". Topics: Complexity as the main enemy of "Out of the Tar Pit", the difference between "accidental complexity" and "domain complexity", "why it is better to have many functions working with a small number of types" and the state as the main source of complexity. 2 Good two-way interop. protocols, records, expansion of Java types. These abstractions can also be used to create interesting features such as funcool / cats and smeared with monads. 3 Clojure is attended by (mostly) old people who love the craft. Few shit coders. Most of the ecosystem is written by experienced coders who know what they're doing and don't abuse macros. 4 Infinite Lisp extensibility. The EmacsLisp example is a major factor in why Emacs is still relevant. 5 At the same time, Clojure is not really a LISP. It adds [] for form binding and {} for metadata - this is an example of a rational approach to syntax. "decomplecting" brackets with different semantic categories. 6 Accretion policy is not to break legacy code. The fact that Clojure doesn't use the traditional Wooop with inheritance helps a lot with this. 7 "Multimethods and Hierarchies" as an alternative to Ooooooo. 8 Clojure has "immutability by default" (versus "mutability by default" as in Scala "Scala Collections: Why Not?") 9 Global immutability and "persistent data structures" are trivial to parallel (map ..) just add p (pmap ...) 10 Pure functions are easy to test, memoized and viewed as a black box. The JVM is very fond of simplicity and simple functions. 11 EDN is an alternative to JSON with extensibility, time format and Clojure code subtype EDN that allows you to manipulate code as data using a standard set of functions. Makes serialization trivial. 12 Clojure is uniquely suited to "REPL Driven Development" due to the homoiconicity and purity of functions, which allows you to change parts of the program while keeping the state. Demo "Interactive programming Flappy Bird in ClojureScript" 13 Spec is a killer feature. It allows you to describe the shape of data much more expressively and more accurately than a strong type system using the same language, the same set of functions instead of the lasso meta type language as in other functional languages. These descriptions can be bound to functions like "Design by Contract" using jeaye / orchestra, this can be done in the usual way - like types. For example, try using the type system to describe in your favorite language that a function that takes an array as an argument should return an array of the same length. This is trivial in Clojure. Spec also allows you to generate data that satisfies it. For example, for "generative testing". It even has a QuickCheck port with haskell, and it's easier to use in the dynamic language "generative testing" since you don't need to write generators for a bunch of types. The fact that tests (specs) are executed at runtime does not affect production as they can be disabled at the compiler level. 14 Unique blend of functionality with an emphasis on immutability and dynamic typing. The main feature of functional programming is immutability (no assignment). Typing in most languages allows you to catch typos and simple errors at the cost of a boilerplate and fragility of the code. Since strongly typed code cannot have a partially valid state (for example, transitional during refactoring) and code that is expensive to change quickly decays. Tests with good coverage solve the type problem, serve as a specification, and allow granularity of code correctness. 15 Almost everything in klozhure is lazy - if no one came for the result of calculations, then it will not happen. 16 JVM is very important to Clojure. First, the JVM is designed with a focus on dynamism and lazy loading. She can inline code, rewrite polymorphic calls into monomorphic ones, deduce types, re-optimize code based on the current load. Secondly, it is a huge ecosystem of ready-made solutions. And since Clojure is just a library, it can be pulled into the JVM project. 17. Clojure's design takes into account the 80/20 rule (20% of the effort yields 80% of the result) - naive Clojure code by default balances versatility, performance, and security. But for the critical 20% (and usually 3%) there is an opportunity to go down to a level lower. You can use math functions without overflow check, you can add type hints to get rid of reflexes. It is possible to create local mutability using volatil or transient, use a transducer instead of macro threading. Finally, you can rewrite the function in Java and call it from Clojure. It is extremely rare to prescribe since the optimized code in Clojure is compiled into approximately the same bytecode as in Java, it even without a tambourine is compiled into native code through GraalVM (unlike other dynamic languages
Another great video! And some Calva tips, as usual:
1) You should connect to the `:app` build REPL, not the `browser-repl`. (I should probably rename that.) Because you want Calva to be connected to the running app. Then you can redefine functions and stuff piece by piece, and also inspect the app from the editor. Try evaluating a re-frame subscription, for instance. Very powerful.
2) When you test threads, like you so excellently demonstrated, you can use ctrl+alt+enter to evaluate the thread up to the cursor. Nifty, if I may say so myself. 😀
3) I notice you still haven't gotten Paredit under your belt. It will amaze you.
4) This is more of wishlist thing. Would be cool if you demonstrated Calva's Getting Started REPL. I've done a video on it, but your tutorial style is superior to mine, so would be moar awesome.
1) thank you for letting me know! :)
2) Again thanks for the tip!
3) I read of the Paredit documentation on Calva and I have a lot of conflicting OS hotkeys so I need to adjust the Calva ones (I explained it in my video but cut it out :p )
4) This is a really good idea, I think it would help me also. I'll watch your video and make one on it too :) Thank you for the compliment, but I think any content on Clojure is excellent!
Thanks for watching and giving me ideas!
Way cool! I also noticed in this and some other videos that the automattic comment continuation gets in the way a bit. So I have now made it to be an on-demand thing. Use `alt+enter` when you want to continue a comment. See this tweet 😎 twitter.com/pappapez/status/1384976194861469704
I just started a new job with clojure/clojurescript and re-frame. Was panicking that it was hard to read but you broke it down super clean and easy. Totally love it!
Thats awesome! Congrats man!
Awesome! I wouldn't mind seeing some more of Re-frame, it was very interesting to watch.
More coming! Thanks for watching!
I do mostly lower level os related dev and have been tasked with making a dashboard for my company. This video was sooo helpful! Thank you!
I love Re-Frame && I love your channel
Thanks Edward!!
Your channel is seriously underrated! Great content!
Thanks a lot Lucas! :)
So nice and clear explanations. Awesome, Thank you!
Glad it was helpful!
Super great content you put up here. As always. Thanks. It's really helpful.
Thank you for watching! Glad you find it helpful :)
Thank you for the video! Helped me a bunch
Awesome! Glad it helped :)
As a learner of Clojure it would be so good if the code was published in github or elsewhere for me to look at. Vidoe is great for learning, source code is great for reference. As always great content. Thanx!
I just committed it :) github.com/danownsthisspace/clojurescript-re-frame-http-fx-eexample
Thanks for watching! Is there anything in particular you want me to cover?
@@onthecodeagain the next step which I'm confused by at the moment is connecting form fields to an reagent atom. So a short tutorial on data input would be nice.
@@SebastianAnklamm cool I wanted to add that but I didnt want to make the video too long. Ill do that in the next vid
really nice Video. One remark i have to make. Your naming is a little bit command driven. For instance ::fetch-users should be an event and also named like an event. That means ::onXyButtonClick would be a better name.
Would be absolute killer to make a comparison video for Re-Frame alternatives like: "Reagent" "rum" "hoplon" "fulcro" (this one is a spaceship of frameworks but has pretty nice docs) I bet I forgot a bunch. This kind of video would be really helpful for beginners since we have a zoo of react wrappers. Also maybe cover "shadow-cljs" since it's beginner friendly and all the intros for it (on YT) have terrible sound :D
That's a great idea! re-frame uses reagent so kind included that one :p
I rate I'm gonna run a bit with re-frame then get into other frameworks while still doing short syntax videos.
Shadow-cljs is a great tool to cover!
@@onthecodeagain I would look into Fulcro next, it has some amazing concepts.
@@eugenej.5584 I'll check it out. I'll probably go through the motions in creating a basic app with it and then do the comparison after
Thanks
You probably can inline style with "garden" {:style ... } - from "Reagent". Covering "garden" as a css template language would be cool. Especially how it benefits from Clojure standard library/hot reaload.
Yeah I was going to do that in this initial one but didnt want the video to get long. I think my next video will be forms + garden :)
Interesting. Would appreciate a video on adding React Native as a build target.
Ill add it to my list!
Hey, thanks for the tutorial! I will use re-frame on the next project for sure.
Especially if maintain the state on hot-reload, Reagent doesn't have it and becomes much slower.
Can you tell me what vscode theme are you using? It seems fitting perfectly clj
Thanks for watching! I change my theme pretty much hourly :p
this one is called: Community Material Theme by Mattia Astorino :)
maintaining state on hot-reload is the only way to make front-ends!
Good luck with your project!
sorry in advance for the perhaps dumb questions. Great video, man!
1) It looks like storing all the @click etc. events in one state seems to be ending up with a reallly large file (when we have 20 pages or somethign like that?)
2) I come from vue and am used to components. Is this possibke with reframe? You meantioned it uses react, so it sounds like it should be?
3) why is the state management called db and not something like state? Thats somewhat weird to me
4) you applied the windicss/tailwindcss approach for styling, I guess I can integrate one of them into my projects?
thanks in advance, if someone answers any of these.
So the way I work on lather applications is to have a separate events/subscription/view file for every page and/or component. Then house those in a folder woth the page name. You can use your own descretion and put them all in a single file if it makes sense.
Every function that renders out hiccup is basically a react component.
Its just called db not sure why but you could call it 'state' if you wanted to.
Yeah you can use any css library you want :)
we need a tutorial on how to use re-frame-10x plugin!!
good idea!
I am sorry. How did you run REPL from VsCode. I heard from your video by using "culver?" What were the hot keys you key in to activate the REPL? Are there any plugin I should install first? Thanks.
Hey man! Yeah use the Calva extension. calva.io/ then in the command pallette select calva start repl :)
What are the advantages of using clojurescript in comparison to just JS ? it seems to me that is a lot more code to write just for an api call compared to JS. Do i miss something? don't get me wrong is a cool language, but in the real world, there are advantages?
Yeah I agree, the initial setup and use of a Cloure project is more involved then a basic html/js setup.
I think where Clojure shines is on larger-scale apps. As soon as JS apps go past a certain scale they in my experience become quite hard to maintain. Clojure itself helps with complexity primarily by using immutable data and minimizing side effects. Also, repl driven development is the most awesome thing ever.
the other side is that JS changes really often while Clojure itself remains quite similar. In that way I feel like Clojure codebases themselves inherently have longer lifespans because they dont become legacy code just based on Syntax.
Here is a list of reasons a viewer on a video mine wrote in answer to a similar question :)
1 The main idea of Clojure is "Simple made easy" - the supremacy of simple abstractions with high synergy over the familiar, familiar, abundance of syntactic sugar at the language level - "easy". Topics: Complexity as the main enemy of "Out of the Tar Pit", the difference between "accidental complexity" and "domain complexity", "why it is better to have many functions working with a small number of types" and the state as the main source of complexity.
2 Good two-way interop. protocols, records, expansion of Java types. These abstractions can also be used to create interesting features such as funcool / cats and smeared with monads.
3 Clojure is attended by (mostly) old people who love the craft. Few shit coders. Most of the ecosystem is written by experienced coders who know what they're doing and don't abuse macros.
4 Infinite Lisp extensibility. The EmacsLisp example is a major factor in why Emacs is still relevant.
5 At the same time, Clojure is not really a LISP. It adds [] for form binding and {} for metadata - this is an example of a rational approach to syntax. "decomplecting" brackets with different semantic categories.
6 Accretion policy is not to break legacy code. The fact that Clojure doesn't use the traditional Wooop with inheritance helps a lot with this.
7 "Multimethods and Hierarchies" as an alternative to Ooooooo.
8 Clojure has "immutability by default" (versus "mutability by default" as in Scala "Scala Collections: Why Not?")
9 Global immutability and "persistent data structures" are trivial to parallel (map ..) just add p (pmap ...)
10 Pure functions are easy to test, memoized and viewed as a black box. The JVM is very fond of simplicity and simple functions.
11 EDN is an alternative to JSON with extensibility, time format and Clojure code subtype EDN that allows you to manipulate code as data using a standard set of functions. Makes serialization trivial.
12 Clojure is uniquely suited to "REPL Driven Development" due to the homoiconicity and purity of functions, which allows you to change parts of the program while keeping the state. Demo "Interactive programming Flappy Bird in ClojureScript"
13 Spec is a killer feature. It allows you to describe the shape of data much more expressively and more accurately than a strong type system using the same language, the same set of functions instead of the lasso meta type language as in other functional languages. These descriptions can be bound to functions like "Design by Contract" using jeaye / orchestra, this can be done in the usual way - like types.
For example, try using the type system to describe in your favorite language that a function that takes an array as an argument should return an array of the same length. This is trivial in Clojure.
Spec also allows you to generate data that satisfies it. For example, for "generative testing". It even has a QuickCheck port with haskell, and it's easier to use in the dynamic language "generative testing" since you don't need to write generators for a bunch of types.
The fact that tests (specs) are executed at runtime does not affect production as they can be disabled at the compiler level.
14 Unique blend of functionality with an emphasis on immutability and dynamic typing.
The main feature of functional programming is immutability (no assignment). Typing in most languages allows you to catch typos and simple errors at the cost of a boilerplate and fragility of the code. Since strongly typed code cannot have a partially valid state (for example, transitional during refactoring) and code that is expensive to change quickly decays. Tests with good coverage solve the type problem, serve as a specification, and allow granularity of code correctness.
15 Almost everything in klozhure is lazy - if no one came for the result of calculations, then it will not happen.
16 JVM is very important to Clojure. First, the JVM is designed with a focus on dynamism and lazy loading. She can inline code, rewrite polymorphic calls into monomorphic ones, deduce types, re-optimize code based on the current load. Secondly, it is a huge ecosystem of ready-made solutions. And since Clojure is just a library, it can be pulled into the JVM project.
17. Clojure's design takes into account the 80/20 rule (20% of the effort yields 80% of the result) - naive Clojure code by default balances versatility, performance, and security. But for the critical 20% (and usually 3%) there is an opportunity to go down to a level lower. You can use math functions without overflow check, you can add type hints to get rid of reflexes. It is possible to create local mutability using volatil or transient, use a transducer instead of macro threading. Finally, you can rewrite the function in Java and call it from Clojure. It is extremely rare to prescribe since the optimized code in Clojure is compiled into approximately the same bytecode as in Java, it even without a tambourine is compiled into native code through GraalVM (unlike other dynamic languages