Developing ClojureScript With Figwheel

0 0

I wrote this library called fig wheel and it's been mentioned a couple times and I and I'd just built the pressure up I've never talked in front of a group of people before at a conference and so the more times the fig will gets mentioned if this pressure starts building I'm like oh great but uh now I have some expectations to fill so fig wheel is basically a live coding foreclosure script so if you're working on single page applications and you want to do it more rapidly and you don't want to go through the difficulty that I'm going to explain in a moment that's what fig was for it also works on node but I'm gonna I'm going to concentrate on applications in the browser because that's where it's most understood I was Believe It or Not really dissatisfied with a the feedback loop you get when you're working on a front-end application and the browser so and this is the current state right we we write code we reload the browser we lose our application state and this is the key one right here we lose the application state and then to verify we manipulate the code back it we manipulate the application we fill out a few form fields you know and do other things maybe tab through a couple forms to get the application back into the state so that we can test or verify the behavior that we just modified and then we do it over and we do it over and we do it over again and it now what's not on the slide is just how painful that is it's you do the same like once you fill out the same form like three times your mind turns off our mind does maybe some people really like that but my mind just kind of starts going black and I get out of flow right this this is a very Cecotto experience then it just breaks your creativity or mine you may have a different experience some people may like this it seems like they do because a lot of people are doing it alright so that led me to this very simple question what experience do I want and the answer came very quickly I want to change my code and then see what changed in the application I don't want to you know fill out another form filled with my first name and my last name in some fake town name that I thought of just now I so I came to this experiment I said well what if I just do that what have I just take a file that's been compiled and reloaded back into my application live in you know I had some strange feelings about this that was maybe this is a bad idea maybe I shouldn't do this and not nobody else seems to be really doing it you know I was worried about the high potential for instability you know I'm just cramming JavaScript back into the browser every single time I I compiled a file and I was worried about the burden of paying attention to the load time side-effects of a file right now I not only have to think about my code but I have to think about what it's doing as it's getting loaded now what happened was is soon I I made its little experiment I created a file that reloaded itself and I found the the feedback like amazing I found the fact that I could like change a file and then see the changes it was it was an aha moment I would it is funny the experience of it is different than hearing about it or watching people doing when you finally experience it you're like what the heck you know I mean this is this is the return on investment for doing this for thinking about the load time side-effects is very very high because you're iterating so much faster and you're actually enjoying yourself because you're staying in this state of flow so ultimately I became an advocate you know this people need to experience this at least and on the extreme side everybody needs to do this all the time this is the best thing in the world you got to try it you really do I mean you really do so but there's a trade-off and the trade-off is in order to get instantaneous feedback you have to write reloadable code and so the question becomes oh I have a special definition for reloadable code in this case in order to get the experience you want you want to write code so that when it's changed and reloaded you see the behavior change in your application so that's a little different right you could have functions in a closure somewhere that if you redefine them they didn't get changed so and I have this other requirement that the apparent state of the application is unchanged again so these are qualities that you can you can cultivate in your code and it's really not that hard now can you guys hear me okay okay so then the question becomes how hard is it to write reloadable code well closure has this culture of reload ability and so because we isolate state transitions and because we mostly deal with pure functions and we're really careful about these things anyway you know closure script idioms are highly reloadable but on the other hand javascript api is the dom you know adding an event listener you really only want to add that once you know and you don't want have to think about removing it into data so the DOM is stateful to the max it's really hard to work within a reloadable way so it requires strategy but then something really really good happened react.js came along and lets you to find basically to find the dom as a function of the state and so I'm going to ignore that I already I think it's awesome does anybody else think react is awesome I mean it's awesome right and it's inherently reloadable which again eliminates a big problem with writing reloadable code on the clients side so this is a threshold this defines a threshold that we kind of move past we're writing reloadable code became really easy almost inherent and what you're doing ah yeah which means that you can get instantaneous feedback if you just reload the code all right up the slide is broken well you know it's it's code I wrote you know this slideshow is a react application and you know I'm going to change it I happen to know where the bug is I put this extra can you guys see this okay all right this is extra G after JPEG I'm going to save it now fig wheel isn't running right now so I'm gonna do the thing right I'm going to reload the slideshow and then okay we'll get there soon which slide was that you got okay it's down here somewhere and this is our experience right I changed it I fix the code I recompiled it I got the application back in the state and it still doesn't work that's because I need an S on this directory here it's okay though you know I changed it I'm gonna reload the browser all right everything's under control I mean this is how we do you know everyday I'm used to it you're used to it you know we can do this we can we can reload the browser I mean I forget what I was doing oh yeah that's what I was doing I was showing you uh my house I live in this plastic bubble here no I really I do you know it's a literal it's a literal bubble and and you may have known there's something about the shape that's near and dear to my heart okay so I don't know which came first here actually you know what could have been subconscious I don't know but uh and also there's this paint job I'm thinking about getting alright so I put this transparent image on here and I wanted to position it over my my don't I thought I had it in the right position but I don't so that's a bug I have to fix it are you guys ready to walk through all the slides again no okay so maybe I'll do something about that I will turn the gweal on because I spent a long time working on it for people how many people use fig wheel alright that's good that's great uh how many people use closure script alright that's awesome so four people use big wheel I have this feature autoload false so if you want to just do repla development you can just turn the autoloading off for a period of time and because it's on the client it's really quick to turn it on and off so but I have to reload it anyway to get a to get this code because big wheel wasn't on alright so here's where we were Figg wheel all right so we have to position let's see so that moved did you see that so the Dom change the actual Dom on the page just changed now granted it's not like a flappy bird flying around but it's this is kind of an amazing thing it's a completely different experience than say walking through your slides over and over and over again and this is how I wrote my slideshow I had the I the power is that centered you guys anyway does that look good or should I go with this paint job burn I mean all right so this is a completely different experience and again it's experiential until you actually do it you might think yeah I can live with it you know am i reloading it doesn't take that much time but you should try it at least once and you could write your own tools I mean this stuff is not you know it's not that hard uh well there's like 360 commits on the repository but all right so next I have something much more exciting than say a slideshow and that's a game and the game is called crash verse so this is running a fig wheel as well and so I had this idea on the plane about a game where a rocket with bad AI is moving across the universe avoiding obstacles like like that wait I have to turn on resetting the plants so the top level you know when you're using fig wheel you know the file is getting reloaded so if you want to reset the planets and bring them into your atom every single time that you reload the file just uncommon or reset the planets and so now you have the bread thing that the ship is trying to avoid but they're more of them this is a great thing no and then toby Crawley said you know you really need to have a son so he added that himself it was really cool and then you have explosions as well wait he just went right into that okay now you can change the properties so this is live coding right you are just working right in experiencing and you're like you know the sun's kind of big that red planet it should probably be bigger and that's really I mean let's watch that again he gets blown up twice really because the collision that he comes back anyway so it doesn't matter so this gives me a chance to interact and have a conversation with the game as I built it and so let's look at some of the things you can do when you're using think wheel let's look at some of its features what is going on here all right so I'm open up the dev console so you can see the output here all right so like I said you can modify you can use the top level right as kind of a ripple all right so I just printed out my application state and I can look at it all right that's really convenient you can also say you're working on a function and you want to see the output I'm just going to print this function the output of the function and then I can I can change it a little I can say well does that look right no no no that doesn't look right does that look right and so again you're getting instantaneous feedback and because you're in the buffer that you're saving anyway it just feels natural all right you can say remove the planets you set the plants wait there's some contention there isn't there huh all right so again the top level can be used to inspect your application but not just the top level right you've got these you've got these functions being called while this game is being played and you're like I'm not sure if this P data here is wait is it control I'm not sure this P data here is is actually a planet coming in so I just look at it so this is print line debugging and that's a compile error wait that's another feature all right so this is print line debugging and I got you know I got a nice sampling of data here and I can just verify these are planets you know they have a position a speed a color and a width great so again you can reach into functions and because your programs running normally your functions on the execution path and you can actually get quick sampling of what's going on you may have noticed this hey they come up every single time that's because I made this really simple macro now this is something that think wheel does that it's inferior competitors don't I think wheel will I don't know I could be I could be wrong somebody can correct me fig will reload your macros and then recompiles all the dependent files instantly and so there's a bug in this macro I'm trying to I'm trying to log the word hey and of course it's treating it as a sequence instead of a string and so there's this bug here I save the macro and instantaneously I see that it's fixed it's printing out the complete word hey I mean come on hey you know now it's that's I mean what's happening there is kind of amazing you know your your enclosure land and everything kind of propagates instantly and you see the result so again I'm I'm advocating that fig wheel is pretty cool so there's a heads-up display right there's a heads-up this way you see that the the green circle keep popping up whenever code is loaded in the heads-up display also tells you when you have a compile error and let's say if you're you're really wondering where that error is you can just click on it and it goes to the line in the file where you made that error and I made another somebody actually submitted a commit for this actually recently for that particular exception does not have a line number but somebody recently was very helpful and out of that this also is true for warnings now this heads-up display took took me a long time to write because it's completely non intrusive it doesn't use any external libraries it's just a div at the bottom of body and it it does everything internally with Ja is no extra code pulled in from the outside to do this it's just pretty much straight JavaScript doing this now another feature is you know you're in this live programming environment so if you create code that's generating warnings you actually don't want that code to load right because you want to keep your environment stable and so right down here there's whenever you generate a warning or if there's something to auto saved or something like that it does not get loaded into your project until you get rid of the warning all right so another thing that big wheel does is reload CSS which is kind of a minor feature but actually turns out to be pretty helpful so I just changed the CSS it was instantly loaded but this gives some insight into a little insight into this game here I didn't really want to think about how to Center the explosion and so the rocket really is the size of the explosion and this is and this game is all div it's all in the Dom it's all divs it's it's in ohm its react and it runs really it runs really quickly it's great it's a great you can actually build quick demos now in react just to see how things work and it's pretty great alright and then we'll go back now we're going to talk about broadcast I actually have this so one of the things right when you're developing you have how many devices and how many platforms you're needing the target and it's helpful to see the same program running in two different environments at the same time one of the things that fig wheel does is broadcast so I changed the code and it broadcasts the changes to all connected clients and so you can see if there's a difference in Safari and Chrome or if there's a difference on your phone and what you're doing on your desktop or the tablet so that yeah that is I'm going to keep doing that so uh and I can add the planets back and so that does anybody like that feature right okay I'm going to keep asking for that I needed I needed I really do uh now besides broadcast there's this other thing that people asked for that I really didn't want to do and they wanted multiple builds they they like we have an admin build and we have a dev build you know these are both closure script builds and we'd like to work on them live at the same time in the same you know line process and so I don't know why I did it but I did it and so here we have tests running in one tab so right now there's two Live builds going on so I have tests running in one tab I've got the application running in the other right and the difference between builds is that the test build is just getting the test code as well as the core code so now if I reload both environments are getting this new information they're have one of the tests happens to be on center that and so if I change center now notice the fav icon there's a fav icon that's green that means the tests are passing and this is just seal J s test and did you see a go red all right all right and that's just because the code is shipping the code is shipping both places and you know the test Runner is just getting the tests are just getting run every single time it gets new code and so I'm not like creating a phantom Jas thing I'm not doing anything I just have another tab open and the tests we're running in it and we can fix it too right we can fix the test and the code shifts both places now there's a delay because the tab isn't focused right but you can focus the tab and you can see you can see your failures I'm pointing at my screen but I'm assuming you can see your failures they're right here right I get yeah I can see it oh yeah okay great sorry and so that's now another thing though like if I change let's say I change the test so have I changed the test code is not going to ship here right so you saw no greet you saw no green circle and you saw this turn red and code did ship here so that you know multiplexing builds where the bright bill against the right code has turned out to be kind of helpful so that is something else that fig wheel does alright so multiple bills did oh and so then I was working along and now I really I have to say thank you to the early closure script repple for not working at all I mean we've almost been better if it wasn't there because you spend hours right he'd spent hours and and and then it wouldn't work so it was a big motivator for me to create fig wheel which I'm really glad I did like if the rapper worked I might not have done it and I wouldn't have had broadcast and I wouldn't had multiple bills and I would have had this on save reload workflow that I really have become accustomed to so thank you early JavaScript no close your script repple but now the rebels started changing and becoming good which is good and and I found myself in this position I have a closure script compiler running with all the compiler information and I have a connection to the browser that shipping code up to it I think I need to include a ruffle as well you know so I there's a ripple that comes with fig wheel and it's different than other ripples is this the right one no good this is the right one okay and it's different from other ripples in that it shares States and shares state with your application so it knows what's going on yeah in your application man next time I'm getting somebody typed for me crash bursts crash burst core alright so I'm changing namespaces and I can just look at my half state oh thank you you guys crash verse there we go so I can just look at my off state now if you guys have used other rebels and connected them like say in your application a warning would get thrown and say whatsapp state I have no idea what a state is this is sharing this compiler information it's sharing the compiler information with your auto build process with your repple so it knows what's where so things like doc and all these things work pretty well and let's see I mean you're having this direct conversation right right now your your in your application what was it remove and then it's ba-bang and they're gone and this actually is ripple what now one thing about this ripple is then it's a broadcast ripple which is a unique which is a unique thing it means you type your command and anybody who's listening gets it it's worth it right it's worth it you only get one response back and that is the fastest response so not perfect but helpful in what else is going on so this repple multiplex is as well Wow I mean let me put this a different way so you can only have a ripple into one build though like because the repple is built around a build configuration so you have the dev ripple and in this case I have a test so I have a test build and a dev build but I can only have a raffle into one of them so when I when I hit print you're not going to see it here right it doesn't it doesn't go to this connection but this cool thing that I did I can quit and then choose a different rebel and now I have a rebel to the test build and I can print to for instance and it only goes there and it doesn't go here I have no idea what that is but and I think there's something else about the rebel that I'm that I'm forgetting but I'm going to quit back out of this one go back to the dev oh yeah you see all these big wheel controls at the the lately there's before we used to have a closure repple and then the clgs rebel would boot on top of it and it'd be kind of a second-class citizen this takes a different view and it just boots a closure script rebel directly into your application and then just gives you a few select operations that poke through the closure script repple into the closure process so you can control your builds so let's say you want to like here's a function you can do you can say switch you can actually see the current status of your system so I can see that the auto builder is actually running I'm focusing on these these two builds are building and I have one connection freeze each of these builds I can also do something like ax but I feel like something's funky I can just I can force a build I can just switch to one of the builds and now it's only Otto building on the test build and shove in sending code to the test build so again that's another feature of fig wheel ah how's this look yeah okay all right applause really fixes everything you know even a dry throat so I've just run through all these features anybody have any questions about anything I just showed you okay shoot him in the back yeah yeah crash verse is is on my github account so you can totally and it's it's naive you know it was like a 15 minute yeah thing it's super now I mean yeah yes oh the gentleman the back sorry I didn't see you what like a debian test no yeah you could but that would be a separate line again process you sooner saying yeah oh yes Leslie yeah so n ripple and ripple would be a solution for that but yeah we're not going to talk about that right now so unless somebody really wants to now there's somebody else had a question yes so that's the same as the N rebels story so in closure works really well for this is that make so it's its closure mode but for inferior list mode and so the N ruffle story is coming online like in the next month or so because all these changes are coalescing so it will the cider story will be actually and it works with perfect like it works in cursive wears yeah right yeah it works in Kherson yeah the end repple for fig wheel works in cursive and if you have it and if you're really if you know what's going on you can get a working insider and everything but yeah yes website web sockets just that's actually how I do it with sound effects all right yes yes that's correct that is correct that's why it looked really painful yeah any yes yeah yes I can the most important thing is this right here but besides that they're a bunch of libraries where you can just add them on the phone like you don't want to reboot line right it takes a while and you're like oh I meant to pull in moment or I meant to pull in this library but I'm going to and I really want I'm in the flow I want to use it now so you could just add a dependency and if it passes all the requirements which sometimes are esoteric you know it gets put in and if it doesn't it doesn't but like ohm there are a lot of libraries that do they just come right in and then there's some that have more difficult dependency situation and they don't come in but this just uses pomegranate underneath and tries it's best to load the library yes John okay that's a good yeah it's a good question all all I think we'll does in that case is it just shells out to configure you know to a shell script of your choosing so if your editor is sophisticated enough to listen to a shell script that has remoting capability then it can just it could just pop the line number Colin oh okay okay oh yeah maybe you're wrong curse of everyone that's pretty it's pretty awesome isn't it come on alright any other yes sir so uh wait I can't unfortunately I can't hear you that well so fig will provide yet there's an onload hook but at the component level yeah no but there's an onload hook that you get with fig wheel where you do your bookkeeping and stuff like that now one of the things that like one of the things about ohm or react render is it rear Enders the whole tree right I don't know this helps your problem but so you can have react render at the top level just rear entering your whole tree every single time you make a change and the state's maintained and even in the Dom so does that speak to your problem or not okay yes sir wait I mean am i hearing your question correctly now you want you closure to be as good as closure script No sorry I just had to take that what that's a that's a really like so you're saying you'd like a tool like this for closure yeah yeah I mean the ruffles the closure ripple is pretty powerful and you could probably put a hook in your editor that on save it you know it shoves the file through through the pipe but yeah it's the same thing like you could write something like this for closure but the onus is on you to write reloadable code and then have a hook that just reloads it when you save your file does that make sense you want me to do it is what you're saying okay okay okay yeah the question is why not that's probably not for me to answer but I'm going to take it as a compliment though all right okay that's just the way I am all right anybody else yes sir it does work with node I know that some people are using it with node it is different you know nodes a different environment because you don't have visual feedback right and so when I was working with node and giving it a try I was always printing things out you know to the terminal to kind of see what was going on so it's a it's a different value proposition but it can still be done and I don't have a lot of experience with it but the set up is is the same the set up is basically the same does that answer your question okay yes sir oh how are you already there wait did you have a closer script question all right yeah yeah yeah yeah so I'm really tempted to talk about that but I want to like preface it with like I've never used it I've only read blog posts about it curse early right I just skimmed them right and so I'm now I'm going to answer with authority so hot module there's a I would say there's a problem in the JavaScript landscape in that they've chosen closures for modules and so reloading them is it's much more difficult much much more difficult than the object literals that are in the Google closure system Google closure system you have a global basically a global object literal that has all your namespaces that you just redefine on onload so what they're having to do right is they're having to rear acquire these libraries and then walk and then walk up that so my convenient phrase for is its its point of require reloading that you kind of have to manage it so everywhere this file is required there's potentially you're going to have to manage its its reloading somehow specifically so that and that can grow arbitrarily large right and so whereas with fig wheel its point of definition so you're reloading the code at where it was defined and it's just getting is getting pushed in now I again like I said that with authority but you know I have none yes yeah okay so you've been using it you have okay wait is it better though okay all right um home living compose and cons do people want to hear okay uh boy I just remembered this is on video huh uh it's it's really great I've been experimenting with domes for a long time and uh I my friend said you know I really want my friend said I really wanted to build a dome in my backyard and he taught me was I didn't believe him anybody said it for like six years and so finally I was like okay and then I came across a design that I came up with that I really liked and so I did it and it's small it's 18 it's uh it's 18 foot diameter and it's a bet it's a glorified bedroom all right there's no there's no kitchen there's no bathroom that's in in the house and it's really I don't know it's fun to build your own structure and live in it and then actually enjoy it you know so I really like it you know some you know some people I was going to say some people don't like it but that's not true okay might not be for some people having to go to the house to to use the kitchen and whatnot but in its I mean that the mountains in the southeast and that the climate is pretty nice most of the year most of the year it's pretty nice and it's what you put it people always ask me does it get cold is it too hot it's really Pleasant it's really Pleasant all around any other questions alright so I just want to conclude with I really enjoyed myself here at a closure West's life you can find fig wheel I think pretty easily now it's a my repository does everybody feel comfortable they can they can find it at this point I think you can type it in in it like it's the only thing with that name so and if you want to play with crash first it's in my repository as well it should be at the top because I was messing with it and thank you everybody this is really fun