ClojureScript: React with a Hiccup by David Vujic

perfect okay should i begin fine okay welcome to this session about closure script and more specific like how to develop react components using a style or a syntax called hiccup my name is david and i have coded closure and closure script for about one year i joined a team that develops web apps and services using using this platform thanks and before that i have coded a lot of javascript node.js python and also i've been very much in the c-sharp and dot-net worlds coding like asp.net and episerver and things like that but i've coded the closure and closed circuit for a year and what i want to do to tonight is to share what i have learned basically during this my first year as a closure software developer yeah and i want to begin with just a quick uh not an intro but i want to highlight some of the some some things about the closure language itself and things that we use a lot when we uh when we write closure script apps and one thing is that we use vectors and a vector is it's an array and in closure it's called vector and each item is separated we don't use commas and things like that we're separated with uh with space another another thing that we use frequently is maps so it's something that you store keys and values so it's sort of similar to what you have in javascript like object literals or even json or dictionaries in python we also have something called keywords with keywords which we that we use a lot in enclosure enclosure scripts and key and keywords are used for instance if you have if you look at the map uh you see that i have used something called a keyword for for for the key position of it so we can use strings but keywords has some additional functionality that we that is really nice to use in enclosure and of course we have functions and since closure is a part of the lisp family so basically what we do is we write lists we wrap everything in parentheses okay so vectors keywords and maps this is something that we use uh when we if you want to develop a web app using closure entirely so what we what you can do is to write the html markup using closure data structures and what you see here is uh is basically will be rendered as a html div tag so an an element is written using the closure vector and the element type is is defined by using a keyword and this it's this type style of writing html markup that is called hiccup or syntax so here's another example here's a link or an anchor tag and what i've used here is you know links they often need on url or additional attributes and attributes are defined using closure maps so we have a keyword defining what what the attribute name is and the value is the the value of the attribute so i can have one or more attributes appended to my to my element so if if i would like to put this link within a div tag so this is how i could do i sort of nest the vectors or nesting nest the arrays and if i would write the same code in like in react js xor or plain html it i would probably do something like this so this is the equivalent of uh of how how you would do it in in a pure html okay if i put this div tag within a function well then i have actually created a react component or a component so placing html sorry hiccup markup in a in a function will will uh will create a react component and in this example i have an input parameter that's if that kind of so you can you reuse the url great so so closure script is really what we do when we write the web apps in closure script is we use the closure language and we have something that compiles it to to javascript and then you can run it in a browser so essentially close your script is a compiler so you write your things in closure compile it and it's uh the output is javascript so and you don't actually press or some compile or build button the compilation occurs all the time when you as you as you type but closure script only cares about javascript so we if we want to build something based on react we need some help we need to help the the compiler a bit so i'm going to add a library called reagent and reagent is a is a tool or a library that kind of wraps react so it makes it possible to write your react components using closure and it will be compiled to javascript that that can run in a browser okay so this is the part i'm a bit extra nervous about because i'm going to try to live code some some parts okay so i have my hello world example site running here let me double check that it's so it seems to work so what do we have here i have prepared with some some example code and what we see here to to the right at this side you see my editor and over here you have a web browser okay and what what you see here is uh some code or some functions that actually are react components so if we if i go from from the top here i have something called theme toggle field i'll come back to the what it actually does in a moment but it returns uh an input field or more like it returns a check box so and it has some css classes to it and things like that and i have another component that renders auto returns a html label and it sort of is connected to to this checkbox box because it's uh using the same ide okay over here i have some sort of a container component like kind of wrapping or adding sub components to it so i'm adding the this theme toggle field i have a div tag and i'm adding this other component over here these two functions are a little bit different because this one is actually a sort of a helper function i'll come back to this uh just in a moment over here uh it's sort of is the entry point for my for my web page this is where everything starts so i'm using this reagent library and i'm telling it to render something i'm telling you to render my container component so if i could actually ask it to render just a div and the output will will be different like this and the second argument here is that i want to tell a reagent where to actually put my components so if we have a if we have a look at this function called main element so this is where i'm starting to use some sort of javascript intro because i i work in a closure environment by have but i have full access to to the javascript apis to access browser things so what i'm doing here is i'm using the doc the global document object and calling this get element by id function with with an id so and what i can do i can't i can actually try to run it in my editor it's it looks that like it actually returns something so if i would like by accident to misspell the id then i would get something wrong with it let's do something like this and i can also inspect what what what kind of element is this so i can actually continue to try to extract the i uh sorry wrong key combination extract the id of that element so it seems that i have the right element what about the tag name oh it's called main something so by doing this i can try to experiment to to understand what what is returned from this function and to so where is this element named id well i have added in my web sim in my example site an html template this one will be used in combination with my closure code so and if we have a look at it i have added some fancy fonts and some a couple of css files so i can use like css and whatever i i'm used to uh i don't have to like you re-learn how to use css and things like that so i can use what i already know and here is this root element where i want to put all my react components and it as we evaluate it it was a element called main and i have to script tags too and this this row row 13 is actually the code that is compiled my closure code that is compiled to javascript and on this row this is actually where i kind of trigger my main function in my closure app if i go back to this app cljs so what makes this possible is that i have this funny looking character here it's some sort of metadata to to my function and i'm telling cl the closure script compiler to treat this function as an entry point because when we uh package this and send it to to a production or to to to uh to the internet uh all javascript will be like packed and minified and all the function names will have the very shortened names except for this this one because this will always be called the main because i've asked the compiler to to keep it like that okay so let's go back to this page component so i have added the div tag and and put some a component within it and you see that here i've added an attribute and since i only have one attribute and i think it's a little bit verbose to do to have this style i can shorten this a bit and skip this uh this map so this is also a way i can write my elements and attaching a div div tag to it i think i'm can can do the same thing with this input sorry this checkbox i can append the class name directly here something like this and then then i can get rid of of this row here oh sorry let's do like something like that so this is the same idea but personally i think this is a little bit more readable so i'm going to use the same idea for the label on the this in my other component something like this and i think that by doing that my kind of component will will become a one one liner instead and i like those things so this is the sort of the same but a little bit shorter okay uh this is fine and all but you know my my page is blank i would like to have some some sort of something to read or some text or something so what i'm what i want to do is i want to add a component that kind of outputs some some sort of greeting text or something so i'm going to start by creating a function which that will become my component and that one i think i'm going to use like a header something like this oh i have done something terribly wrong there good uh so but my nobody is using my my component here so i'm going to put it just uh just after that toggle label like this nice so i have my web page says that tells everyone good evening and uh but it's still kind of boring so you perhaps you have noticed uh this uh little funny little looking little icon icon here i think it's a sun so i'm going to try to like press that one so it looks like it's some sort of uh like a desk sorry desktop or theme switcher so i want to kind of do something cool with that so the way this works is it's because of these two components the input checkbox and the label in combination with with my css files how didn't i open it i'm going to just this is the one so i actually found this on the internet on this blog so thank you alexander for for this i was looking for a way to um to uh make a switch like dark theme light things theme switch that is pure css without any code javascript and things like like that so i found this one okay but this is kind of disconnected to uh i i have no control i don't know where which theme is selected so i'm going to try to keep track on what i have selected which theme is currently the active one and i'm going to do that by introducing another library that is very commonly used together with reagent and that is a library called reframe and reframe helps you keep track of state basically because reagent is about rendering like html and creating components that you can reuse and so far my components are they don't care about any state or anything like that so refram reframe will uh is sort of will create an like an in-memory database for you so it's like a data that is centralized that code can can interact with and the way reframe works is that you send events to it you want something to change and you can also subscribe to changes in in a database so i'm going to include another codes a little a code that i have prepared with too hello dot events we can have a look at that one too so this is how you can define an event using this library called reframe and what i was looking for is this event with this name toggle theme so what happens when you kind of trigger the event it will store the active uh theme and it actually will have it basically what is behind the scenes it's it's just a check box so we will see which if the check box is checked or unchecked so that that way we can decide if it's a light theme or dark dark thing so let's go back to to the app here and i'm thinking about adding some functionality to to our checkbox something like this on change and what i want to do is to trigger a function i will name it toggle change toggle theme sorry so let's add it over here so and this function will will be will get the html an html event so it's an object called called event and what i want to do with that one is to extract the um uh sorry gotta oh yeah now remember i have to i want to trigger my reframe event which is called dispatching in reframe and i want to trigger that toggle toggle theme and i want to pass in if the checkbox is checked or if it's unchecked and i'm going to navigate through my to event object so uh and in javascript you you browse the you navigate to the target which is the actual object sorry element and if it's checked or not something like this let's try it out so every time i click this an event is triggered but i haven't i have no idea if it works or if not doesn't work so how can i find this out i have made some preparations over here will uncomment some code here so what i can do is i can actually browse the the state of my current database from my editor so it looks like like the active theme is dark so if i kind of switch it to light theme and run this function again the active theme is light if i switch back it's dark so something seems to happen when i when i press that icon over here good so this is fine uh i have something that keeps track of the the current theme that is active now i would like something to happen when when something else to happen besides the switching theme i would like to change this greeting to something something else and this can be done by listening to or subscribing to changes of that reframe database so i'm going to include another li sorry not a library but another namespace that i have written let's have a look at this one too there it is and this is how you can define subscriptions in reframe so what i'm looking for is this one so i have a subscription named light theme question mark and in closure uh question marks is is a convention for for booleans so this will return true or false and what this does behind the scenes it it kind of looks in my state database and looks for a path in that in that database in this case it's theme and active and the value of that node so i want to add i want to use this light theme subscription so i'm going to go back to my app here and what i'm thinking about is doing something like this so if it is light theme i want to write something different than good evening so perhaps good morning otherwise i want to print out good evening and since i've changed my interface to my function here i have to go to the this greeting where you where i kind of use this function so what i want to do here is to subscribe to to this uh to this i want to subscribe to this light theme subscription let's try it out whoa it works so what happens here is that i'm passing this result of this subscription to my greeting function and the greeting function does an if and else and displays different things based on that and if you remember i went down to my secret code over here to like print out there is the state of the database but i can also evaluate the state of my my current subscription so the light theme returned false which seems to be correct so if i change the theme to to be light theme it's true so i can very quickly evaluate oops i did something wrong here right how my database looks and what will be the output of these subscriptions so what what i'm what's kind of uh i don't really like is this uh weird syntax the add sign and things like that so i'm thinking about i can make this a bit shorter so i have added a a shorthand for it which is very common if you use uh uh reframe so instead of have the having this add sign i will kind of try to shorten this out a bit so let's give it a try so seems to work fine nice okay so what is going on here really what what happens you see you've seen you've seen me like change some text and the page reloads and evaluating code and things like that so what happens here if i if i go back to like changing some text or something in in my page like that i'm going to add a a dot and hit save do you see that did you see the little icon at the bottom there so that's my web server kind of refreshing the page so this is hot reloading so it's quite common in in in javascript and other languages too so we have that and what happens when when i kind of press the buttons here i can actually go here and i'm going to add a comment section which is a way to have a safe environment for experimenting with live code so what i can do i can actually force executing this uh my events too so i've told my database that it's uh live theme so my text changed to good morning now i have returned back so what happens here is that when i change my database so it's not my code that is reloading but in this case it's react that notices that my component has changed so the parameters to that one has changed so it will re-render this specific components at least like you know the virtual dom and things like that so that is in the react world i'm just triggering triggering an event and changing something that has to do with that component and finally the thing i've done you you saw me kind of evaluating the dom and things like that or value even evaluating the uh events or having a look at the uh database like this i'm having this secret key combination so this is my editor that is uh online with the with my web page basically or with a browser so i have a repl that kind of runs and it's connected to to what happens in the browser so it's a communi communication between the browser and the repo which is a server actually that kind of does this magic and what i can do i can also if i open the inspectory in my browser i can do things like this and run this so i don't know if you see it but it kind of printed out hello world so i'm i'm like connected to my browser so it's back and forth i can browse the the data the the the in-memory data i can trigger events and i can like manipulate the in the dom if i would like you to do that and i think this combination of like hot reloading uh like virtual dom from from the react world and this this interactive ripple i would call this interactive web development interactive web development and i think it's very powerful because you have you have sort of control and flow over during your development okay and i think this is what i have thank you for listening thank you i will sneak by you here thank you very much david thank you very interesting and very brave that you did live coding yes we had one we had two guys before actually live coding one was a haskell guy and the second boy was a closure guy yeah actually live coding james yes james he had this live coding and he also seemed pretty confident to do it yeah thank you very much have you done any functional programming prior to closure uh i know i don't know if it counts but i've caught a lot of javascript and try try to code it functional and even when i was mainly coding c sharp of kind of had a functional mindset even though it's uh very much object orientation there in c sharp so okay so but this is my the first language that is like pure uh functional and immutable and cool things like that was it easy or hard to learn it was uh for me it was uh very difficult uh it was like um i have a blog post that called the 12 stages of learning closure i can post it later that kind of explains my journey journey during during this year so it has it was difficult the syntax to actually understand but when the every pieces come together it you actually find out the power of the kind of the powerful language that you actually use so it has been a a journey but but also very fun fun to learn yeah thanks again thanks big applause

Channel: Func Prog Sweden

Views: 2,142

Rating: 5 out of 5

Keywords: func prog sweden, functional, programming, clojure, react, javascript

Id: SVouy-Zd-_g

Length: 33min 57sec (2037 seconds)

Published: Thu Feb 25 2021