Episode #312 - Importmaps in Rails 7

this episode is sponsored by honey badger hunting badger has your back when accounts they are the only air tracker that combines air monitoring uptime monitoring and crown monitoring into a single and simple to use platform their mission is to tame production and make you a better more productive developer [Music] in this episode we're going to have a look at the new way of handling importing in javascript assets into our rails applications and this is going to become a default standard in rail 7 and it does seem like we have had several years of growing pains around javascript before we had javascript assets and sprockets and that was the standard way for a long time if you wanted to use an external library or gem then you could simply bring in the assets that belong to those libraries but one thing i did not like about the old way was that we had a lot of javascript libraries that were distributed with gem wrappers and the gems usually didn't do anything beyond just including these javascript assets and it really was just a way for a rails developer to bring in those assets into our application without having to download them or anything like that it gave it some way of managing the version but it wasn't a very good way to manage the versions in my opinion and then we had our current method which is using webpacker and overall this was a very welcome switch for me personally because it gave me a better way to manage the versions of the javascript libraries that i was using but it also had a lot of issues around speed and especially when we were introducing a new library or package the sheer number of dependencies in the node modules folder was really kind of ridiculous and so within rail 7 we have a new way of handling javascript assets and that's with import maps and the basic idea the import maps is that we can reference within our code to different libraries as we normally would sort of we would have our bear import specifiers but with import maps these kind of act like keywords because we have to have a zebra file which will then take these keywords and then translate them over to where the actual library is and so with rail 7 this is going to be a default and in order to use this properly with your rails application you should be running rail 7 which isn't released yet and that's going to be important for getting things like action cable action text and active storage working properly and so in this episode i'm going to be taking a look at this from a rail 6 perspective adding this in and then also bringing in an external javascript library just so we can see how we interact with those as well and did you know that you can go to railstore.com to get your own ruby on rails t-shirt or your drift and ruby t-shirt so i am going to start a fresh rail 6 application and i'm going to pass a flag skip javascript because i don't want webpacker or anything like that getting installed and so once i have a new rails application created i could do a bundle add and then the import map dash rails this will install the gem and then i can run the bin rails important map colon install and so this made quite a few changes and let's go ahead and have a look at these before we continue on under our layouts file in the application html erb it added in this javascript import map tags and the installer also created under the app folder a javascript folder with our application.js and so there's not anything in here right now but if we needed to pull in any kind of scripts like turbo or stimulus js then those would show up under here and we could go ahead and run the bundle add hot wire dash rails and run the bin rails hot wire colon install and in this application.js you'll see that it's already set to import in these as we would expect but one of the most important files that was included with the import map rails is under the config and then the import map.rb because this is where we can pin all of the different javascript libraries and assets that we're going to be using within this application and if we need to add an additional library we can run the bin import map and then we can either pin or unpin an asset and we can add something like a sortable js to bring in the sortable js library and by default it's going to use the cdn and if you didn't want to use the jspm and instead you wanted to use something like js deliver then we could run the same command again but add a dash dash from and then js deliver and it'll automatically update the references for this sortable js and any of its dependencies that it needed to a different cdn and thanks to h2 i would recommend keeping all of these cdn assets the same just so you're only having to do a single ssl handshake but this is one thing i really don't like about it and that's having to have this reference to a cdn typically this is something that i've always been more comfortable handling myself and so you could always download these and reference and pin them here but store them in a vendor assets or something and so one nice thing about this new approach is that we don't have to worry about our javascript assets compiling because if we launch up our application have a look we do have a script with a type import map with all the import maps and it's also going to add the es module shims for browser compatibility while chrome and edge do have a pretty good compatibility there's some older browsers or other browsers that aren't quite up to snuff with it and the shims will basically allow things to work properly and so i'm going to create a simple list with a data controller position which will make into a stimulus controller and because i already have hot wire installed under the javascript controllers folder i can create the position underscore controller.js and typically i have a stimulus snippet for the boilerplate code that i'll just clean up but in this case this isn't going to work because we're importing in the controller from stimulus but if we come under the import map dot rb we see that the stimulus library is getting imported and pinned under the hot wire stimulus so that is one change that we'll have to make and if we go back and look at our import maps we pin the sortable js to this cdn reference so we can simply just do import sortable from the sortable js and then we can call this dot sortable is equal to sortable create we want to reference this element and we'll just do an animation of 150 milliseconds and so if we come back and refresh we now have a sortable list and we can always come in and just add some styling to make this list look a little bit nicer and then we can sort our items and be sure to check out episode 311 if you do want to see a full working example of this drag and drop list and so i think for new ruby on rails applications this is going to be a pretty interesting change but if you're comfortable with webpacker you can continue using webpacker with 7. and if you have an existing rail 6 or previous application i wouldn't jump to this quite yet i would slowly move towards using the import maps once i already have my application up and running and stable on rail seven and i know there's going to be quite a change for a lot of us myself included coming from webpacker because we've gone to a point where we're now comfortable with webpacker even with some of its nuances but i can honestly say that getting rid of that node modules folder and the hundreds of assets that installs by default with webhacker i can't say that i'm going to miss it too much well that's all for this episode thanks for watching

Channel: Drifting Ruby

Views: 2,578

Keywords: rails, development, screencast, tutorial, learning, education, tips, tricks, podcasts, programming, ruby, framework, training, ruby on rails, screencasts, javascript

Id: veWpot6zfUQ

Length: 8min 39sec (519 seconds)

Published: Sun Sep 05 2021