so i think i might need this is this the white board thing oh here i forgot that the uh audio is on how's it going everybody give us just a moment we're having technical technical difficulties and hey andrew oh i've missed doing this i don't want to sign into microsoft whiteboard i just want to use it well you need to figure yourself out the audience is waiting no microsoft if you respected my privacy you wouldn't require me to log in let's go all right we'll give that a shot and see how that does see if you had an inch andrew's just coming off of live code happy hour oh shoot i should have booze at this welcome welcome welcome andrews and everyone else out there we are uh we're we're back we're back we're fumbling this it's okay sorry it's all right we look good doing it absolutely which it's a good thing that we don't have a camera so they can confirm that which you're getting ready to look at changing that so they can see your pretty face when we do this maybe i'm gonna wear a mask like the the big bird long rose plague doctor mask oh jeez yes that's what i'm gonna do don't do that why i'll peck you with it all right so the the vote tally came in um for those unaware we uh did a took a poll on linkedin for what to do next and the votes were pretty much overwhelming uh 50 paige says camera camera we we're working on it especially for the parts where we end up just drying our mouths running our mouths yeah um but wear a bane mask like the us athletes yes change it up and do like cosplay masks and be a different person every time we do this i think i'm going to leave that one to you so uh yeah so the poll came back and over half the votes or close to half the vote somewhere in there went to docker and node.js with servicenow now i think i'm going to try and work in uh the devtools for the folks that voted for devtools because i think i can mix and match both of those and get away with it um but this one's going to be a little different from usual because a lot of it's going to be off platform wait no no this is for on service now what do you mean off platform yes platform adjacent heresy well at least it's not uh you know salesforce oh yeah that's true so for those of you who are not aware you you want to explain that one or do we not explain that one i don't think we have to explain that one that one's pretty self-explanatory okay fine so um so while i would love to just like dive in head first uh there are a lot of people that may not even really be aware of docker i know that you've like heard me mention it sarah i've heard you like talking about it with other people that know these things and i'm like whatever i i make widgets and websites that people enjoy using i don't need all this outside abstract cody cody nonsense so you might you might think a little bit differently i will go through this attempt to change my mind but you know if it doesn't have a ui like code it css and get back to me dude well all right well let's let's start with that yeah wait see what we can do speaking of are we like not going to talk about like the new hotness oh are we not talking about that i just had that up there for a place filler it was nice to look at but yeah um if you haven't noticed we do have a new brand new design at code creative thanks to unfold yes a design agency that supported us in building this out and helped us set it up they've given me a lot of different brand assets that i can use for like powerpoints and stuff so i am hoping to use a lot of the content stuff to speed up uh some of my creation processes and maybe get a little more content out there uh and then there's also the newer section notebook your handy dandy my handy dandy notebook you've had young children [Laughter] um which basically is kind of like my own personal wiki i guess it's this is like this is actually coming out of uh my physical notebook where i log all this information out uh so you'll see a lot of notes right now from the ui builder and i think a couple of them yeah a couple of them i made sure and i gotta get this on more of them but uh servicenow ninjas has a lot of really great content on that uh paige says she wants one yeah i am loving i'm loving this whole idea of having google index my notebook for me it just seems so useful and everywhere your handwriting is a lot better on this digital version too hey hey you leave my kindergarten handwriting alone all right so with that andrew notes that they did change their url have you reflected oh that's right i have to change it i have to change it because uh they got flapped um they got slaps yeah what are they now andrew do you remember what they are i don't remember what they are um i'll let y'all know as soon as as soon as somebody hooks me up with the feedback um while we're waiting we'll go ahead and get started down the page just loves the idea of being able to store the snippets without having to do a fancy blog post oh yeah so many drafts just sitting there because they aren't fancy yeah i agree page that was like that was the biggest reason for notebook is i found that with the code creative lives it made making videos so much easier because i didn't care about the post processing i just jumped in and accidentally clicked on the wrong thing in obs and realized you know a few minutes in that andrew could hear us talking and uh you know i don't have to care about it it just goes out there and everybody gets to see it and notebook is the live of the written form so i love it fast simple love it love it love it um i got sidetracked again i'm gonna put silly words in the middle of your notebook post when you're not looking don't cheat there you're just talking about the different parts of the new site we've got a new brand mark we've got a new yeah that's all i really wanted to share on it i love it i think it's so pretty it's so awesome i'm so thrilled with it i love it and i get to use cheeky images yes you do the little throwback to the rocket when i did the first code creative relaunch yup love it um okay so docker and node.js some what is docker is it like a app or something let's uh andrew asked was it expensive to have it done yes yes it absolutely was expensive to have it done um sarah and i had been working on doing it ourselves for the better part of i don't know a year yeah and uh and we just we weren't making progress on it and um i really wanted to make the brand a little more cohesive bring it together a little better one of the things that i've noticed is that the brand really resonates with people like marketing works um and it has code creative as a brand has really opened my opportunity to be able to help people folks have reached out to me that otherwise i would never have met and so it was definitely expensive but totally worth it in every way from my standpoint oh yeah and i will say like design is and especially branding experts are very much a get you get what you pay for sort of situation um i am a graphic designer by trade but i do not focus and i am not practiced at branding design um so i can do it but i struggle with it i don't have the finesse that these guys do um i've known peter del tondo one of the guys that unfold for years and i've seen his work i've followed his work for years and i just knew he was the guy that you need to have do this you needed someone that was going to put the expertise and the care into your brain that you have all these years and the i the money was very well spent yeah and i'll tell you what uh in the in the intro of of the project with them which was kind of weird because i got to be the customer for a change and it's been a while um it was an interesting experience yeah story time story time so at the very beginning of the process um they you know talking about the whole design being an expertise all on its own [Music] brand um branding even outside the design aspect or outside of the the drawing and physical aspect just the design the research and everything that goes into it is also an expertise all on its own and i got to learn that firsthand because uh they asked me if i they offered to reduce the price for me if i did some of the leg work myself so i would have to provide them with uh and i forget the exact term um but the brand strategy that's what it was if i did the brand strategy and i thought to myself arrogantly it's just writing i can handle the brand strategy yeah write me up for that discount i'll take it so they send me over a workbook and i get two questions into this workbook and i turn around and i send an email back i said i changed my mind take the discount off i'm going to pay you guys to do this i can't handle it so um so it's uh their guidance was well worth it their guidance was well worth it they did a much better job than i ever could have uh in every aspect of it so yeah um to get back on it's pretty it was it was worthwhile it was segue you can't like not talk about it on your first like live since then but anyway that's true um so before we dive into the docker side i actually want to dive into the node.js side first so node.js lets you run javascript on the server uh and so like a type of javascript like angularjs that we're using no no so angularjs is a library react is a library you know these are all libraries that run on javascript normally you run javascript in the browser right and then servicenow lets you run javascript on their server they do it with something called the rhino engine which is a java package that interprets javascript whatever whatever magic glide record yes magic glide record um node.js is basically the engine inside of the chrome browser but it has a bunch of magic i think it's written in c uh c or c plus plus but it's got a bunch of magic library bindings that let you access files with javascript it lets you um it lets you are you like watching no i'm not watching on my you know with the people y'all she's watching she's watching the video stream as she participates in the video i was trying to like do the comment thing anyway you were saying so so angularjs these other types of js are libraries and node.js is like a pack of lies because it's named like a library but it's not it's an engine it lets you execute javascript um through like the terminal on the server side so then it's like angularjs and the other libraries like the gas in the car if this is the engine yeah i guess you could say that and yeah in a roundabout way um maybe it's that like fluid so like basically if you come in here and go to inspect and i drag this guy over uh if i go to console you know i can run javascript in here right i can say console.log something and i hit enter and there's an engine that processes that javascript and spits out the text something yeah well the v8 engine is what actually runs that it's what google calls the v8 engine and it runs javascript yes yes i know analogy node.js uses the exact same engine and instead of running this console.log in the browser i can run it in a terminal let's see if i've got one stood up right now um now i don't have one running right now um but basically it will let you run that same javascript just with access to files access to um a bunch of different things server side that javascript normally doesn't have access to so you can run web browsers you know you can run or not web browsers you can run websites you know uh there's ghost js which is like wordpress but running on node um and there's all kinds of packages out there for it it's the most popular uh javascript engine out there aside from maybe the browser but it's like it's one of the most popular server side languages is javascript running on node.js okay so to do the j the node.js thing you download it and then use it in the vs code yeah so um i think i actually have it already installed so let me bring up terminal um let's see npm help i think something like that yeah so npm node package manager is how we install things this is the thing that we did for the uh custom components with the uh yes yes custom all of the custom components in the new um now experience framework is built using node.js this was like the best terrifying experience my entire life that whole tool is built on node.js in fact i think i think servicenow's entire new uh now cli the the now command line interface yeah the whole thing is powered by node.js behind it um so why not just have to use node.js do they need their own little special thing well they wrote packages on top of node.js so that you could run things in the command line so the uh when you do the now cli to create a new um to create a new now experience component there is a node.js module that servicenow wrote behind the scenes that actually goes out fetches the uh the scaffold project builds the scaffold project sets it all up for you initializes it and sets it up so that you can actually start writing a component there's all kinds of code behind it that's required to make it work and the now cli uses node.js to accelerate that process okay it's magic code that does a lot of things magic code that does a lot there you go okay andrew says i think node.js is how you run the components locally to develop them but then they run on the browser when you publish them yes yes so let me see if i can find this real quick uh now where's my now component where's my now components folder i have it somewhere servicenow projects i'm trying to find it where is it i don't know maybe i've got it in a work space you're supposed to have this stuff like ready dude i don't have anything ready i'm just making it up as i go along uh let's see let's try open recent web dev web prod ah now components okay so if you look in here when you do the now cli to build a component um these are kind of the folders that you get yeah and if i come down here you'll see this package.json which is nodejs entry point basically this is what describes the node.js application and you can see that it uses servicenow cli archetype component architecture library these are all of the libraries that servicenow wrote that made this stuff work you may also see down here snapdom now i don't think that one is actually part of the default you've said that word so many times and i still have like the vegas understanding of what it is so snapdon yeah angularjs is the library that powers service portal right it handles taking the templates and turning it into the html right snapdom is similar it's much more simplified much more straightforward um but basically it allows you to write templates that gets converted into html um snapdom is the dinosaur that's a bit kinky andrew says so i believe andrew was in australia right yes so when he says kinky does he mean the same thing that we mean when we say kinky i'm just wondering language barriers man language barriers it's english no no there's a distinct difference between australian english american english american northern english american southern english and british english and scottish english is like a whole nother thing okay well andrew has confirmed yep same thing nice okay thank you all right so um back over here this this snapdom library is not there by default so you can see that servicenow has a ui renderer snapdom yeah that's theirs this is what i added and this is one of the reasons why knowing node.js can be helpful is that you can actually manipulate what packages are available to your project so you can expand your project and there is more that you can do with these now components if you understand the inner workings of of how node.js packages are set up um because i this component here is actually using a snapdom renderer and i'm actually hijacking the snapdom renderer and um executing it the way that i want it done i guess you could say you just gotta have it your way i'm injecting my own personal web components mcdonald's into burger king is what you're doing basically what it means is that if you prefer vue.js if you prefer react.js if you prefer one of these other libraries and you have a component you want to import in um you can actually do that you can actually wire it up okay i would just like to note that in the commentary um we're still discussing what does kinky mean language the language barrier and the word kinky and i want you to know that now i have like this great image in my head of a stegosaurus with like black leather and a whip and stuff and yes he just you're trying to be outside and teach us things and you know my job is to absolutely do i i am well aware everybody in the comments is on my side absolutely oh gosh i don't even remember what i was talking about now oh you were explaining why set snapdom is there and how you're basically taking it and making it run your way uh as an example of the fact that oh yeah like inject your the things that you want yeah so like basically you've got the now cli that the now cli basically executes a series of packages that builds this this component and sends it to servicenow and installs it in your instance so that's the power of node.js is you don't have to copy it out you don't have to copy a compiled component out of node.js take it to servicenow put it in there manually the the now cli powered by node.js is doing all of that for you the code has already been written so that's kind of the power that node.js gives you um like i said it just it lets you execute javascript outside of the servicenow platform but still on a server um andrew says the packages are for code reusability mostly you can find stuff that other people have made to save you time yep exactly that was a great way of putting that it's kind of like how we put bootstrap on a website and use that framework so we don't have to build out all that yeah all right yep so um to get started with node.js you just go to nodejs.org and you can download either the long-term support version or the current for most people you are going to want the long-term support because it's more stable let's see carlos says about cli when you are in a new laptop and download your project from github npm install is beautiful because it downloads all of your project packages yes yes um nice so we will go over some of that but basically this package.json is all these dependencies here describe what this application requires to run and there's a command for these uh node cli where you type npm install and it goes out and grabs all of these packages and installs them on your computer so you've got those on hand when you're building the things right so your stuff like works right so so node.js is very descriptive uh as opposed to having to uh issue commands in a certain sequence you describe what you want the result of your package to be and then you can execute the command npm install and it just throttles it does the magic thing i like it when code does the magic thing i don't actually have to understand it so that is no js now docker docker is a different beast entirely so that does a thing so first of all we can go to docker uh i think it's docker.com yeah we can go to docker.com and we can hit the get started and depending on whether you are uh depending on what platform you're on you can select mac linux oh back with the apple chip that's the m1 i am on windows and i don't believe i have this yet on this computer so i can kind of walk through it to show you what this will look like when you set it up on your computer hopefully it doesn't blow anything up for me presumptuous that i'm going to set it up on my computer oh you're going to make me do this as like a walkthrough demo thing on live aren't you um i don't think so i think i'll spare you i don't know i might benefit from the exercise all right so i am installing it and basically i'm going to take all the defaults just take the default settings and let it run so this is installing uh quote-unquote docker uh on the windows machine so it's not so this is gonna be a little complicated i am going to switch over to a drawing i'm about to say are you going to draw me i'm going to draw you a picture show me a picture okay my drawing is terrible so that's okay i'll critique it all right so normally you've got normally you got your computer with the little power button right okay what's the door and all ready all ready no it's okay power button got it okay so then on top of that you usually install an os like windows right yes okay and that is how you are used to using computers and how most people are used to using computers and that is how the word world makes sense to you right yes okay now in server world things are a little more complicated so we actually have the ability to uh with the right software install multiple operating systems on the same computer so let's say that we wanted to run both windows and linux on the same computer now one option is just to install them side by side on the same computer and just pick which one you can hit right you pick which one you want on start you do that but what if what i really want is both of them running at the same time what if i want two computers running on one piece of hardware i tell you you are greedy okay well one of the options is to run a virtual machine yeah the virtual machine is the method i'm familiar with right so normally what you would do is you would have an os that's called a hypervisor okay it is it is an ex it is an extremely lightweight operating system designed for running virtual machines okay at that point i can run multiple operating systems on the same hypervisor that is multiple computers so i could run two windows machines off of the same off of the same computer that would allow me to run different applications so let's say i needed uh let's say that i wanted a browser testing environment okay and i needed to test back to ie7 i can't have ie7 on my yeah or on my windows 10 machine so i would run a windows 10 os and maybe a windows 7 early xp i don't know how far back we'd have to go to get to seven but so i could set up multiple different testing environments so that i could have each browser that i wanted and i could access each of them just the same as i would my normal os wouldn't it be easier to just fire the client that has ie7 as a requirement well yeah i mean that's that that that's an option no i see that's why it allows you to test it allows you to test in different environments um especially if you don't have like a mac and you need to test on like safari and mac and all that kind of stuff andrew says he recommends an operating system level package manager too uh homebrew for os x and chocolaty for windows this lets you install any application similarly to how npm works i've used homebrew on mac i haven't used chocolaty on windows yet um chocolate sorry i need a snack now um circling back over here the problem with this approach is that every os takes up hard drive space resources whole nine yards right slows it down and but also takes up hard drive space like physical hard drive space has so performance implications well let's say that an operating system was made up of four files it's made up that of way more than four files but let's say for the sake of argument each operating system is made up of four files if i installed three different machines that were all running windows 10 you would have four copies of the same exact file running taking up space taking up resources you know so they run into each other figuratively speaking no but it's all consuming resources on your hardware it's taking up hard drive space it's taking up ram it's it's taking up uh you know uh cpu time um so all three operating systems are always taking up resources so what docker did is docker said instead let's run one machine to rule them all and we'll run our hypervisor or main os and then we'll run a docker layer on top of that on top of which we can run any os as long as it's linux because most servers run linux this is why we need the camera because you have to see silence in the like why linux what it evolved that harkens back to that that whole uh well what color can i get cara and henry ford any colors long as it's just black [Laughter] okay so we've got our little our little computer box and our normal os which in our case is windows and then you have a docker on top of that which is like your layer and then you put your different virtual machines on top of that not virtual machines and this is where things get interesting so docker actually this os would be linux and all of these would be linux and what that means is that where file a is the same across all four machines the base and the three up here there is only one copy of file a that is one copy in ram one copy on hard drive so all the top ones like borrow from the main copy down here so it doesn't it's not running the same file multiple times right and so basically what you do is whenever you need something different uh you know file b for example you overwrite right uh and i forget the term that they actually use andrew says docker for windows can now run windows vms that's new that's cool thanks for that info check out rome's docker-based mid servers oh yes i'm very thrilled about that one um servicenow now has mid servers in docker containers and that's what each of these uh os's here would be called is a container um now the super power the superpower of docker is that much like node.js's package manager where we've got all the dependencies detailed you can do the same thing in docker okay okay so right now your computer is very different from my computer right yeah mine's prettier it has flashy lights but yes but i mean like the software that's installed yes wait notes do you have node.js installed on your computer yeah actually because we did the components but do you have the same version that i have oh probably not see so if i wrote a node.js package on my machine and handed it to you you would turn around and you'd be like trav there's a bunch of errors this is this is trash code go back and rework it and over the day i can tell you that you have trash code uh that's not hard i open that opportunity quite frequently yeah but like it's syntax errors and then it works meanwhile yeah we won't even go there but so if you were to turn around and pass that same package back to me and i'd run it on my computer and run fine and i'd be like well i i don't what's what's your environment look like this lets you do like different environments so you can see where the issues are in docker you describe exactly what this container environment should look like and so when i tell docker to build that environment it builds the environment on my computer the same way it builds it on your computer the same way it builds it on the server box over here no matter whose machine it's on the environment is cloned precisely and that helps maintain consistency for testing for development uh you know i could give you some of the node packet some of the tools that i've developed over here and i could send it over to you and you could start developing on it without having to worry about whether or not your environment was set up so in service now terms would this help with like version control to make sure that your components work on rom versus quebec versus things like that so it's hard to say that it will do that for like the different versions on service now because uh servicenow versioning is still what it is and is still separate but if you move some of your development off of servicenow yes you can get better version control and yes you can get a more stable development environment for things in a more stable testing environment for things but there will be limitations because you can you can only emulate the servicenow environment so much yeah before you have something completely different from servicenow so um i'm gonna flip back over while sarah is doodling um i don't know how to draw a fan that's your computer yeah mine has yeah with the three with the three big fans but mine has like flash oh wait well mine has an hp logo right here no it doesn't well my server box does oh look at the server the only thing that oh my gosh this is a glitter pen yes a glitter pen yes no oh check that out yes that's pretty i like that actually yeah you should draw the glitter pen more often more people watch i don't think so i don't think so i'm going to take control back from you now but no i mean you can still keep drawing okay we'll flip back and see how you're doing it that gives me a good understanding of what docker actually is though we'll flip back and uh check on how you're doing in a little bit you keep drawing okay i'll keep drawing and i'll like put this down so i can draw with it so uh at this point i have installed docker at dang it it says i must restart i don't want to restart so we're just going to close um but basically what happens is um virtual machine what is it called um what is their hypervisor hyper-v isn't it yeah i'm gonna totally know that i just learned what a hypervisor was i guess i don't have it actually enabled right now that's weird usually i do i guess i didn't install it on this machine um but basically what happens is when i install this docker desktop it actually installs a linux virtual machine on top of my windows operating system so windows is the hypervisor at that point okay a linux virtual machine sits on top of the hypervisor and docker is installed in that linux virtual machine and then you can use that docker environment so it's a little more complicated because you have that additional virtual machine layer but in all reality my server box where i am running my remote environment here my web dev and web prod um both of these are set up the exact same way i have um i have proxmox as my hypervisor i have a virtual uh a debian virtual machine on top of that hypervisor that's running docker that gives me access to the containers and what's really cool is if you have vs code it comes you can uh install the docker uh the remote development tools and you can manage all of it here so this uh this is actually this docker environment is actually on a different computer it's on my server box uh sitting next to me over here and i can manage that machine remotely from visual studio on this machine um so that's kind of the the basic gist and the basic breakdown now with that i want to dive into kind of how to set this stuff up and i'm going to use glidefast labs and what i've been doing there as an example so if you see this folder here this folder is sitting on my server as i said so this is connected over uh secure shell um ssh which is stuff that if you decide to have it on a separate server you will need to learn and understand uh if not you should be able to connect to your local environment uh to your local docker environment the one that we just installed um because vs code does work with your local docker uh environment as well which is super cool so um you'll see that i have this docker file and this docker file sets up the environment that i was telling you about so it's going to run a series of commands first of all it's grabbing the node.js um what do they call them so if you go to docker hub they have images uh docker hub has a bunch of images this one comes this image node 12 comes pre-installed with node.js version 12 installed already on it i think it's using alpine linux maybe um but bottom line is that it's already set up and ready to go so what i'm telling docker to do is to from that image use that image as a starting point i'm going to make the working directory in that linux environment this folder user source app okay that's just the one i chose arbitrarily i think it might have something to do with how node wants me to set it up um i'm going to copy my package.json this one here two that folder which is dot slash run npm install there's that npm install command which is going to install based on that package.json and then i'm going to copy my app which is everything in this folder over to user source app and that's what that does so no matter what machine you put it on when i run this through docker it'll build the exact same environment it'll build build it the same on the linux machine that i got sitting next to me it'll build it the same on this windows machine here it'll build it the same on yours um and the way i do that is with i use docker compose docker compose takes a lot of the command line command typey typey stuff that you have to do manually yeah and turns it into a descriptive format so it's using it's using yaml which is kind of like json but less text no squiggle brackets stuff like that um so you can see that in here i am creating a service called glidefast labs and you will want to do some reading up and research on how these files are formatted um i maybe we'll go a little more into depth at some point um but right now i'm trying trying to get over this hurdle a little bit so we can get to showing what it can actually do um build tells it to use this docker file the one in the same folder uh the user is the node user that is set up on that node image by default working directory same as the one i said before volumes is kind of the hard drives if you want to think of it that way in docker volumes is like hard drives so um i'm setting up two different volumes one for the app one for node modules um i don't remember why on that one but it was recommended in one of the tutorials i was following that to separate node modules out um probably just so it doesn't get confusing or anything but uh this little dot colon notation here is binding this file this folder here to that folder there so basically once this is up and running anything uh andrew says our grocery delivery ah take care andrew take care um what was i saying oh basically the folder in the docker environment is bound to the folder on my server so any change that i make to my application will automatically update in the docker environment that's a pretty important aspect whenever you're working on applications is to make sure that you have a bound volume yeah i think that's the term they use otherwise if i make changes to the files here i would have to restart the entire or rebuild the entire docker environment every time yeah uh and then i expose some ports which in this case actually doesn't matter because i'm not actually exposing those ports and then the last thing you'll see here is npm run depth that is telling the node package manager to first of all this command is the command that will be issued once the environment is spun up in docker if you do not have what is called a long-lived process running your docker machine will close right away it'll spin up and it'll spin right back down again so you have to have something long running you can do a tail call on slash dev slash null i think is one of the hacks that folks use to keep it running if you're not running like a server server in this case i am running npm run dev which tells my npm to run the dev script in my package.json which in this case is using rollup which roll up there's a lot of moving parts there there are there are there's there's a lot of moving parts there's a lot of stuff going on here um but when you see what it can do here in a minute it's really cool really cool um so this is running my rollup server rollup is a build process similar to webpack webpack is the tool that's used by the now react uses it in the create react app but also servicenow's now experience framework when you when you build your component it is using webpack uh webpack and babel to transpile all the es6 stuff you can do in the components it builds it into a component so roll up is a similar tool but for my purposes i like it better than webpack it was a little quicker to get it up and running this webpack's really really heavy there's a lot to it there was a lot to it it took a lot of plug-ins it took a lot of fiddling with um and uh for what i was doing with roll up it just made more sense for me uh you can see the packages that i have installed with it i'm also using babel this is cool because you can actually compile from es6 so you can use all the cool new es6 stuff but compile it to es5 which basically allows you to use es6 in servicenow today if you wanted to um with the right setup and the right build process and everything else oh that's nice uh i'm also using jest as my unit testing framework uh those were just ones i was testing those will go or actually i think i'm using mocha no i am using jest i forgot um carlos says he is a physical linux for mvc program but inspired to study docker docker is ru carlos docker is really cool because it gives you a lot of flexibility to run a wide array of environments side by side um i have i've really enjoyed using docker it spins stuff up really fast um so but yeah so basically uh the the npm run dev is going to run this dev script in my package.json and it's going to execute this roll up and trigger the watch so that it rebuilds that'll all make a little more sense here in a second so with that let me show the magic so first i am going to blow this off and i just blew off the wrong one that's right oh i blew off all of them because they were all stopped well it's a good thing that docker allows you to rebuild so i just accidentally uh deleted all of my containers including including the one including the one that is the hugo build environment for codecreative.io oh so um yeah how do we fix that so fortunately everything i need is in these folders it will rebuild the build and it will rebuild docker will rebuild the environment exactly as i had it before um and no this was not planned that was completely accidental dude so what i'm gonna do first is i'm going to open my code creative folder first in an integrated terminal because you have to use a terminal to use a lot of this stuff and uh just like with the glide fast labs you see the docker file and the docker compose this one is instead using hugo because hugo is my build thing yeah that's my static site generator for code creative and you can see that the docker environment is different from the other one and what i'm going to do is i'm going to do not pseudo nano we're going to run fix it docker compose up and that is going to tell docker using this compose file build the environment it's going to bring it back so now you can see it creating code creative blah blah blah and now it it automatically bound my local 1313 port to my server's 1313 port so it's it's forwarding localhost 1313 to if i come here i can go localhost 1313. that's my development environment for code creative you are now looking at the dev environment so uh if i came in here and edited the source uh let's go to the themes layouts index and i'm going to change carlos wants to know if you can do a git pull from your host i can in fact you'll see here momentarily if i change that you'll see test just popped up here and you see all the orange over here that is because i am running vs code plugin and so that whole thing is being tracked in the git repository and so any changes i make are tracked and i'm going to change that back save it and it comes back over here so i have a live dev environment for uh for this here and what carlos is pointing out is that if i have the docker environment or if i have the docker compose and docker file in a in a git repository then i can do a get pool to get that back even if i deleted that on my local environment that sounds like something i need to do there's a when you are using git the standard way and not the weird way that servicenow has with studio um you get a lot of really great backup functionality for folders uh and you get multiple redundancies for protecting you from yourself which is nice it's really nice apparently uh yeah so uh if i switch over to my docker tab and reload you'll see that i have code creative hugo environment here that is running and i can actually attach to its shell so this terminal here is the terminal for the hypervisor box for the server itself but i can also attach a shell to the environment so when i want to build i do i type hugo which is the command to build the static site for hugo it takes all my templates and generates a static html website that i can upload and so i should be able to run this without an issue so it's going to build and there it goes but if i use the other terminal the one on the host um i think i would actually have to stop this so let's stop that if i were to type hugo in here hugo command not found they're different environments so i have one environment running hugo and the host environment isn't running any of that it doesn't have node.js it doesn't have any of it so with this i can actually spin up a version of node 12 node 11 node 14 node 16 you know so like over here where it says um that you got the long term one at node 14 and you've got the current one at node 16. i can run both environments side by side using docker so with that let's spin up let's spin up the secret squirrel stuff uh open integrated terminal and you see where it's it's at the glide fast labs one i don't know why it's got my pseudo nano going docker compose up and that's just like a terminal command the same way npm install is and all that yes yes yes so docker compose up takes that docker compose.yaml and builds that environment as described how do you know it's pronounced yaml i don't i am assuming it's like a camel but why so if i go to yml it's white aml okay they just really like that you know three-letter suffix thing so yeah so it's a gamble um all right so glide fast labs one is now up and running so you can see here that i got that environment up and running you can see what files are in it so this is a separate server all on its own you can see all the files that are associated with it um and now what i have here is what i have set up here is really cool so if i go to my well not my vendor instance this is the glide fast vendor instance man i got my pretty uh basketball site in here so if i come in here there's a going back to the old actually i want to add storyboard not story forge so if folks may remember the old storyboard tool for mockups that i made once upon a time where you can pin stories to the image well i have started rebuilding that on top of itbm this application is complicated i mean there's a lot of moving pieces to it because so much of what you build is simple well you know so like here's just the task service right there then you've got the canvas service then you've got the server script you've got the client script which is a couple hundred lines of code um so i've got three different three different services here that it's dependent on plus the client script so you've got you've got tons tons of code in this and one of the things i've built called ui flow has thousands of lines of code in a single widget trying to manage it is maddening page says it's super cool thank you page that you watch i love this thing i love this i love it so much and i can't wait to bring it to folks using itvm uh so excited about it but with that i wanted to do it a little bit better uh than i did last time so this one actually has a let me pull up studio because it'll be easier for me to find it there and story forge all right let's see i have a i think it's a js include yep i have a ui script this ui script is compiled i did not write this in servicenow i copied it into service now i copied it from over here so basically what i have here is a uh here's the story forge folder right here and you can see that there's a main a main.js module and it is exporting create app and it builds a store object because if you followed any of my more recent widget developments you will see that i use a redux style store for anything of more than just the most basic complexity i immediately go to the store i know i know i'm learning it and i've had many headaches learning it but it's super cool but uh basically what it does is i build a store and i return my api for the story forge application which has a dispatch object a subscribe object some actions and some selectors do they ever have sales at the store of yours no but if you notice this uh create store function might look awful familiar and they're down here somewhere there's a create app where is it here it is this create app function down here might look quite familiar and that's b but it also might look a little bit different because what's this stuff up about what's this get new state function well if you look up here i'm importing get new state in this module i'm using es6 modules so i can break my code up into tiny pieces so all of these modules are sitting out here in these folders so uh if you are you know sarah you're more familiar with the store architecture i've been using and you know if you're familiar with redox applications at all there's uh you dispatch actions and then there is a reducer that builds the application state after every action is dispatched it's so easy it's longer to code but it's it makes your code actually very easy to trace and troubleshoot and if you name your functions correctly and encapsulate everything in functions it's so easy to find and um then you don't have one big function that could break for any little thing it's like you're insulating everything from itself right it's like and i'm explaining it badly but it is so flipping cool we will more than likely get around to to showing that off a little bit more and diving more into that one i don't know if we'll do that in this series or not but we'll see um so i'm going to add something to this i'm going to add a just a simple test function and for the sake of argument i'm going to use the es6 arrow functions just to demonstrate all the cool features of this i believe it is like that it works okay we'll save and you'll notice down here that it built automatically i don't know if you caught that or not but it it automatically rebuilt the uh library so there is in here uh where do i have it is in my docker compose it's not my docker compose i had a configuration somewhere around here ah roll up config that the roll up config describes the entry points and the outputs for how to build this um so the end result is if i collapse source and go to distribution you'll see i've got a story forge folder here and there's a bundle so this is now rebuilt it i'm going to copy this and real quick i'm going to come over here into the console clear that out and enter we'll clear that out and now i have a story forge object that has a [Music] create app function which has a test function built on it and it works so adding adding that one little function down here and then saving it it rebuilt it took all of these es6 modules combine them all together into a single bundled package and built that that entire library so now what would normally be thousands of lines of code inside of a widget or maybe if you're lucky spread out over a couple angular providers now i can take this entire object copy it go over to this ui script which is a js include dependency and i can paste it in here save it and you're done reload reload my my service portal ui here because this is a service portal i can come over here and there is a story forge and there's a create app and a test function on it holy cow that's cool so i can if i wanted to get really fancy i could actually because this is node.js i could build into the build process where after it bundled it could actually send this file to servicenow and update this record automatically for me oh see that's really cool best of all is now that this is outside of servicenow and in a docker environment in a uh in its own separate you know flat file as opposed to a database now i can use a git repository to stash this i can now uh you know one of the things that's always complicated on servicenow is multi-developer environments um when you have multiple developers trying to work on the same widget or the same scripts in service now i mean i was dealing with that earlier today hey are you done the screen so i can do a thing yeah it totally slows down your work exactly exactly so the that type of complexity in servicenow is actually really easy in traditional development you just clone your you you have a copy everybody gets a copy of the environment which in service now would cost you all the money all the money for the environments to do that in you know um and granted sometimes you can get away with if your company allows it you can get away with using your personal developer environment to do some work yeah and if you're using scoped applications then you can merge your stuff back and you can get some really good processes that way i don't think you're supposed to do that so you know definitely don't say i told you to do that um um but especially in more regulated environments uh you know i've done some work with some of the big banks and their environments you're they're funny about rightfully so about oh yeah and all that yeah with one of them i had to log into a virtual machine that they owned to do the development work uh and that virtual machine was locked down you couldn't do anything in it um except for what they explicitly authorized and you were not allowed to use your personal developer instance for anything um department of state was like that too department of state was probably even harder because they like are you allowed to talk about that i'm allowed to acknowledge that i did work okay and yeah i'm just trying i would like you to not go to jail good point that is probably about the expense extent i can the environment were crazy the environment was extremely secure um it was an extremely secure environment and they basically knew what you were doing at all times they could detect anything to the point that it was annoying it was kind of annoying sometimes it was cool it was cool but it was also annoying i i did enjoy it it was a really great project um 10 out of 10 would recommend um but but yeah so basically you get paige says we have six sub prods and it's still not enough oh gosh yes paige it just it hurts so bad and this is one of the things that i have found that is possible that you can potentially extract some of the work that you would normally do directly in servicenow and separate it out and this is a great thing that larger dev teams can start looking into it's really great for ui because both service portal and the new user experience framework allow you to uh pull in um external components so like if you wanted to you could actually build and i've done this with uh my own spin-off of snapdom i wrote my own version of it um because you know that's what you do in your spare time well i i hate the library update game where the libraries are no longer compatible with each other and i get stuck and so i've just started writing my own libraries for everything so that the code is a little more controlled and i don't have to worry about what you got right i have to worry about some guy saying i'm bored with this yeah because that's the problem is that a lot of these guys will will change to especially in the javascript areas they will change to flavor of the week type stuff and you're just expected to follow along with it and the old stuff gets unsupportive i like our trend of assuming that when a dev is doing something problematic it's always a man [Laughter] i'll stick with it i'll stick with that i mean if we have to be equal opportunity like that girl in her flaky javascript library that she won't update i don't know whatever i would totally be one of those devs that's like i'm gonna do this super cool thing and do like version 1.2 that's really buggy but really awesome and then be like ah i'm bored i'm not doing this anymore like i know that feel so this the this this does this does get you outside of a lot of that and it lets you take a little more control and i i have uh you know you can basically take your preferred build method for building a standard web component and you can embed web components within service portal and within uh the the new ux framework i've i have i have actually tested this and it works flawlessly so if i can figure it out i can do it both absolutely now one thing you have to keep in mind with that is that new web components are kind of flaky on ie11 so if you do still have to support older versions of ie it's always ie um yeah then you know then that might not be as much of an option for you um but that's also one of the reasons why i wrote my own variation of the library and everything else is because i was able to ensure that it works with ie11 and actually it works with a lot of older versions of ie too nice um it's very friendly um so but you can actually take those components and embed them um and much like i've done here so with this uh thanks for joining us paige yeah we're going to be wrapping up here shortly ourselves um but yeah so if you look in here you'll see this story forge create app and then i have to do some fancy footwork uh to wire it into the angularjs framework and then i dispatch my initialize action and off it runs and basically you can treat web components much the same way you can wire it straight in so this library here um this story forge library i can actually embed it within a now experience component as well i can use it in both um that'll be nice as we start to see clients transitioning from one to the next absolutely absolutely and so you get a lot of different advantages first of all you get the ability to use new es6 yeah now i know people have been screaming about that for a while yeah i mean there's a huge problem in the servicenow uh ecosystem where folks are like well i went and i took this code academy thing on javascript and none of it works in servicenow which hopefully we'll start seeing some es6 i hear rumors that es6 features are coming to service that would be nice because i tell you that's one of the biggest hurdles to learning uh to script on service now is that all of the traditional uh code tutorials and all that don't apply yep uh because servicenow's got so many special things and uh it doesn't it's not on the latest version and so that would be great yeah exactly and so with this you can take advantage of those new new features and functionality you know like you saw me do with the uh arrow function here yeah um and that's because i'm using babel to transpile from es6 to es5 it's transpiling it down to something servicenow can use so that is that's kind of a game changer for being able to do that it's also a game changer for like i said being able to build larger more complex code applications oh yeah um and also multiple people work on it also if you oh i generated empty chunks sometimes things break uh let me put that back you broke it yeah i don't know what happened there that was kind of weird uh but you'll notice here i can also minify compress and mangle so like now it's a bunch of meaningless gerbily it's all a bunch of meaningless girl really good to me either way um ritesh asks do you have a base library to build the app um is that secret squirrel stuff for building which apparatus for building the the uh the the story forge library over here setting up the docker environment or are you talking about the the app over here actually in servicenow and i'll kind of keep going while i wait uh because i know there's some some lag in between um but yes you can minify and compress that code which for um technology partners and folks that want to do a little more to protect their code uh partners you know who who want a little more ip protection around their preciouses or developers that just want to prevent folks from messing up their stuff but don't touch my stuff principle enforces a lot harder when you can't like understand any of what's going on it is it is just the library itself uh no i have not shared that yet ritesh uh what i'm probably gonna do because this one is tied up into the glide fast lab stuff so there's only so much i can share on that specific one but i do plan on building a separate uh code creative one that i will share out um and it is it's all pure js all of this is js being built on top of uh yeah i'm not using the only thing i'm using is roll up all of this is pure js uh and i have written some of my own libraries so like uh in the core here you'll see the store object and that store object is basically a it functions very similar to uh the redux store but it's my own personal build so i'm not dependent on everybody else's libraries um and i've just kind of taken to writing my own stuff lately because honestly when it gets down to it once you actually look at what some of these app some of these other libraries do nowadays a lot of them are actually really easy to replicate the behavior um and they add a lot of bloat to handle edge cases and feature sets that are demanded by some specific group of developers you know they don't care about or need or whatever libraries try to appeal to too many people and they bloat the code base slow the whole thing down increase the complexity uh and so i've started writing my own that do exactly what i want only what i want and don't supply all of the additional features until i absolutely need them and i found that that has made my code much more stable in the process i'm spending a lot less time going back and rebuilding off of some edge case yeah all that annoying stuff has gone away but um but yeah so that is one thing that we can do with this docker node.js stuff is we can set up build tools uh and this is very similar to what servicenow has done with the now ux uh component build tool the now cli yeah that is set up just like this just using webpack instead of rollup but it it does the same thing and just like there's call makes a rest web service call to service now we can do the same thing um next time around i'm actually going to take this to the next level by starting to look at those rest integrations because basically we can essentially create a mid server using node.js and that is going to serve as the foundation for other tools that we can build using this docker node.js environment so this was just like the intro course just to get us started with understanding like what all these moving parts do and why this is a good idea to explore yep so next time what we're going to start doing is we're going to take the concept that i started here in glide fast labs and i'm going to build out an environment specifically for building um more server side type stuff so instead of doing ui building like this i'm going to build something that is more like a mid server just built on node.js instead of servicenails which is java and this is going to be largely based on rest integrations but it is going to give us some magnificent superpowers because there's almost nothing you can't do with node.js the sky is the limit um you know you really got to be careful with saying stuff like that because you told me you could do anything on service portal and i believed you and now i build craziness and never tell people no well telling people no sometimes is okay but you can still do it is the point oh i do it whether or not it's a good idea is another thing exactly exactly and that is how to make it look good that is the one question i have not answered regarding what we're about to do with the mid server stuff i've always known i could do it i've never bothered to ask if i should alright yeah there's a jurassic park lesson in here somewhere but we're going to do it anyway oh my gosh back to that whole kinky dinosaur thing you see how it all circles back around i'm actually really excited about this because the servicenow mid server of course is java based in java you have to compile everything and i a i hate typed languages they just feel constricting to me i like the chaos and nonsense of the duck type languages like javascript and python i just do um you know everybody's like but well type languages will give you uh compilation time errors and i'm like throw me a run timer i got this let's have some fun um i'm okay with the with the runtime errors it doesn't bother me i'm used to it um i just i like the chaos don't look at me like that i like the chaos you assume that i'm looking at you like that because why would you be okay with all that chaos but really i'm looking at you like that because i don't even know the difference between a runtime error and a compilation error and you know when you know when uh when you think you have an object but you actually have a string that is the most annoying thing on the planet type error and you know how you don't really know because it just says uh object whatever does not have this function yep yep yep and you're like what does that mean why why doesn't it have that function yeah we've moved i've moved from a bunch of like specificity problems in css to type errors in javascript and they piss me off so much see in typed in strongly typed languages it will tell you that you have a type error it will tell you this line of code right here you are using an object when you or you you you think you have an object but you have a string that sounds good you know so it can however you have carlos says runtime errors are just for ninjas like you i guess i don't even know that it's a ninja thing it's i just like i embrace the chaos i like the fun of it it entertains me i'm here to have no idea why that's what i'm hearing the type the type errors bother that the type errors in static type languages just bother me more it it might just be because i have to tell the computer up front what it is um i don't know i don't like to put your babies in a corner no no don't never put baby in a corner nobody puts baby in a corner i understand but you also have built such a solid understanding of how javascript works and what it should be doing that you're able to uh more easily predict these kind of things i wouldn't go that far um because i would i still get stumped by the missing curly brace and missing semicolon stuff that's different that's like syntax i still get stumped by the the the type perfect but my my code is just like telling fish to go to the store and get a triangle you know if i have to think too much about the types i get bogged down in javascript i can write just interfaces as long as this object has this function it's good and i like the idea of programming to interfaces and a lot of times i will find cases where i want to extend interfaces and in most type languages that can get complicated and challenging and difficult and frustrating and i don't i don't like trying to solve language problems i like trying to solve business problems that's what it is i don't like trying to solve language problems and strongly typed languages tell me no way too often um javascript doesn't tell me no it never tells me now it does exactly what i ask it to do it looks at you with this sweet little look because you it did exactly what you told it and it looks at me and it says well that was stupid yeah my well you know i'm like telling my javascript to go smell the color nine and then i get mad when it doesn't you know compute see and i can handle that if i told the computer to do something stupid i'm okay with that if it chokes and throws an error but when when the language is like yeah well you know you didn't use the the right type for this and now i'm sitting there like well you know maybe i need to look into that because that just sounds glorious i i think you probably would prefer strongly typed languages which to that point there is a language called typescript which is javascript with strong typing um and lots of folks in the javascript community have moved towards it and babel will transpile it to es5 so using this style of build tool will allow you to also use stuff like typescript as well that's my type so sweet well that's been a really good introduction to what docker is do you want to see my little doodles that i did yes let us circle back let us circle back so this was the outcome we've got some js yeah we've got our kinky dinosaur uh story forge over here looking good i see you've made plenty of use of the uh sparkly oh my gosh you need a snack travis's that's my picture of your server oh that's my server box yeah my little stuff travis refuses to clean up sitting on top of the server box that that is true burma gerd that's it that's i was actually trying to listen you were talking about a bunch of abstract stuff so i had to well next time we'll we'll get into some more things yeah we're gonna act i mean we did make it do a thing tonight uh but next time next next time we'll start making it uh we'll start making it do some direct integrations with servicenow and start making some magic things happen which will hopefully also help make some of the um servicenow experience framework stuff that build tool might start making a little more sense to you it might that doesn't mean i like it well you know it's a start yep all right well thanks everybody for joining us and uh have a good night and hope to see you next time have a good one