Danielle is a software engineer at Nift, where she does Rails, iOS, and Android development. She has a passion for clean code and a goal of baking a new flavour of cupcakes every month.View the profile
About the talk
RailsConf 2019 -Webpacker vs Asset Pipeline by Danielle Gordon
Have you started using Webpacker or are you still doing everything with the asset pipeline? Do you not know what to expect if you start using Webpacker? Do you even need Webpacker? See what it's like to develop and maintain a Rails app with Webpacker or with just the asset pipeline side by side.
Okay, so this is not going to be a very long talk. Hopefully it'll be useful and Danielle. I'm a software engineer at a company called nip based in Boston, and I'm not going to start the talk by changing the title. Originally, I decided to call it webpacker versus the asset pipeline, but I continue to do research for this talk. I realize it's not really just one pack of Forces Day at the pipeline. It's more like we're Packers versus Snow White Packer or web Packers versus the asset pipeline plus some other real stuff. because honestly what the talk is really about is like what it's
like to use a rails app with my Packer and without it's honestly not even a versus thing because I don't think there's going to be a winner at the end. It's more of a what you're going to prefer and I just really want you to see what to expect when you pick one over the other. So because we're Packer is a wraparound webpack, which is something that you use with jobs grab applications. I decided to put used UJS. So we're going to see a lot of examples. Use. View files and about few files going to look like this and I know that's really small and you don't really need to be able to
something similar to this in our application JS file. And this is where we are just importing either subtree or folders or importing another file and concatenate in it to this current file. And this is all taken care of by sprockets, and that's the gym that actually implements to asset pipeline. When will he got in our staff files? We've seen these import statements. We've concatenated other CSS files to recurrence ask file. And of course, we've also seen fingerprinting where are assets are have a fingerprint additive that can make a cashing easier. So we
know that sprockets can handle this what you may not know is sprockets can be extended and we can extend it by adding processors Transformers compressors and compressors. And there a lot of resources. I used to kind of research some of this that you're all down. There is one of them. I definitely told you to look at that you do help it'll give you more information, but I'm really focused on these three. There's also one more called exporters and not just wright still file system, but we're not going to talk about that very much. So we're going to start with Transformers and
Transformers. What they really do is they changed one file type into another so when you think about like a coffee script while it. Coffee file, the coffeescript processor is just going to change that. Coffee file into a JS file and if you ever get a chance to look at different source code my God the type typescript source code. You can see there at the bottom line where it's registering the mime type text typescript with extension. Yes, and also registering a Transformer that changes a typescript file to adopt a file using the typescript rails Transformer
when you have a chance at 5:12 to a CSS file. Doctor Transformers, we have processors and there are two types of processors there preprocessors and post processors and preprocessors are run when a file is loaded post processors are run after Transformers. And if you remember these lines that we talked about that or an application to ask that is actually handled by a preprocessor preprocessor call the director processor. That's the processor that's in charge of actually loading those files and concatenate again. So another example of post processor then would be
autoprefixer. And if you don't remember what autoprefixer does autoprefixer take CFS like this. an expanded into that and this is just makes it so that it's compatible with all browsers and things like that. So we seen three processors and food processors and after that, of course we have compressors. And compressors are exactly what they sound like. They make your file smaller. So ugly fire would be a process. It would be a compressor anything that reduces your file remove whitespace is going to be a compressor. great, we've seen how we can extend
sprockets by adding processors Transformers and compressors and now we're going to take a look at what pack Cuz we said before webpacker is just a real rapper around webpack. And if you go to the webpack website, they on Belsay that webpack is static module Butler from Martin job applications. And I don't know what you'll even though. Yeah, it's it's definition is very suspect. It means absolutely nothing to me. Like when I read this I don't really get a definition of what it is like it says nothing. What I can give me a better idea of what webpack does is the images
on the web pack homepage and here you can see that you have Js files that are depending on View files that are depending another view files and view father depending on staff files that are depending on P&G and other image files and you see that one pack of taking all of those and compiling it all down into simple static assets and all of your dependencies for you. You said you all you need to say is my file depends on these things and from envious brows depend on those things by pack of will handle all of those opinions before you and make simple static files out of that. When
that you're starting with. And certain you'll even in a rails app. This would be like the application PDF file. What pack does defaults to app jobs Capac that entire folder any file in that folder is an entry point? And I got these files can be anything like few and JS files they could be fast files and see if that's files and they can also be image files. And from here we're going to pass them through loaders. Loaders are like sprocket Transformers processors in compressors loaders kind of do all of those things. So we have an example
of loaded downloaded that works on Asus file. And the nice thing about these letters is that you you can say like work on you until you can specify a regex for it. So here were saying anything that ends with. Sasse we want these letters to work and leave voters actually work in reverse order which from the top down bottom up going to start with r s a slow day. Going to compile the staff to see if that's while and then way to pass it off to a CSS loader which is going to interpret all the import statements and their URL to import our files. And then
finally we're going to go to our star loader which actually asked to see if that to the dawn I'm so when you think about the Rockets here, you can see that like our size motor would be like a sprocket Transformer. And if you wanted we could add like autoprefixer at the top it so that was the last thing run and that autoprefixer would be essentially like a proposed processor. That's Rock of the Run. And another loader is so another load of you're going to see a fuse right now is if you louder and you remember the view file we talked about before that viewloader is in what pack is what's
going to actually convert this view file in front of. View file to actually both a JS file and a CSS file. Again, we have loaders some example being a viewloader the fast loader upholstery SS loader it from these loaders at finally going to get to her outfit. So again by default, it's an output to your public packs folder. This is where all of your minimize a compressed files are going to be. Oh from your doctor you and JS files are going to have Js you from your status files. You going to have your CSS
make sure you added into places. You have to add that view file to whatever jobs for files going to carry that job could text and you also need to add that component. Do you file to your CSS file? You have to add that import statement twice if you only had it once like if you only add that require to the guy was tagging in teardrops falling you don't add it to your CSS file or to your sass. Well, you won't get any of the Styles. So you have to add it in both places webpack on the other hand does not work like that. Honestly would have been easier in the sense. We talked about export-import
powerful is the ability to export multiple things. With with export you'd like so in this example, we have food at J house and we're exporting three things. But we also have a bar that you got that Imports. Just one of those things and this is super powerful. For example, let's say we have a application JS file and that application JS file Imports file one and file to and each of those files both of those files import from this one file other file. What pack can because we're back in the background build the dependency graph of everything in your static file in the
compiled file. It's only going to have one like it's only going to have the code snippet from other file bath once and because sprockets concatenate if you just imported the regular way with sprockets, it's going to add that that those lines twice. That's one thing that's also super powerful bow. Twin pack pack always adds unique dependencies and sprockets Justin catenate. So you have the potential to have the same lines multiple times. Great, so we have some ideas about how to bundle our files. How do we handle CSF?
Cssm webpack is actually pretty simple again because we have these entry points. We can just add CSS there if you want Global see us as we can always add it to any jobs for file anywhere. We need it. So I didn't see a size in terms of what pack is almost pretty similar to adding it without webpack. You can still use your sass in for statement. Even when you're in a. View file, you can still use your statement. So it's it's pretty much the same. So we know where assets are located. We know how to make components. We know how to thunder of files and now we know how to handle CSS. I'm going to
dependencies for you. It's made for jobs cab application you get to use node and that's the honest known as we are going to get those jobs for updates first. But overall, I don't think there's a right and wrong way. I really hope this has been useful and I will take any questions. Thank you.
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.