Import maps - HTTP 203

Key Takeaways

well we do an episode and then we could maybe try and do some of a at the end for Lucas to cut around think all right am i what what so we spent the last couple of episodes talking about real things real let's stop that let's not do that yeah I thought why not just talk about some imaginary stuff this time I want to talk about import Maps which is a new proposal that is very much of the early messing around yeah let's let's give it context because I've seen we have an article on this um it it like you have kind of confusion about how stable certain features are right Allison where is it that well yes before we talk about what it is I would say some of it is in Chrome Canary kind of like an origin trial so you can experiment with it on in production in production with the whole origin trial thing but none of this is set in stone so it could still change yeah how it works why it works this episode could be completely useless by the time it goes out so I guess it's also pretty much chrome only then at this point like it had it behind the flag no no it's just me chrome only so what is it what what is it what is it actually I'm gonna answer that because I did the slides and everything we've got module import with your levy module scripts see I used your libraries yeah these IDB Cavell the ones no no I changed it up this time but although it was a more familiar to seeing something like this because that's how the note import works and most of the bundler support that kind of specifier we're just say just put the note package name and then we'll resolve the rest and the way this actually works in node is it will start it you know what if a module has this contains this and it will go up through all the directories all the parent directories looking for directors that have node modules alongside all right so it goes upwards and tries to find the most closest note mono you'll find them all oh really yeah I don't waste good doesn't find them all and then it will find modules folder in slash like in the root of my hard drive I think that will work yeah amazing but then there's also the special global one for your global modules so that goes at the end as well system it yeah if you do npm install - G - G oh there's new global stuff alright I never thought about it yeah no and then it will iterate through all of those and it will look for a directory called comm link in each of those and if it's multiple well it will so it's going through them yes so when it finds comm link in one of them it will go right does this have a package Jason if it does then I'm gonna look in the main yeah thing and that's the script I'm gonna load if it doesn't have that then I'm gonna try and load index dot JSP I'm gonna try and load index dot Jason if that's not there I'm going to try to load index node for like binary modules yet that's how it works and if they're not then goes up the guy directories yeah nothing else we want that on the web is that what you're saying that's the problem is we literally cannot do that on the web because imagine how many requests it would have to make just find a script right I'm too interactive two and a half years yeah exactly so we needed a new system in order to bring this to the web and that is import Maps that is what we're going to talk about total you type it's a new script type can I also put in the file yes yes you can and you shouldn't and we will get on to why this is what it looks like you see it's literally a map that maps from like the identifier oh it's interesting because I remember that there is a rule for both dynamic into the inputs that they have to start with slash or like with a relative or absolute path they yes there were not allowed to start with like this like yes modules on the web right now have to start with a dot mm-hmm I think it has to be like dot dot was it spot slash valid URL or slash right right okay something like that so this would let you with this now you're our cool okay so there's comlink and so there's no way that an import map identify could clash with existing production code out there right now because of that rule ah hold on hold on to that but yet as long as you've got this one of these has to go before anything that imports anything any import statement if you have one of these later on it will just error you you'll get an error on this script tag and it will just be ignored okay so this you know ideally right in the head of your document for everything else and this is where you had to find Robbie shouldn't put them in a file and that's why you probably shouldn't put them in a file but yes now this works neat just works thank you for spoiling my next slide multiple times sure we don't rehearse this right yes I would say you can do this it has have a special mime type but yes you shouldn't because then you've got this head of line same thing well that mean that a script type import map is also deferred by default because modules are deferred by d f-- knows this will I mean it's not gonna block rendering of anything but it would our immediate fetch and it will block subsequent script tags by using if you put an X on the file but put the script tag high up you should still be fine but it's one of those I on it but you should be fine there's a reason we inline scripts right and if you because if it's a very small file then the amount you pay for that request and response that is a question and yeah and they would be interested and so maybe if some of the use cases we go through here I have been also wondering how large these might get because the thing we saw there is I would say but one of the more boring use cases for it another interesting one mhm so this is what the example we had before yeah I can report calmly cuz it's in the import map but it seems that's the thing it usually works in node in node land you would have yep this works as well really it did you do something like this so there's a special rule if the thing ends in a slash then you're defining a prefix oh this is really nice thought of that yes I would have to define reason anyone analyze all the imports I have and define a map this is actually really neat but they don't have a rule I can just define the last one an index it's assumed like it is a note no index is not assumed and also things like in node you can miss out the extension oh yeah don't know that I mean that wouldn't just you could use import maps to work around but you would have to do every single file right and how to define everything is like here's the thing without the extension that map's other thing with the extension yes so you can do that but mmm probably done unless use for some reason no other way around it you can do this also maybe I can do like like rewrites so something it is already a valid import path I can now just say you know what it's actually here yes absolutely oh that's night and it's you could say that this could create a lot of confusing code where your scripts are doing another percent one thing I think there's a really interesting use case with this that I'm really excited about so here's an example in force but in production it will most likely look more like this yes because you should at least it should be because good caching you need this you need your unique file name so then if you change the file you will watch this there you go change the hash I set you up for this one I know and then it means you've changed the file so each of those resources can cache forever yeah because you change the file when you're changing the content but the problem with this is you've now also changed the content of the parent file yes so you need to update the hash of that file yeah if nothing else changed people will download a file that is exactly the same except for the imports yeah now with the import I see where you're going with this yes so even if a small module change you end up in validating like massive pre actually like the whole lot always from the leap from where did the change to the root of your thing at least that one branch potentially more it will all invalidate so the idea is what if we could just do that and then in your import map that's where all that goes very nice so that means if you change foo we just changed foo watch and so the interesting like I said this wouldn't be possible with HTTP redirects or rewrites because it wouldn't hit the HTTP cache exactly you could do it maybe in a serviceworker you could do this in a serviceworker you could intercept all of this stuff but it wouldn't be there for that very first request whether your serviceworker is installed whereas with imports in more maps it is it is just there that's we are that's a really exciting use code actually for us I think I think it's great and so that means yes the user will obviously have to download the new food bla bla bla bla but normally that only that only that small chain no rest off the pipeline can still just rely on you know has to load all the static imports before executing so everything will just work and keep working I so I think that's yeah that's a lovely little use case so here's a fun one oh so it isn't fun one game than that in a while although I said these scripts things these import map scripts they have to be before anything that imports anything or voids are invalid so you have to be the oh they're actually invalid I didn't catch the I thought just like the modules above it wouldn't respect them no it's it will error ignore I'm probably a good idea yeah it so it won't error modules it will just error ill error on the user error that there was a yes it's not in the correct place and then also let the other thing that have invalid import statements okay but you can still create them dynamically as long as you're still correcting and dynamically before any of your imports and I think this is really cool because you could have something like this where it does a feature test mm-hmm like oh is it because could be like a new JavaScript thing could be a new Dom things read our scripts syntax and you could say right now dump out one of these import maps and so loading main loan for example I could say do you have really will stream transform seem writable stream if I do I'm just gonna create this redirect to a small file we're just we export the native applications if not load the entire polyfill thing in my code and just import one normal module yeah and he'll we'll get the polyfill if it needs to be one otherwise it won't be exactly that that's really cool but it means you could do the same with new JavaScript syntax so it you know if the scope operator became a thing let's hope it does it's not gonna though is it but let's hope it does it means you could do something like this like exit to another file which makes use of that and therefore doesn't have to be transpiled that kind of thing smaller could be smaller why why did you do this do you know do you know why I did this notice I'm asking come on we did a show this Oh sometimes we make the leave a little bit just for the but you know I live it I I guess it has to be some sort of escaping but I didn't it is it's just a normal string you that's it's like the only part we make use of the template literal yeah the HTML parser wants to enters a script it's the end of your script is when there is angle bracket slash script angle bracket that's the end of your script so without this little trick it script will then there and all of this would bleed into the HTML oh that's the yes yes I remember now yes you even in a string literal you can't just have angle bracket slash script because by the time your father gets parsed the puzzle be like yeah that's great yeah because this is HTML powers of time rather than JavaScript parser time so yeah you've always gonna do something to work around us this is the first time I think I've ever seen this both like both this can escape but also insert adjacent HTML I've never used it oh I love inserted a straight to create element and set in a HTML something yeah and I quite often end up doing that or you're using some sort of library that's essentially making it easier for you but for the sake of a slide and this is an old Microsoft API this was one of the non-standard things that went into Internet Explorer before it could be it could be five point five or so is what in that year somewhere and but they standardized it because it is actually pretty useful very weird API you can see I wanted to go after the end of the current script that's how it works and then it will just yeah posit is HTML disgusting disgusting but for this case it was actually quite was actually quite useful that's quite happy with it anyway have you seen this type of thing before of course I have it's disgusting eNOS so what is happening here is they're trying to load like jQuery from some sort of CDN where you know and hope that it will already be cashed because they've used it on a different site or whatever but some countries don't have access to particular see the ends or sometimes the CDN it's down or something so you and it was your script like hey are going well if jQuery is not there then I'll load it from my own server instead document.write are using either adjacent the HTML shouldn't they they should be using well the problem with that is that would behave differently because that wouldn't load the script synchronously we na think it would be an async script yeah so that's why they use document.write which is horrible we've got a little script escape again they thought through in a different version about that so I'm less excited about this feature because what my response to this would be Donald Joker who from CDN just looked it on your own server because then you're not going to have Safari already double quiche their cache is like yeah no other site can put something in the cache for you and Safari anyway don't get loud on it and chrome as well double key thing and you're going to hit another connection set up time yeah okay we think it's bad but do you know what module let's talk about it they've got Maps have a solution for this as I say I'm not massively excited about it but what you can say is you know jQuery and you can give it to you URLs also we'll try the person if it fails or yes the second yeah all right then fair enough yeah isn't there so I just wanted to mention it here's one I'm a little bit more excited about I was a roast of excited yeah I know brilliant isn't it so here I'm loading like I've got foo which is pointing to it foo version to know because we have past version one now past version one of foo I'm also using comlink but good man comlink also uses foo but it expects version one what you're gonna do right in this situation here is what you would do you've got this scope section where you can say they essentially providing exceptions to the import section so for any modules that are under this directory like on words that have that sort of your are well again that they thought about this and receptions line so it's something that we think will happen that you know libraries will stop bundling their dependencies and just leave them as like raw identifies and leave it up to you as the final app developer to actually you know bend the arrows the right way that every import points to the actual correct file I think that's a dream I think the dream is to find a way that to turn node modules in the node resolution system into something that can be described by this important yeah I guess you would expect bunless to output this for us yes absolutely because they already do the whole technic analysis and do everything is like you know here's your import map just put it in your HTML and I think those libraries already exists like people have experimental egon and like you know we can generate an important base taun the project so they know that the roll-up bundle object pretty much contains all the data we need to do this yeah yeah so it's easy it's easily done which is great yeah you know whether a human would be writing this however it would be generated by a bundler who knows final thing and this is one of the things I am actually most excited about oh boy import scheme right like also that basically success from any old element that takes your else can now take something with an import scheme if you look it up in the map so what is happening that is it that is exactly it is there anything that can support URLs it's the same thing then that I can prevent an invalidation of the entire resource ok here works in CSS background images works anyone seen so anything it would even work in fetch yes yeah absolutely yeah there is a slight problem with like relative URLs because especially if you're in CSS land mmm it knows it's relative to the CSS file because that's how refers work in CSS but if you're in a scripts and you do fetch your any relative URLs are relative to the document I'm going to your rails for a second because I pass drive me mad on the web I have I like that roll-up when you like Bangladesh ends up in a root folder there's no folders anymore there's no sub directories everything is just dumped into one directory there's no clashes because they have hashes in the file name makes things easier I would say for anything that is not going to be user visible I would tend to agree yeah I like obviously we like good URLs right things I have I have subfolders for the index.html to my blog post but all the images in the blog post are back in the root folder so every rel is just or every image include it's just a slash something something yep and that makes things simple but it means in cases where it's going to be relative to your document rather than relative to the module the proposal is to have something like import meta yatch will take a relative URL and it will relative to the module rock you can do face here like this is actually really good for like progressive enhancement when you want to do like oh that's this browser have what p support and it can bend the import the right way I mean we have picture element and everything I know that yes but now we have programmatic control over it well you know what I'm glad you said that because I've realized there was a little bit I was going to talk about earlier and I forgot in terms of progressive enhancement this model where you're saying like map like food nsj to a hashed version you could ship this to browsers that don't support import Maps as long as you also have food or MJ in your server so you would have this URL this on your server which has the full caching headers yeah and you would have this on your server as well as a fallback which had no cash yeah so an old browsers aren't exclude they get a kind of kind of worse loading performance yes but they are not excluded like the thing still works so like maybe when it gets to like most browsers have this but some still don't then that's a switch point and you've got a professor at all yeah I'm really excited about this all right now I'm sure it'll change a little bit before it really houses properly yeah I think it's very important like this is not happening yet this is an experiment like wait this point is in canary it's unstable because we have an Origin trial but it's not enabled and stable by default yeah they're so standards going on there is a discussion going on we should link to the proposal and stuff yeah people can weigh in if they want to and again which gives it we're looking for developer feedback on this do you like it do you hate it what do you like what you hate what do you think it should be different and now is the right time to to be letting us know what yeah all of that stuff when don't pretend laning of muscles thanks mate got like strong fingers these typing fingers every day of everything else is just rot yes that's it I can't