Get it Right in Black & White Episode 6 - JavaScript Modules & Build Tools

all right i hit the go live button wait for a few more others to join apologies like now all right the gang's all here how's everybody doing today hi curry hi sriram how are you i am [Music] hi adeel hello hello hello all right so looking forward to today's episode yeah um me too me too i think this one in particular will benefit from questions so feel free to interrupt me as we go sure um i really like what was going on in the last lesson that you know um people are just diving right into it and working and helping you closely after quickly oh yeah that was awesome let's try that that was awesome yeah the questions i mean i'm so thrilled at how this is working out with the questions they actually allow this the lessons to like unfold themselves which is amazing yeah we gotta see what our commenters are saying and encourage people to fork and try things yeah for sure for sure so i've got the youtube chat up i'll try to try not to miss things i i think we are learning a lot in one session and it's hard to catch up even for me yeah how is it with you guys see i what i believe is that we are not generating a media perhaps in the form of links or i think you do have lecture notes though right well yeah so i've done so my feeling is i want to do more i'm i'm behind on the content creation so what i plan to do is well i've done it for the first two episodes is add the timestamps to the edited video and make the edited video to begin with but hopefully next month and beyond i'll have more time to devote to this and i would like to make you know blog posts for each episode or or even rearrange the video content so that the flow makes more sense and make blog posts based on that so i totally agree tree rum with the idea yeah maybe we can create a landing page like we did for database for sure yeah yeah that's been on my to-do list now for a while vishub.com get it right it's going to be there one day yeah i mean i think we plan to do this all year right yeah yeah full year i think even i can lean in on this i'm done with my [Music] yeah if i go back to india i'll have more time i'll be able to do everything i want anyway you got your vaccine yet no not yet i'm not eligible but hopefully soon hopefully next month how about you [Music] all right let's do this let's get started welcome everyone to episode 6 of get it right in black and white where we'll discuss javascript modules and build tools i often get asked the question how do you work outside vis-hub every time i've taught this course you know people are happy generally using vis-hub to learn how to code uh it's great because you can start coding right away but when folks start to export the stuff out of his hub they're confronted with this new universe of stuff like npm package.json roll up building a bundle.js and then including it in the page and then having to serve the files locally within http server so all of this stuff is what i want to get into today today's episode is dedicated to answering this question thoroughly what we'll cover today i will start with reviewing last week's exercise submissions as usual and then we'll get into this uh content starting from scratch really how you know how to include javascript in html various ways to do this um we'll talk about es6 modules we'll talk about rollup how to use roll-up how to configure roll-up i think i'll use a roll-up starter project webpack as well and perhaps some other things around webpack like create react app if you all could mute yourselves it'd be great thanks webpack and things around webpack and also using github because if you're not using vishub uh you need to you know store the code somewhere store the revisions and so i think i'll walk through also using github creating a github repository putting the code into the github repository and maybe even hosting it with github pages if we have time so that's what we'll cover today that's the plan let me pull up next week's last week's exercises here all right here's last week's uh forum post let's see what we've got this is so cool double harmonic look at this it is a double pendulum inspired by sisyphus table not sure what that is but sounds cool beautiful stuff very mesmerizing and it creates something most worthy of being printed out on a canvas or something no there is a lightest version of it on the home page of video oh yeah yeah it's cool oh wow he's got a lot of stuff going on here oh my gosh look at this black and white version sweet and yeah it looks like spears in there this one oh look at that that's pretty wild wow very cool very cool yeah w gloss nice work w gloss uh let's see what else have we got oh there was a question actually like oh i just cannot get this running locally which is like okay yes now it's time i have to talk about how to do that so we'll address all of this stuff today for sure oh some new stuff i haven't even seen yet look at this one from nita whoa very cool some nice transitions very nice do you want to talk about this at all yeah i will oh it's using transitions i just use transitions to create the basic animation the one you created felt a little difficult very nice so yeah if you if if you run this it has a transition when you load it and that's created by so this the cx and cy are initialized i guess at zero which is inferred and then you use transition and duration and change cx and see why very nice very nice i think in a future episode i'm going to get way deep into transitions and here's one from ideal look at this oh nice you got the lines to work fantastic beautiful wow very nice very nice adil um would you mind like walking through how you did this here oh sure yeah uh it's um it's yeah so it's basically using um trying to make use of the path element to connect all the circles up and uh and um so that yeah d3 has this um uh a line generator which will convert all the data points into the string that gets passed to the d attribute which is uh which is part of the path element um so um yeah this was really just an experiment to see if i could get it to work and uh so i would be very keen to find out whether there's a better way of doing this but like for for example combining uh everything in one method chain um but my first pass was just to try and think about it separately and then use the uh the join method um to handle all the uh uh yeah syncing up all the dom elements with all the data um and uh yeah but that line generator is is really awesome because it just generates that complicated d string right um you know what's happening here is it's creating a path for each and every element of the array and so for however many circles there are there are an equal number of paths that are all on top of each other ah yes so if you inspect the dom you'll you'll actually see a many many paths and that's why the line appears somewhat uh harsh like thick if the anti-aliasing around it is not quite right that's because there's maybe you know ten or five lines on top of each other let me just quickly fork this and and you know give you my take on on how to do this so instead of using data here we can just use an element with a single sorry we can we can just use an array with a single element and see now that line is not so thick as it was because now there's only one of them and it doesn't matter what this thing is you could have it be null or whatever because you know none of these functions access it because d is always a line generator of data it's not a it's not a function of the this element in this array so this is actually something i was hoping to get to in the last episode which is namely the special case the special case of a single element and this is a perfect example of it you know where there's just a path you only want to have one of these path elements but it's driven by data that could have many elements but it's actually just one path if you wanted to have do it a different way where you had maybe line elements multiple line elements then you would you know use an array as data with many elements but since it's just one path this this uh approach works perfectly well and i would say this is sort of you know the optimal way to do it to use a path and have that path use these multiple lines so yeah great work i feel that's really really good to know yeah i that that's that that's uh it makes a lot more sense now just to have the one element in the uh being passed to the data method that that makes sense nice thank you thank you very much yeah my pleasure all right that's it for the exercise submissions all right that's it for a review of last week's exercises let's get into ways to include javascript in html for this i will start invis hub i'll create a viz from the hello html starter i'll fork this one and call it js in html okay so this example i'll just clear out the readme this example already has some javascript and this is the most straightforward you know maybe simplest way to include javascript in an html page you use a script tag and then inside of that script tag you can put arbitrary javascript but as you see when we write a lot of code it ends up uh getting very large and there may be more stuff in index.html and then pretty soon you're at like 100 lines 200 lines 500 lines in my various work i've seen i've seen you know html files that are a thousand lines or 2 000 lines of code which is just it's unwieldy so there becomes a need to split the files up so here's one way to split the files up you can take the javascript create a new file let's i don't know i'll call it uh script dot js just as a silly example name and then we can remove the stuff in that script tag there but notice that it's not running now this script is not doing anything because it's not included into the html of the page to include it into the page we can use the src attribute of the script tag so we can say src equals script dot js and now it runs it loads and all this stuff works without any build tools um the issue with this approach which by the way used to be the approach years ago in sort of the early years of javascript for a very long time the status quo was you know this is how you include a library on your page and this is how you include your script files on the page but what would happen is that over time you would end up with many script files on the page you know script one script two like this and then you would need to manually keep track of which script depends on which other script so you know for example if in script one you want you want to refer to a global variable introduced by script three then you would need to rearrange these such that they're in the right order so everything has its dependencies and the algorithm to do such ordering is called topological sorting um so i i think in like rails ruby on rails you can specify which script depends on which other script and then there's some utility that calculates the correct ordering and automatically generates the script tags but that all is sort of um in the past because in modern times there's this thing called es6 modules anita says that's so deep yeah feel free to speak with sound it's fine this is you know how one option of a way to work but let me show you how it looks with es6 modules in vishub you can use a special name called index.js this is a special name of a file that vishub specifically looks for and so if you if you define an index.js see vishub automatically created this file that you you're not allowed to edit called bundle.js this is a bundle created by rollup internally within vis hub so inside of the vis hub software it actually loads in rollup which is an amazing tool for for generating bundles and what a bundle is is it's a it's a file that combines many modules together here's what es6 modules look like you can say import something from i'll say dot slash um something dot js and we can create this file called something.js and in here we can export something equals i'll just define it as a string a thing so you can use export before the the keyword const to export a named well it's called a named export whatever variable you have locally you can export it with a name and then if you have named exports you can import them with this syntax let's use that by saying instead of hello javascript hello plus something whatever something is it should appear and now it says hello a thing all right so that's generally how you author es6 modules let's take a look at bundle.js to see what it's done here rollup has actually combined index.js and something.js together into a single file here's the content of something and here's the content of index.js so bundle.js makes basically index.js with everything included bundle.js is automatically generated from index.js everything that index.js imports is included in bundle.js and also the things that are imported by the things that are imported by index.js are also included in bundle.js so something.js could also you know import thing from dot slash thing dot js just making stuff up here and then that that could say a plus thing and then we can make another file thing.js equals thing planet earth sure planet earth so that allows us to author this module that defines this named export called thing which we we can import in something.js and use and something.js in turn exports the named export called something which is imported in index.js which is used there and then the cumulative output is hello uh planet earth and if we look at bundle.js all of those various modules are included inside of bundle.js so bundle.js is totally separate file it is yes yep yeah and we if we name we have to name index.js as index.js explaining work correct correct because um the viz hub roll up configuration that it uses internally looks for a file called index.js so what role do the curly braces play the ones that wrap something in this case oh that's a great question this is the distinction between named exports and default exports with named exports you could you could import multiple named exports from an es6 module and here's an example let me just see this through we can use both of these and then in something.js we can say export const something else other when you use this form of exporting export const you could also use export function this is valid syntax you could also use let export let something these are the various ways you can use named exports and with named exports the key thing is that you can export multiple things that have names so now we can see that the output is hello planet earth other that's named exports if you don't use the curly braces like this right now we get an error that says default is not exported if you don't use the curly braces it uses what's called the default export this is um this is the case where you want a module to export only one thing so if we modify some uh this if we modify something.js we can use the default export like this i believe export default something this will expose the variable in this file which is called something as the default export and by the way you can have a default export as well as named exports so let me just show you what that would look like like this so if we don't export something we export something else and then we export default something check this out in index.js we can import something which is the default export and something else as a named export and we can use that here like this and it still works and you'll often see this with react if you end up using react react uppercase react is the default export of react but then there's a lot of named exports from react to like use effect stuff like that that's an example where you would see this sort of stuff in the wild does ukraine have something like that what default modules and sorry what was that d3 does d3 have d3 well i believe it does not i believe it only uses named exports which is a really good segue let's check it out so in vishub you can include a script tag so here's here's here's the d3 library hosted on unpackage which is a content delivery network that hosts npm packages alright and npm is this giant database of packages with all of their different versions um it's a package manager for javascript and it's sort of the de facto package manager so all this is to say let's let's load in d3 onto our page using unpackage by going to unpackage.com d3 and if we just go to unpackage.com d3 and hit enter it automatically resolves to the latest version of d3 which at the time happens to be 6.6.2 and this is the minified build of d3 which contains all of the different modules that are part of d3 so i'm going to copy this url and then over in index.js i'm going to insert a script tag and set the source equal to that url and this is how cdns content delivery networks or content distribution networks are intended to be used at this point in our javascript we can say console.log d3 and it should work see that script tag defines d3 as a global variable this is called a browser global and this is one way it's like sort of the old school way of using libraries insert a script tag that pulls it from a cdn or you could pull down d3 to your files and load it from your files either way and then access the global variable that it defines this is one way of doing things this is not using es6 modules at all not at all this is this is an older way before there were es6 modules that's called browser globals so you could say d3.select that resolves to a function d3 dot you know scale linear all this stuff so um d3 is object and each module is property correct yes values as functions yep that's correct that's correct yeah using the d3 browser global you could say that yes d when you include this script tag here that defines d3 that introduces a single global variable into the you know global namespace of javascript that's called d3 so that's a variable called d3 and the value of that variable is an object and on that object you can see all the methods of d3 listed out here and this is great because when this program runs it just pulls in javascript from that cdn and it doesn't cost us anything meaning i don't have to host d3 inside of vis-hub or anything like that it's just when you load the page it pulls that from that unpackaged server which i have no control over it's you know totally not my thing this is why this is sort of the preferred way of using libraries invis hub in particular and i want to say the viz hub roll up configuration has a mapping for d3 as a package so that's what lets us do import select from d3 like this and then we can say console.log d3 whoops there is no d3 dot anymore it's just select because we've imported select a named export from d3 and it resolves to the right thing this is slightly mysterious right it's there's a little bit of black magic going on here with the roll up configuration roll up has this this feature where you can tell it to resolve package names to browser globals so somewhere in the configuration internally in this hub that you don't see right now there's a mapping that says okay if you try to import from d3 without the dot slash so it's not looking for a local file it's looking for a package called d3 if you do that then look for the browser global called d3 and resolve all the named exports to properties on that browser global this is a really nice configuration of rollup that allows us to use this really nice es6 import syntax for packages and at the same time pull in the script tag from a cdn now let's take a look at bundle.js for this case oops bundle.js is wrapped up into this this one expression right so it doesn't create any global variables it's very self-contained it defines a function and inside of that function is all of our code from all of our modules that we've authored and that function is immediately invoked with d3 which is not defined anywhere in this file because there's an assumption that it will be defined as a browser global and that's why all this works let me show you actually there's a little bit of magic as well where vishub is injecting a script tag at the end of the body that includes bundle.js script src equals dot bundle.js and if we have it there then it is not automatically injected so i want us i want to show you that if we include d3 after bundle.js it doesn't work i wanted to do this to cement this idea that bundle.js when it runs it assumes that there's a browser global called d3 and inside of any html when you have a script tag that script tag is fully loaded parsed and executed before the next script tag in the list so what's happening here is bundle.js is looking for d3 it's not there and we get an error but if we reorder this to include the the script before bundle.js then it all works so it is a hierarchical i mean in the sense that bundle.js depends on d3 yes but the data structure is not actually a tree it's not a hierarchy it's actually a graph it's actually a directed acyclic graph if you want to get into the weeds yes one knows which one comes first right right yeah internally roll up i mean if you have this dependency graph of modules rollup knows internally that the stuff in thing must come before the stuff in something because something imports from thing and also it knows that this stuff in something must come before the stuff in index.js inside bundle.js so that's why it has done this correct ordering using the topological sort algorithm internally nice so in virtual world also the things are hierarchical sure i see there was a question here from sriram is roll up comparable to npm or yarn what's the what's the difference between a package manager and a module bundler yeah i mean they're at different levels of this hierarchy in a sense npm is it's a company actually that makes money and it's a bunch of servers that exist out there in some cloud somewhere that's what npm is and it's a set of scripts and tools that allow people to publish modules into npm and also to get modules out of npm and so what we're using here is npm as well as unpackage which is another another product in inside of the ecosystem of npm to pull this script down and npm confusingly is also a command line tool where you could say npm install npm run npm this npm that and there's an alternative command line tool to the npm command line tool that's called yarn and yarn is arguably more efficient faster better but it also pulls the packages out of the npm package manager database system cloud thing so in a sense you know npm and yarn are not that different they're pretty much equivalent tools and roll up is a module bundler and rollup has peers in this ecosystem like webpack parcel snowpack recently but rollup is pretty nice yeah so the difference between a package manager and a module bundler is a package manager is a repository of packages but a module bundler is just a tool it's actually a package within npm rollup is also a package inside of npm and then when you run rollup on your stuff locally it pulls the packages that are that are installed locally using npm and generates a bundle so it's all kind of kind of this big hairball of stuff which is why it's confusing uh sure um says npm and unpackage are sort of like cdns for code in a way in a way i mean the cdn is is essentially a wrapper around npm this unpackaged cdn and on package itself is more akin to a a library like a physical library where you go to get books like when you publish an npm package it's like you're putting a new book in the library and when you're pulling it out it's like you're you're you're asking them to mail you a copy of the book or i don't know maybe it's not the right metaphor but yeah i hope that clarifies things uh current uh going back to the the default exports and the named exports yeah is there um uh are they are they used in different situations is there a a a general advantage to using named exports over default and vice versa is there something some general guideline around that that one could keep in mind if you google named exports versus default exports there are a lot of people that have very strong opinions about this stuff and like here why i've stopped exporting defaults from my javascript and this is actually the philosophy that i adhere to there's a lot of issues with default exports often i've seen in the in the module that has a default export internal to that module that export is named something or not not exactly something but it's it has a particular name and then in the ma in the module that imports it it's imported with a different name which is super confusing that's the that's the one big drawback i see of of using default exports they don't dictate what name you use so you could actually say import it which is the default and then we could use it like this and it still works so um yeah actually this cropped up in the vis hub code base where the names don't match and then when you're navigating the code base it makes it super confusing because you have to remember okay it's called this inside the module and it's called this outside the module um and it's just it just makes things super confusing so i personally tend to always only use named exports and imports in the code that i author but there's pros and cons for sure i mean react has chosen to use the default export of react which makes sense for that case i think so there are cases where you know using a default export makes sense in a way but yeah that's my personal take on it and so all the code that i author today in my you know work with clients and everything i strictly just use named exports and that's it no default exports that that makes sense to me i think i'll i'll follow that nice i see there's a bunch of chatter in the youtube chat so let me get caught up on that metal guitar covers oh i think i addressed this is bundle.js used there in index.js yes um it's there now because i added it if it's not there viz vishub does some magic and it inserts that exact thing so that's that's what's happening there and then yeah you can give the default export of a module any name when you're importing it that's true that's true that's why it's confusing how is index.js included since i don't see it in index.html oh yeah it's the confusing blackmagic part where vishub injects exactly this thing automatically if it's not there you know the intention is to make it easier to use but it's sort of cryptic and strange if you don't know that's happening try out vite sometime as a bundler yeah vite i heard about this like last week for the first time i feel like an old man i can't keep up with his stuff so vite is another one um yeah it looks cool looks cool see the thing with all of this stuff is the intention of vite webpack roll up snowpack parcel the intention of all that stuff is to make it easy and straightforward to author your code so that you don't need to think about or deal with all complexities of generating a bundle including the bundle into your html and all that stuff oops i'm confused oh there it is okay just a second all right we're about at the halfway point of the stream i think i'll uh i'll pause at this juncture for a five minute break see you all in five minutes hmm you oh all right you all right start back up soon you all there yeah nice you so all right i think i'll get started again we've discussed how to use stuff in vishub and es6 modules now i want to talk about how to set a project up locally so let's start by exporting out of visa there's this export feature what it gives you is a zip file that has a bunch of files so i'll open up a terminal i'm on linux here i'll go to my my place where i put code called repos short for repositories uh i'll just make a directory called example which is empty and as you do this stuff you know your setup your mileage may vary i mean i'm very comfortable with the command line and everything but you may want to use gui you may be in windows you may be in mac so the place where we're going is fraught with peril because everybody has a different setup a different system different ide text editor that you use vs code is most popular i think nowadays but i like to use vim doesn't matter once we have this zip file we can hit extract and i'm going to extract it to repos example i'll hit extract show the files in here we have index.html index.js bundle.js which was generated by vishub we've got the readme markdown file and these are all just text files we have something.js and thing.js and we have a few more things that are not visible at all in vishub we have a package.json and a rollup.config let's dig into these i'm going to use vim you can use whatever ide you prefer like vs code to look at the files package.json is a file that defines your dependencies and it's a whole it's a whole thing that has a lot of very well defined aspects to it the npm documentation for package.json is the canonical documentation for everything that you could put in package.json this whole concept of package.json has come out of npm essentially it's a way for npm to track dependencies and if you define a package that you want to publish to npm you need a package.json to specify the name the version description keywords home page all this stuff but if and the license you can specify in here which open source license all sorts of things but if you're not publishing a package per se the main thing that we use it for is for dependencies it just maps package name to a version range and this is using semver semantic versioning and this is what you'd want to research if you get interested in you know how exactly these versions are specified what the carrot means all this stuff here we have a very simple small package.json that says okay we have dev dependencies meaning they're not dependencies of this package if it were to be published but it's dependencies that you need if you're running a development environment locally so what this means is that if you run npm install in this directory that has this particular package.json it will use that package.json to figure out what it needs to install and then after it installs that stuff it appears in this directory called node underscore modules node underscore modules let's see what it contains it has all this stuff these are our direct dependencies including rollup and another package called at rollup plugin dash buble and we can see those here it's got roll up and it has at roll up and i think the slash um there's stuff inside of there that we're using but what are all these other packages right these are the transitive dependencies of our dependencies a transitive dependency is essentially a dependency of a dependency if we look at rollup for example and we're still inside node modules if we look at the package.json file of the rollup package it contains a bunch of dependencies dev dependencies in particular so all this stuff is pulled in and each of these dependencies has other dependencies so all the dependencies of dependencies of dependencies of dependencies are pulled in and what we end up in node modules with is this list of all the transitive dependencies so this is how you set up a project locally essentially you you run npm install that uses package.json to install these dependencies now the dependency that we're really using is a rollup and we're also using buble to support jsx which we don't actually need here we don't actually need it here but if we want to author react code with jsx we would need buble so i'm actually just going to delete this i'm going to start iterating this configuration locally which i would it's what i would suggest you do because the vishub export it's just sort of a generic simple export that makes it so you can generate bundle.js by yourself outside of vishub here's bundle.js what i'm going to do is delete this file so if i use rm there is no longer any file called bundle.js and then if we look again at package.json it has a scripts field and in that scripts field there's a key called build and the way that the scripts field works with package.json is that you can see npm run followed by the name of a script in which in this case the name is called build and there are sort of conventional names like npm run build generates the bundle across all various tools there's also npm run start which is equivalent to npm start which is set up for a lot with a lot of these templates but it's not set up here there's no script here called start because this is just a very minimal simple configuration that's aimed toward the minimal possible thing that you need to generate bundle.js if we run npm run build it invokes rollup because that's what the script is defined to do rollup dash c and then it creates bundle.js from index.js so this is how you can create bundle.js locally in your own machine outside of vishab the dash c of rollup means use the rollup configuration file found in rollup.config.js let's take a look at that this is where that mapping exists between the external packages and all of this stuff is sort of pre-programmed into vishub we don't actually need any of it except d3 so i'm going to delete all that junk we don't need and here's the mapping from the browser globals to the package names or rather the other way around from package name to browser global again we just need d3 because that's the only one we're using i mean i would like to there's a lot of things to improve with vishub like ideally you shouldn't include any of this stuff that you don't need but this is the state of things at the moment it also uses this buble plugin to transpile jsx but we don't actually need that so i'm going to delete that and yeah here's an interesting use of default exports you could just say export default and boom put it put an object literal right there it doesn't even have a name this is this is an es6 module that defines the role of config so now if we if we run that build script again it still works it generates bundle.js and there it is bundle.js how would you run this locally if you wanted to actually develop well you need to use an http server to serve the file locally um you could maybe get away with not doing that by just double clicking on index.html yeah in this case it works but as soon as you introduce any code that uses xmlhttprequest or fetch to fetch data that fetching of data uses the http protocol so you need to be hosting it with a with an http http server locally let me just quickly show you how i would do that my go-to tool for that is http dash server which is an npm package so you can say npm install dash g to make it a global command that's available to you http dash server and then you can run http dash server just like that as a command and boom it's created this server that's now running so you can go to this url here and it's serving your page 127.0.0.1 this is a special ip address that is equivalent to local host localhost colon 8080 the 8080 is the port number that's a sort of conventional port number that's used um that's how you can set up things locally and then once you start developing you get into this loop this development loop this cycle check it out our code is running there's something about a favicon file yeah the browser when it loads a page it always looks for this thing called favicon favicon i don't know how to pronounce it but that's the little icon that appears in the tab so that's what that error means it doesn't it doesn't really it's not important but that's what it means if you wanted to customize the little icon that appears in the tab you would have to introduce a favicon file but anyway let's say we wanted to change some of this code and oh check it out here's the log from http server every time we fetch the page it outputs something to this log let's say we wanted to change this text from hello to greetings if i change it and then i save this file oh wait a minute i'm editing bundle.js that's a big no-no we don't want to be editing bundle.js because it's an automatically generated file so um here's what i typically do is npm run build that generates bundle.js it's the same it was as it was before it says hello because it was derived from index.js which we should be authoring and changing let's say we wanted to change hello to greetings if i save this file and then i refresh this page it does not get our change because this page is using bundle.js not index.js in order to update bundle.js we need to manually run this script called npm run build now if we go and refresh the page it says hello uh planet earth uh oh there's like something wrong here this is called caching if you hit shift and hit the refresh button now it says greetings because it when you hit shift refresh it disables the cache the browser cache the browser cache is a thing that it uses an older version of the file that you that you got and it's for you know efficiency on the internet uh if you loaded an image yesterday and then you go to the same page that uses that same image and that image is on your machine in the cache then the browser will use it and not fetch the image again it's it's a way to conserve bandwidth so this is another sort of thing that you would run into with local development is the cache and in the network tab of the chrome dev tools you can click a little box that says disable cache which is something i would recommend doing because then you won't have to use shift clicking the refresh button it'll just never use the cache all right so this is how you can set up a local development environment and it basically works however you don't get the automatic refresh stuff which is which is nice to have i mean in invis hub if you make a change it automatically generates bundle.js and re-runs the program for you instantly this setup here does not does not do that if you want to do that that's where you get into these project templates and so roll up starter app would let you do that oh but before i get into that are there any questions so far guess not roll up starter app is a more fully fledged project template if we take a look at the package.json here it has more scripts besides build it has start which does the serving for you the http server stuff is built into this it has build which is our same thing we had roll up dash c it also has watch what watch will do is automatically rebuild your bundle every time the source changes the source code changes and then there's dev as a script which is what we would want to use during development we would say npm run dev and what this does is it starts these two scripts in in parallel using this package called npm run all dash dash parallel so it runs start which serves the stuff on an http server and it also runs watch and i believe this package called serve which is a dev dependency here it i believe it does that automatic refresh but i don't know let's let's give it a try let's give it a spin so how do we use this what i want to do is i think clone this repository using git call it example roll up starter and then i can run get clone oops i should just copy this here it already has the git clone run this this uses git to make a copy of all these files for me locally it's inside a directory called rollupstarter app which i guess is fine so in here i can run npm install or just npm i which is shorthand for npm install that will install the dependencies and then we can run npm run dev and it gives us this nice little output okay it's running on localhost 5000 let's roll up starter app excellent and then the development workflow looks something like we don't open up these files and this is these are the files from the starter app it's like just their version of hello world we could put our code in here that's probably that's the way to do it if if you want to like really start a new project based on something in vis-hub probably the thing to do is just copy your files into one of these starter apps notice how this rollup config is slightly different it looks for src main.js as the entry point instead of index.js like ours does yeah and it has a couple more plugins to resolve npm packages this is something i want to get into all right so i'm going to gut these files and put our own files in there i'll remove this update.js and then main.js i will replace it with the code that we wrote earlier so here's our index.js i'm just going to copy that over to here and then we need something.js so i'll make a new file called something.js and then i'll just copy this code into there and then we also need thing.js so i'll make a new file called src slash thing dot js and then copy our code into there save all these files and let's see what happened in our window where we're running npm run dev we have a couple of warnings here it says unresolved dependencies oh no d3 is imported by src main.js and yeah the bundle has not been updated the problem here is that we don't have d3 as a dependency here now here comes the main difference between what vishub does and what people usually do in projects usually instead of pulling in libraries from a cdn with a browser global usually people add it as a dependency in their package.json and then the bundle contains that entire library let's see how that plays out what we want to do is add to this dependencies d3 at a specific version but rather than hand edit this file what we can do is run a command called npm install dash dash save this will update bundle uh sorry this will update package.json and it will add that new dependencies the new this will update package.json and include whatever we type here as a new dependency at the latest version so if i run npm install dash dash save d3 it will figure out the latest version and add it to our dependencies section and it will also install it in node underscore modules now if we look at package.json it has d3 version 6.6.2 all right let me restart this i don't know if it catches that if i change it like that oh there's some warning about circular dependencies with d3 yeah that's a long-standing issue but it's just a warning it's fine it created a bundle.js let's take a look at bundle.js i'm quite curious to see what it looks like now it's in the public directory public by the way is a conventional directory name for the stuff that gets served over http that's where our index.js is and that's where our bundle is now inside of this version of bundle.js i forgot how to turn on line numbers in vim one moment oh yes okay in this version of bundle.js let's see how big it is how many lines it's massive it's huge look we're only you know 10 of the way in a 300 lines so what 3 000 lines of code this is because all of d3 is included now inside of our bundle.js vishub does not do this because it would be a huge waste of storage and compute time and everything but as a standard practice nowadays you know if you have for your own project this is typically what folks do you know all the dependencies get included inside of bundle.js which introduces the need for minification uh minification is when this stuff is sort of compacted the variable names are given nonsense names that are just one character or two and the idea with minification is to get the size of the bundle down i'm just curious what how big is this bundle if we take a look at these files we can see that bundle.js here is 76 kilobytes so that's you know that's what happens when your dependencies get in there and as you add more and more dependencies this bundle gets to be you know 500 kilobytes a megabyte two megabytes um so you gotta be careful when you just you know add dependencies willy-nilly but anyway when we look at the web page now it says roll up starter app i'm not sure why oh perhaps because um i did not in i didn't update index.html yeah we're still using their version of this and notice in the rollupstarter app version of this they also have script source equals bundle.js it's sort of a standard convention as the last step i'm going to replace that with our version of index.html copy all this stuff that we had from earlier put it into index.html however we no longer need to pull in d3 from unpackage because it's installed locally and it's included inside of bundle.js so i'm going to delete that now if we look at this page it says hello html and it has our greetings here and it also resolves the d3 stuff to the correct thing all right this is how you can essentially bootstrap a local project for development yep that's it any any questions and does this uh also refresh the page every time you make a change oh good question let's see if i change index.html and save it it does not no so we need to manually refresh but i wonder is it set up so that when we edit the code it reruns let's just change something here other thing no it does not it automatically generates the bundle but it does not automatically refresh the page hmm i don't think let me just try again make a change save it no it automatically generates the bundle but does not automatically refresh the page okay at this point if you wanted to add that we can start researching about that sort of thing but it's a whole it's a whole can of worms really there are other starters for example the webpack dev server i was hoping to go through this today but we don't have time we're at time here webpack is a great alternative to roll up and it has this thing called the the webpack dev server which does exactly this sort of re automatic refreshing of the page and automatic generating of the bundle so i would encourage you if you're interested to go through the docs of webpack they seem to have a very nice getting started section where was that it's in here somewhere but yes it's a similar kind of configuration to the rollup config where there's an entry and then there's output it's not exactly the same as rollup but it's you know the same in spirit webpack i think is uh perhaps more widely used then roll up for projects for you know applications however rollup is very popular for libraries because it has this efficiency around only including the code that you need which is called tree shaking but anyway i would like to leave you all with an exercise for this week export something you made in vishub put it in a github repository um unfortunately i didn't cover that today but you know trying to figure it out and then adopt a build tool roll up maybe go through the same process i did or try webpack or try a newer tool like parcel or snowpack or what was that other one that was suggested today i don't even remember what was that one fight invite yeah yeah yeah maybe try out vite and uh yeah i i hope this has clarified the question of how do i work outside of this hub all right i think we'll well i think we're pretty much done any any uh any less questions or discussion points us if i have to if i want to do the local development then should i start with roll up only i would suggest it that's actually my go-to tool it seems to work extremely well uh but maybe webpack is for you i mean totally up to you and some of these new ones like snowpla snowpack or vite you know they claim to be even better than whatever else is there web packet roll up so it's um it's wide open territory it's average it's an ever-changing landscape where things are coming and going people things are hot things are things are cold you know so it's it's really a jungle out there and i've sort of reached the end of what i can recommend because honestly i haven't really kept up with this whole space so it's an you know trial and error and um just try a bunch of things and see what works yeah i think i think what i'll do is extend this to next week uh well actually i should tell you all next week is cancelled the 17th is canceled but i'll resume these streams on the 24th 24th i think that's a saturday and i think it's it would be worth going through setting up a github repository and maybe walking through using webpack to bootstrap a project and as always i welcome any input or suggestions for things to talk about but then yeah after this we could get into more of the visual stuff d3 making different visualizations and so on all right thanks everyone for joining today i'll uh see you on the 24th and beyond my

Channel: Curran Kelleher

Views: 851

Keywords:

Id: oprCkQALSbg

Length: 95min 45sec (5745 seconds)

Published: Sat Apr 10 2021