How Clojure (and ClojureScript) REPL connections work - feat the creator of Calva!

how's everybody uh today i'm joined with peter you might know him as piz he's the creator of calva um awesome thank you for uh bringing me here today we're gonna make a video which i'm really excited about it's about um how the ripple works you made culver so you're like that's your thing what what ripple is what n ripple is how to start a closure script project and a ripple how to start a closure project with the repel and how the ripple works with those kinds of projects so if you're interested in that this is a video for you [Music] here i've got just a blank directory and let's turn this into a closure and close just product project so you say you use shadow cljs and use depth.eden to create your projects if it's just a front-end then i only need shadows lds most often it's a server involving closure server then i go for depth eden too so which which should we start off with now just i think uh i think it makes sense to start this as a as a shadow cell yes project like create a shadow cell yes so we created a server shell this uh dot file and this is this is where all the configuration for shadow crds will sit exactly you most often have like a build an app configured in in in there so you have builds and also if only shadow cell yes is enabled then you manage the source paths and the dependencies as well should we do that from the start let's should we do that and then so we'll you said yeah we can do that we can start like that pause so this is this is basically telling shadow cljs where our closure script sits yeah exactly yeah where our name spaces are anchored anywhere like so you can say source there i guess so let's if we do source here then we should make a new folder and call it source should we configure a build yeah so configure build so i guess app is the most uh common thing to call it and then this takes in another map yeah and cool so this here we would add i know we would add a target and this is this is and then well what should we target because we can tell we can target node and we can target browser let's make it a browser uh project then what does this actually impact this target browser you know shadow cell yes can create something that targets a node script and it can create something that targets a node library a js file that you can you can require from your javascript to typescript application so i i guess what target browser means is that lds will bundle the compiled output in a way that suits the browser okay cool and i know that um with the build we're going to need to say like where the where the output is going to sit so yeah should we just make this in out out works yeah i also need to put modules here oops needs to be a keyword this splits what javascript files actually created yeah exactly so you can you can split the code into into several modules uh if like that's like an entire video of its own i guess that we should maybe make but it's uh you can you can do something called code splitting for most applications when they start i guess they started with just with no code splitting and just one one one and then then i think yeah one um yeah yeah one main module and then you only configure like the init function in that one this main takes in another map i think yeah yeah i think so i don't actually remember the configuration i think let's let's uh this takes in so this this is gonna this main keyword is the name of the the file that gets outputted to out so we'll have at the end of the day a main.js and then inside of here we can either just load in a file or we can start by having like an initial function run so i don't know what should we start with since we are not doing code splitting it makes sense to just have the init function because this uh you can use entries instead and tell it an entry name space or several entry name spaces that is mostly useful for code splitting so if you're not doing code splitting so just do an integration so in it fn and then we need to add a namespace so now we don't have any namespaces in our project so should we just make a simple closurescript file exactly so let's go to source a new file so i'll just call this cljs yeah or if you want to make it the main namespace of main maybe you can do that as well so main quarter circus so then okay so then we'll go namespace and we'll call this main dot cool and now we can like define an init function here and what should we do just run this yeah so yeah you can just log something maybe okay so js console log init client um okay cool so now we have an init function and this is not a func this shouldn't be in brackets yeah and then you you what you want this init function to be exported as well but you can define it here as first okay yeah so to export it we just add this metadata export and it will export this function then it won't be munched and so for that so we can call it cool and then name here we go and add after call forward slash in it was it main.colorado maybe sorry maybe not cool we could of course have name the name and i think i yeah main.com is this enough for us to get going i don't know i can try it like this and see if it works so i'm going to use culver start this ripple so culver starter project ripple and then select shadow cljs maybe that's worthwhile at this point seeing as we're talking about ripples we got different project types here so there's like babashka mbb joyride chevy cljs what is what are the differences between all of these for calva it will always uh present a basket mbb and joyride as options uh for you because they are like generally like useful in your workflow maybe even if you might not even be working with a closure project you can just uh fire up a basket uh rebel and support your work but then shadow cell yes shows up here because you have a shadow cell yes eden file uh in in the project so if if calva sees that file it will say okay you can actually start this as a shadowclas project and then it will do a lot of a lot of magic around that so it will it will start shadow cell js which in turn will start an end repel server and cal will i also just want to know um because i've never i've done a project with the pavashka and with mbb but i haven't i haven't done anything with joyride what is it what is is it just override runtime what is a so it so yes let's see so mbb and the basket are both using the the small closure interpreter that portuguese uh written so it that is like interpreted closure rather than compile closure and joyride does that as well it's also using this small closure interpreter but what it is it is a vs code extension that lets you script this code from user space so use it you can create a closed script uh scripts that take hooks control and and manages this code and it gives you a rebel a closures with rebel into this code so it's uh it's it's quite amazing i would say i'm biased but uh i think it says it's it's super it's like it's very yeah me and bull dude made it actually it's inspired a lot by emacs so people using emacs a lot of those people use emacs because it will let you script your own editor using elisp in that case uh but in this case it will let you script this code but with a much nicer language like closure script okay yeah we gotta have to make a video you uh yeah that would yeah cool okay so now we're just going to click start a shadow class ripple and then we're connecting to our apple which is this setup here you didn't click app there yeah i gotta click it and then click ok cool so now i suppose there's a few things that we could discuss here yeah so it says uh shadow city yes it's not installed in your project uh which you you're running chelsea yes using mpx here or other cowboys doing that here so you should probably fix that um but also so yeah also here we have to select which build to connect to so what's the difference between the first cell you started the the uh calva read the shadows lds file and saw that you had a build called app there and then you selected to start that build that will start the close uh challenge server and the watcher will be watching this app build for changes and and recompile stuff when you save stuff and now you are connecting the the closure script rebel and then pelva wants to know uh which build should it connect the rebel to because you could have started two builds and also now you have such just one build you can still connect the apple to a general node rebel or you can connect it to a general browser apple would you ever would you ever target a browser and then select node ripple here would that make any sense not for working with the app then then you will actually connect to to uh to the app build but you you could be like just wanting to to fire off some some code against the against no just to test stuff or whatever and then it makes sense to to connect to the node rebel but this is not this last time you need you have in calva to choose this you can connect to the app repo here and then if if you want to fire off some tests against node then you can switch to the node rebel while you're working okay well let's evaluate stuff okay okay let's we'll look at how to do that just now um so now we see also one thing here that we don't have a development web server setup right yeah so shadow shadow has an excellent option for that so you can configure it to start a development web server or you can use nginx or whatever of course but but it's very easy to to configure shadow to provide it for you so basically we've just we have this art folder with our javascript and everything needed for cljs to work but we don't we don't have any way to serve it no i don't have any index.html to reach either so it's uh just before we continue that i want to just go on to this what's happening here because this is the first line i assume culver is right executing this for us this mpx yeah exactly and you see there that it it starts the watcher on app that's what watch app means is this is that watching for any um any changes to any names any namespaces we add to this main.call or is it that's watching source path is probably yeah yeah so any changes that happen in source will be reflected okay and also changes to shadow cell js actually but uh right so as to the charges there's shadows configuration it actually has reload of that configuration as well oh cool okay so okay so that so what and if you look at that that command line that the calva is firing off here it says minus d and then cider and rebel and a version of that so that will inject a dependency on cyber and rebel version 0 28 5 into the project so you don't you don't need to have that dependency in the project we don't have any dependencies right now in the project but you don't have need to have the the cider and rapid dependency in the product because calva will will inject it like like this on the command line so why why would we need this dependency yeah so that's that's a very good question so cal calvin needs to be able to talk to the rebel uh uh that's running i mean to talk to your application so maybe we should actually start with with with the the the rebels so so um it's not this like my one thing here and and rebel and the rebel the clothes have a lot different totally different things very similarly named but they are not the same so the rebel is it's like a way for you to interact with your application you can modify it and you can inspect it then you can test it using the rebel stuff that you do in your videos all the time uh so that's that what you can do so when a development of a closed application starts there is like a program in in the jvm that can read closure code and it can compile it and it can run your application so this program is like of course very important both when you deploy and when you develop closure application but also this program goes nowhere when your application is running it actually stays there and your application has the potential of being partly or fully recompiled and redefined while it is running this is like the magic of lisp and closure and so what if this program could be asked to read some closure code and compile to run it while it's running and it can so that is what the repo is the repo is another program this is an optional part of of your application and it provides this means with you can send code to the repo and it will send this to this program that reads the code and uh can compile it and evaluate it and modify or inspect your application so if i was so if i were to like visualize this is it does with this i'm just gonna let's just open like a blank file so would you say that it's like um it's like ripple and then on top of the ripple there's like an n ripple yeah so then rebel is this is the next next thing then because when you have the the rebel running that then then um calva or the tooling needs a way to speak to this rebel and n repo is one way to do that and what happens then is that a is a another program that's starting in the same process as your application and its repo is running and this is the end repo server so in ripple and in apple server aren't the same and repo is the protocol and the server so that's unwrapped okay so it's a protocol for which you can speak to the rebel okay and then so basically and you can send you can send the rebel messages and of course the repulsor will reply so we'll do something one or more we've got no more messages we'll do something like this so yeah exactly all right is is this is this i'm gonna just type out something like you tell me if it's an accurate depiction uh excuse my like and then i think it's very very very accurate then you have calva yeah so culver does covers this part it sends the messages to the n ripple which sends it on to the ripple and then vs code would sit at the end so yeah yeah carlos it's in but i don't i wouldn't say with code sends anything to caliber but it's uh but it depends on what you you're trying to pick but the other one here is actually showing if yeah if you turn that uh uh so if you if you don't if i just squint here don't see the visco thing it actually shows what's happening let me just give it a little bit sure that calvi is sending stuff to the n ripple servers which sends it to the repo the rebel evaluates this and then it will send it back to then ripple server which will send it back we'll package this and send it back to calva in a message there is a there is a log in caliber uh that can that can show this maybe we we we should yeah we should do that i think we're not really ready to do it with this project yet but if you open up a new piece code window well i think i think if we should be able to evaluate in here can't we i don't think so you don't have uh uh it doesn't need to connect to a browser yeah the application needs to be running in the browser we don't have this index.html and haven't you know there is no application running so let's let's get our application running and then we can look at the the the messages being sent because it should yeah we can definitely definitely do that but anyway so if we then continue with with that what n and repl and replace this protocol and this server that sits between the editor and uh the repo um yeah it's not an apple server you see it does that on that port and it has connected to that port so if you would open a closure file now you could actually evaluate stuff to that to that closure apple the file okay yeah you can call it server okay yeah it's called server.clj yeah and then and now let's see ns main.server i guess if you load this file in java not that exactly and you don't have you don't show the output window somewhere evaluating files clj yeah so if you open that in a split view then you can actually see it like that exactly and now if you would uh evaluate uh some closer expression here oh okay sorry this is i even need to switch yeah yeah i remember this yeah this is a this is what i think i think it's a bug in this code actually yeah yeah so here you see that you have uh connection to closure rebel and now we can actually show this log between and rebel calva if you like so there's a command that says if you search for nrepo in the in the command plate there diagnosis and repo logging enable choose that command it should open an output window here and show you what's going on so now if you if you would evaluate that thing again there you can see there that is sent it sends this this oh so this is the protocol how how hand rappel is set up it sends a message which is like a dictionary and each message has an id and it has an op and eval is the most like uh common and used and imported up here and it sends also with the evaluations the code that should be evaluated and send then some pretty print printer options and stuff like that and so that's goes to the to the repo server now the repo server will take this uh op c we need to evaluate it and we'll send the code to the rebel and then it will send back a few messages one of these messages will contain the result so he has the value too exactly so that's the same id as the the one and then done done yeah so calgary will wait for for for these two messages and then show you the results that's what's going on it's similar to to the thing you tried to draw there cool okay so that's cool to visualize let's continue sorting out that server so that should try and get that development server started yeah so you can you can put a http http server i think it is that's here you're right yeah http and then i just made a video on this last night so okay i'm cheating here um you need a port and you need a port let's start at 4 000. um and then we just need a directory to serve out of so we should cancel them i guess yeah serve straight out of our directory and then inside of here we're going to need an index.html file yeah let's just create that and let's just do the vs code templating and then hello cool this is an awesome project so far see if you have something in the jack in terminal now if you show the terminal uh see you see that here the shadow actually saw that you configured the the server and it just started the server already for you it's not reloading the the configuration oh and yeah now it says okay so now there's a pretty amazing i would say actually but what's going on yeah it's pretty cool so let's follow through to here and see what we got cool yeah it's serving but now it's not it's not doing anything with yeah so we don't have we're not actually loading our javascript so if we go back to our index.html we should just be able to load our script in here all right it will serve it and exchange the source is out forward slash main.js so we don't need out here it's being served from this directory so we can just go main.js because this is the directory that's been okay try to reload this in the browser and see what happens yeah cool so it is client you see in the client right so so that is great cool we've seen this but i think we we kind of stepped over one thing which i want to get back to it was we have a core dot we have a server.clj file here that we were using we were just evaluating in here um well this has to be evaluated this has to be valid so this is working but shadow cljs is a cl is a closure script tool so how did that work yeah exactly so if you go to core the cjs now so when you when you started this uh rebel you you told shadow to start this app build and watch it but then you also told calva to connect to the app build repo so that rep a small piece is running in the browser for a closure script application uh it's still being compiled the the the closest script code is still being compiled on the jvm it's still like a closure program that's that's compiling but what the end result of that compilation is javascript code and this javascript code needs to then be sent to to the browser so if so if we so we have um we'll have cljs and that gets compiled on the jbm uh uh yeah on jvm and that gets compiled to to to javascript yeah moving into javascript javascript then let's call the handle it from here no it's it's not there really that but if if we leave cal out of the picture for now so this javascript needs to be sent to the browser and loaded by the browser in order to to modify your application right so so that if there is there is a there is a there is a program running in the browser like side by side or in your application i actually don't know how to the picture that but it's running in the browser and it's ready to take this javascript code is it this i actually don't know what i never thought about what it is but but this is has nothing to do with shadow said yes or anything it is just like our closest script program uh gets compiled and unload it in the in the browser so you still have the compilation happening on the jvm and the repel is also still running on the jvm and the result of that of the compilation is javascript code that needs to be sent to the browser and the then in the browser it can load this this code and you know and reload and redefine your application so when n rebel comes into the picture you send the code from calva to the end repeal server that's the same here but then there is something that's needed for nrapple not to send this code to the closure compiler it needs to send it to the closed script compiler instead so that there's something there that that sends this code instead to the close script compiler and then this closest clip compiler compiles this to javascript and in this case we're using shadow cell js so shadowclas will send this compiled javascript to to the browser is that so this part is shadow crds will convert compile on the jvm um this closure script compiled on jvm to javascript and culver is is culver sending this to shadow crjs calva is sending it to the end rapid server okay okay so it sends to internet and then and then something sends this to the closure script compiler which is shadow clgs in in this case it is something in shadow yes that does it but for other for other close script projects like vanilla closure script or fig wheel then there is a middleware code called piggyback that does this okay so this is something that i call if you can have chattertel yes if you like is then sending this to the closest gift compiler compiling this to javascript and then again shadows ljs the shadows lds server has a web socket open to the application that is running in the in the browser the application you are developing is opening a websocket to to the shadows lds server and through that web socket shadows ldas can send this uh javascript to redefine the application that is running and then this is evaluated in this small evaluator program that's running in the browser and then this stuff goes back so this result of the evaluation will go back to the to the shadows ljs server it will go back uh to uh this relay which will go back to the n directly to the n rebel server and then calva will get it back i think i sent you some yeah you said there's something notes around this let's look at this yeah yeah so so here you can see in in the closure case it's it's pretty simple like the editor sends the code to the mrapple server which sends it to the closer apple did evaluate it and then it travels the result travels back to them replica server and then to the editor that's pretty simple but in the close script case it's a bit more complicated so that you have code in the editor you send that to the end ripple server something piggyback or shadows released it to the closest compiler which compiles it to javascript and then the shadow cjs server will get it and that it will send it to to to this evaluator in so that's running in the javascript environment and that will evaluate this code and the result will be like a new version of the application maybe but it will also be a result from the evaluation and that one will travel back to the service ljs server and to that relay piggyback thing uh or seriously yes and then back to then rebel server and then back to the editor so it's a bit it's a longer trip here um one thing i've noticed is that shadow cljs is it seems like it's preferred over fig wheel i don't think that's correct that it's preferred over fake wheel okay i think some people prefer it always over fig wheel and some people prefer fig wheel it's a bit um philosophical maybe what what suits you uh for me ferrous ljs is certainly my choice okay we can see that on calva in a sense right it's a it's a one tool that takes care of a lot of things it's not something you pick together uh like so that's you know that's a whole philosophical school that people just do small things and they compose those things into something bigger and that's that's uh something i certainly do at some times as well but when it comes to this tooling i like that kerala is is not telling the user to to compose their development environment instead he says okay i take care of all this with you and for me to say yes that's that for my close script development it takes care of everything the mpm uh stuff and you know the whole project and everything and and so it's uh it's but think wheel is a much simpler tool okay uh in a sense but it's it doesn't mean that it's easy right the difference between here simple and easy and uh so it's uh it's not that easy to use as a challenge alias i think uh for for beginners and stuff like that so but but shall you say this is much more less a simple tool but it takes care of and holds your hand i wanna actually like you said something there about uh the npm packages let me just i can't close this um you said that shadow cljs will actually handle your npm packages for you so what is the link between shadow cljs and npm these days actually the closure script compiler can do a lot of this something called bundle or something like that inside there so i think that these days shadow is actually using that and i'm not actually sure how how it does but but there was a time at least when when the closest clip compiler didn't support this very well and then shadow said yes uh took care of like taking this mpm module and and packaging it in a way that you could use in your closed script uh application with just a very similar require statement as you would require a closure script library you can require an npm library and shadow cjs will take care of placing this code in the in the right place and making stuff callable from your application and you know everything around that is a bit like web pack in a way okay some some of what web pack does for you yeah shadows yes i guess i i think that um we could probably like with that like figure out this warning here so it's saying that crjs is not installed in the project but we are using shadow cell js yeah you're using with the mpx right so you don't actually need it to run the executable but shadows ldas actually wants it to be installed in the product we haven't we don't even have a package.json here you know in this app so we're actually showing now that you you don't need that you don't need a package.json hey certainly if you're going to use something from npm then you need a package.json okay yeah so let's let's just add one quickly so we can show how to get rid of this warning um all we need to do is uh npm emit why and now we'll just make this just give us this package.json file and then and it's install the dev dependency of shadow cljs um and then i think here okay so this won't rebuild now we'll have to restart the ripple to get rid of that warning yeah the real warning is already issued so if you if you start rapping i don't think you can restart the shadow of celia's rebel without killing it first so you should do your control c oh okay so ctrl c and then start a project repo shadow cljs connect to app and then no more it's just and here okay updating dependencies dependencies updated so that was new isn't it yeah i don't know why i didn't show that before but uh anyway it also starts this um development console for you on uh 96 33. oh so let's okay so let's go there yeah so here you can see uh the runtimes that are involved so here you can see that we have this closure runtime we still have a closure thing running on the jvm here but you also have our build here that's also another runtime uh yeah go on there you have that it also shows you the active server so this this is a closure runtime this one here that is the closure runtime so you can actually probably show that by this control enter control oh there it is so now if you if you would try to to do like something like js alert here you would see that it's not running this is not a javascript repo say yes alert hello and control enter cool there is no namespace.js here uh so but if you would do this towards the other runtime so let's go back this runtime let's go to explore run time cool and then let's uh do js alert hey control enter yeah maybe you need to go to the other tab and see oh yeah okay it's running it's executing here yeah cool so that's that's the tool cool so two rebels yeah you have here so then and here you also have an in a stream yeah and that's the tap history so you know you can use this uh angular script tooling called tap you can tap out values to uh tap listener shadow celia sets up one of those listeners for you so if you tap from the rifle then you will see see that uh in this um console here that's so this is the server right so you have yeah here you have uh the save yes so here if you would do um tap yeah with the arrow and then you can this is this needs a value you can you can type a string or you can type whatever just uh and then if i evaluate this yeah and then i go back the result will be true that will uh but here you will see uh it be i don't know why it come came two times here but uh maybe i i actually don't know why you have two way but anyway you see you see that entering up here okay so it's very good for for uh debugging cool okay so um one thing which i don't know if we covered is so we can evaluate expressions in server.clj and that i'm assuming now is because if we go back to we go back to these applications we have we have a jvm runtime and we have a browser runtime and the reason we have the jvm runtime is because that's where the n-ripple is running yeah and the rebel and i mean the closer apple and the closest compiler basically yeah everything is running basically everything except except the application and this small evaluator thing i think that's actually those things that are running in the browser and this this small evaluative thing that can speak back to to shadows ads server but they said it's ljs server and the rest is running on the jbm cool let's then integrate depth.edn as well so if we want to dip that eden project it's because with shadowcljs correct me if i'm wrong we can't install closure dependencies it's only closurescript or javascript dependencies right actually you can manage social dependencies as well i mean shadow cell yes it's called status sales yeah yes for a reason i i would just think that it's just like it's it's meant to hold your hand with your closest project uh even if it can do a lot of this closure thing as well i think i think i would rather use uh depseen for that part i think i mean it's certainly possible to use it for closure as well but i think you will uh more common structures is shadow clgs with a depth.eden so mixing these two projects together exactly so i've also noticed like one thing i've noticed is that if we just have a def eden file save this now we can start a def.edn ripple yep how come that's it yeah it's gonna start it so yeah cool that's actually excellent you should actually show how simple as a depth even config can actually be and still work i mean now you have a closure apple running and you can go into server maybe you need the source path actually for for that to work um i think i think sorry i think shadow clgs is still running um no uh it's still running but you are connected the closure rebel that you started here calva can only handle one closure session at the time in in a in a v code window we said this that calva will start the the diffuse caliber jack in keller can start the project like it does here and then it can connect its n-ripple client to the n-ripple server that is started there but for each vs code window calva can only connect to one and rebel server at the time and in this n-report server it will start one or two and repel sessions all this uh communication that we'll be looking at between then ripple and calva is going on in an end rebel session what calver does for the closest project is that they first create an unrepossession when it connects that is the it's closure reposition and then it will clone that then ripple session to a new closure replication and then it will promote as i call it this uh closure rebel to a closure script level and promote it means gluing it together as we saw with the closest compiler and this uh middleware that will have the closest view compiler do the compilation instead all that stuff so it you will get a closer script repo in one of the end reposition the calves two in a closer script project called was two and rebel sessions one for closure and one for club script when you connect it to this close program now here i think actually what you did was kill the shadows lds process and start this one instead you can see that if you go to the browser and uh try to reload the application there yeah it already sees the websocket not connected yeah very soft yeah against it so when when you're setting up a full stack project like we are trying to do now here you have like a choice and you can have the front end as its own project its own shadow celia s project and you manage all the front-end dependencies and everything in serous lds then when you start when you work with that project you work with that project in one risk window and it will start a closure apple and the closest script wrapper and work with that project but then you want to work with the back end code you will start another base code window and connect that repo to the backend code so now you have this one connected to the back end if you like and then you could in another quiz code window you could connect to the shadows lis one but to do that this code won't open two windows on the same folder so then you would actually need to use workspaces in this code to achieve that so you can open the same folder into windows if you use workspaces calva documentation has a little piece about that how you would do that if you want to work with that what i want to mostly want to do is that i want i want to use calva's two sessions for the full stack projects i want to use the closure session for my back-end code and i want to use the closure script repo for for my front-end code and in order to do that then you need to set up your project so that the back end and the front end is handled by the same closure process and as we said that we we don't want to do that all with closure we shall say yes i i would like to do that back in development using depthseen and then you would also have the frontend dependencies in depthseeden and then you start the closure rebel using the debsedent tool include the closure program then that one in turn can start shadowcell yes for you so that's one way to do it and there is also another way you can have it in one window and that is to start everything with shadow cell yes executable it's in this mpm module and it can in turn choose to start the closure program using closure instead of sorting itself it will say tell closure to start dot dot and then it will also tell closure to you handle the dependencies and the sort pass i have nothing to do with it okay if you in the in the shadow cell yes configure enter steps to at the root level yeah and now you connect to the ripple using shadows yes is that okay uh it will say here shadow sale yes i'm starting this via closure so it will actually use closure to start uh the this uh closure apple it will not sort it itself it will use closure but then now we run into that disclosure program knows nothing about the shadow cell yes dependency so you need to add the shadow save yes dependency to depthseed okay so let's do that um so we go to depth.eden and to add depths to definitely to uh definitely say dips and then we need the actual depth heller dh heller slash shadow yes okay and then and then you can take the same version as you have in the in the package.json cool so th th heller what's that shadow cljs and then we need the video yeah i think so and then two point nine point nine two nine version cool so this now we should have enough to start our project i would actually add a source pass here though okay let's close this and then yeah so this needs a pass directory and then the pause would be source is it puff stay it's not sort of okay surpasses yeah so path source exactly and then i think connected and now you don't uh you don't get that error which i just said yes because you have satisfied that dependency and we also get this warning here people get this warning because you still have source path and depth configured in in the shadows so we can actually just get rid of that if we go here and we get rid of this exactly we didn't have dependencies yeah so now we say is closure to and then we'll still need to connect our app yeah we go back and now we should be able to run closest well now without what i'll if we go back to localhost 4000 this would be running yeah it's running again yeah it's running again and if you look in the shadows lia's console you see the task these two to run times closure runtime and close to script runtime but this this time the closure runtime will have is started by this closure executable instead so that's one i'm going to do but if you if you um kill this rebel no and uh you jack in again so you see it has steps hidden because it has found that you have a depth in file here right so you can start this as a solo closure program and then it knows that you sometimes use this together with shadow fig wheel and stuff like that it actually doesn't care to look configure files here or wherever everything just present that as an option so it says we have depths eden plus shadow cell yes so what's that yeah this is when we said we use shadows lds to start the project if we would choose that one then shadow say yes we'll see that's true okay i start this with closure and closure will require or yeah the the shadows lds stuff and and start shadow save yes in its turn right i said the shadows idea is server so it's a bit of ping pong but if you would use uh depths eden plus shadow cell yes here you would tell calva start closure and then start shadow cell js from that repo so you can you can if you select that option there you see now it's not shadow cell yes on the command line here it's it's closure and it will have the cider uh dependency and it will have the cider and ripple middleware and it will also have the saturations tools and rebel middleware that's this something that sometimes is is like a piggyback for for other uh scripture for to say yes it is this middleware kawa will inject that middleware for you and then start start the stuff here you should now be able to go to the course.js file now i don't think the closure script app that we are developing is actually running yet so if you try to load this file so load in the value with kind file it should say in the caliber output where is that it's here it should say that there is no js runtime available so you need to reload the app in the browser first so let's do that there now this important piece of of uh this this javascript evaluator thing is running and now the this rebel is connected to to so we can download this file now click the output so that's the result of your revelation and you should see the tap having happened in the run in yeah so let's go we can go check that out see uh seems like this is websocket yeah you see it there cool which which one would you want to use the shadow say yes way to start this or the closure way to start this and the difference in calva is that when you start this which is how to say yes and shadow celiac in turn uses closure to start it then shadow cell js output will be in the jack in terminal that is good like if you have uh shadows abs test runner running it will have the results for the tests in the jack in terminal and then you can place that jack in terminal in a way so you can see when you change stuff that you tested running stuff like that but if you use the depths eden plus shadows yes way to start this then all this output will actually go to the to the calva output window instead and mix up with your results and stuff like that so i prefer in my case actually to use challenge ads to starting it's starting instead of depth in placer is radius but it is otherwise equivalent what we could do if we want is to to show what happens when calva is turning a closer apple into a closer script level in kelvin you say give me the jack in command for starting so instead of starting closure oh we asked for how culver would start yeah so you can say if you type copy here you have copy checking command to clickboard if you use that and then show step seed and press shadow series why not okay now you have the checking command on on your clipboard and now you have you have it here so you can you can run it and this will start let's start it yes that's the internet android server now you could connect calmer here if you would like and choose uh the same thing and uh and have things working because okay this is what yeah that's exactly what yeah yeah we can try that first so let's connect uh exactly and then and then you say depth scene and plus shadows yes and then it's choosing this in ripple port 38609 that's fine yeah and and now it's connected cool now we can evaluate and uh you can evaluate if you first reload the app in the browser you can evaluate stuff to script okay cool so this is uh how a lot of people run their projects so they don't have to to kill the rebel if they need to reload the peace code window yeah so if i ran this if you reload or something okay yeah i just was a command for it i've never done this i've never done it before developer developer reload window it's called in the command plate developer reload window this this trace you get here is a bug in caliber but it doesn't really matter it still works so i could still then go to source server clj and then i've written this line oops you need to connect the apple first here oh yeah connect so then connector running apple server it should be the same port exactly because it doesn't and then i can evaluate this all right obviously i have to evaluate the name the namespace and then cool yeah exactly uh so that's good to know that you can do that but now if you kill this rebel and and start this program again i think you should have it in the copy oh okay copy this one yeah exactly and if we start the rebel uh the closure rebels for you and then we wanna connect to this and ripple server yeah using an enriple client but we're not going to use calgar now we just uh do you have lining in installed yeah so if you split this uh terminal and you say line repel colon connect like that exactly good so now it's connecting because lining has an apple client and it's connecting to the end repel server that closure has started here oh cool so now we're actually connected to our project exactly and what you could do now is try to convert this into a closure script rebel okay this end repel session you want it to be a closure script and rebel session okay and then uh let's see here uh yeah i made a project that's called shadow with back end so we've got github slash spez so yeah repositories that one shadow will back in so in this read me i actually so people can go here and play with this as well but we can show it we did it with depth ceiling right yeah and yeah and we have connected to the red bull uh here i do it with uh with closure um but you can do it with like you did with lining instead and then starting shadow cell yes you go down here we go here let me just here exactly so if you copy that to require code and then go back here paste it in here paste it there and we can just read it what it does how we did it that's okay but when we require the shadow dev tool server and on that one we started it so that's now we have started shadow cell yes and you see that you recognize this output right that it has started this web server for you and it also starts uh n repo server but you don't need to bother with that but now if you go to to your application it will be running it won't be running uh and you see here stale output it's not running if this is old output you have here okay because you haven't started the watcher yet okay the shadow says yes watcher uh which compiles the app and starts the watchers so you go back to the repository yeah start to say this seriously yes watcher you see the next uh okay cool so it requires again uh in this time the dev tools api it then starts watch on uh on the app so this is what happened when you say shadow cjs uh watch call an app that's actually what's happening there's the one thing there's one thing about code you have to make sure that your um your build is named the same as app otherwise this is the build name right this is the build name yeah yeah we have named the build the same yeah in our case very good so let's go back and let's do this here enter now it's compiling and that yeah so if we go back to our project cool that now you get to it because now the app is is rebuilt and the watcher is running but you still don't have a connection to it from your repo right if you go back to to the prompt you see this is still a closure but now you have what's needed to connect a closure script repo because now you have the app running with this javascript thing uh there that can evaluate new new application code and talk to shadow cell yes yes so that is running now you just need to connect to it so you again go back to to to my product there with the example code you have started the watcher and you have started the app by reloading it in the web browser yeah then you can attach the closed script repo so that we'll use the shadow cli step tool api again cool and then we'll call this n repo select app on it okay if you do that the magic will happen boom so now i should be able to know is that selected what's that alert exactly hey evaluate this then on go to the app project cool that's awesome that's really cool and you need to submit here in order to get the prompt back yeah then then once it then will be there back here yeah yeah so this is something you probably won't be doing but it's good to know that calvin is doing this um and it's not doing anything else actually it's just doing uh evaluating these forms on the closure apple so it will start the shadows avias and it will start the watcher and it will then attach to the closest rebel and then the rebel will that turn into a closure script tremble for you that's awesome so that's uh and it's also very good to know that you can if you have some special in your project and want to automate something you're basing it on shadows yes maybe but then you have more tooling for for your project and that needs to be happening you can create these connect sequences yourself so if you go to calvado.io in in the web browser and you can search for connect there in the search box you will see rebel jacking and connect sequences there this is what calva does when it connects to a closure rebel whether it's a closure and closes script wrapper or not it will it will execute this sequence and it has some default sequences built in which one is called shadows lds and one is called defcedent.cell plus seriously yes the ones that we've been using yeah okay but you can also uh configure them yourself so this start code would just uh run those forms that we were running now uh exactly so this is from fake wheel right yeah so that's one and then you have another example that would uh juxt edged framework so it it's also a figure main uh based one but they have some special things in there so that's how this then it looks for them i don't know if there is a shadow cell yes one here but but anyway so it is this is the code that we evaluated on the prompt here okay cool so this is if you have like i mean i suppose the cases for this aren't i don't have someone special right like like in this edge case yeah sorry yeah i mean so then if you have if you have a uh a interpol setup that is a bit different you can do it yourself yeah exactly cool that's that's what i'm saying but we can also use this connect sequence to to answer a few of the prompts automatically also to to evaluate some code when the closest grid rebel is connected let's say that what you first say you want to do when the closer script when the closure apple is connected the closer apple is to start your server web server uh your application server do you have some code that does that then you put that into start code here this is the first thing that runs once the survey once so it will just uh run that so that will start your so then you can get rid of that from your development workflow to start your server first thing you do even if you don't have a special uh closure script thing you can still benefit from from this by adding the start code here and also to automatically select this alias and automatically uh select this so the jack-in turns into jack in choose your replica sequence and boom you're right you know that's all sense or any other thing that's cool so yeah so that means like you can come in here and i don't have to uh be running the ripples to start a project ripple if i choose shadow cljs i could just click this and i won't have to choose app and i want to choose exactly cool man well that was like uh that was really really really interesting um thanks for yeah thanks for joining me on this video uh thanks for having me i'm glad you enjoyed it i think yeah i think we must do a joyride video i'm pretty keen on that yeah yeah we should cool i should that's why i have this t-shirt on yeah my uh i need a new color shirt i got mine stained cool cheers man then you should uh grab yourself a joyride t-shirt as well when you're there yeah cheers man thanks cheers bye

Hi everyone! Please excuse the the audio glitches in this episode. The Audio does get better after the intro! We discuss a lot in this video but the main points we discuss are How Calva starts and connects to a REPL. What a REPL is,. What an nREPL is. What shadow-cljs does. What dep.edn does and how you can use them together. --------------------------------------------------- Download Calva: https://calva.io/ Support Calva: https://calva.io/merch/ Blog: https://blog.agical.se/en/posts/shadow-cljs-clojure-cljurescript-calva-nrepl-basics/ Shadow-w-backend repo: https://github.com/PEZ/shadow-w-backend Shadow-cljs: https://github.com/thheller/shadow-cljs ------------------------------------------------- 01:08 Create and explain shadow-cljs.edn 06:33 Discuss different repl options (nbb, babashka, joyride) 09:56 Calva connect to build 13:23 what is cider nrepl? 14:27 What is the difference between nREPL and REPL 22:47 Create dev server using shadow-cljs 25:05 why you can evaluate clojure with shadow-cljs 30:39 How Clojure REPL communication works 30:56 How ClojureScript REPL communication works 31:47 Figwheel and Shadow-cljs difference 33:26 Shadow-cljs with NPM 36:37 Shadow-cljs development console 38:05 Inspect stream shadow-cljs development console 40:12 Integrating deps.edn 41:38 REPL Sessions with Calva 49:41 deps.edn + shadow-cljs in Calva (What is that?) 52:18 Difference in starting with deps.edn and starting with shadow-cljs 53:29 How Calva connects a repl 57:26 How to manually convert Clojure REPL to ClojureScript REPL