Duration 17:27
16+
Play
Video

RailsConf 2019 - Webpacker vs Asset Pipeline by Danielle Gordon

Danielle Gordon
Software Engineer at Nift
  • Video
  • Table of contents
  • Video
RailsConf 2019
May 1, 2019, Minneapolis, USA
RailsConf 2019
Request Q&A
Video
RailsConf 2019 - Webpacker vs Asset Pipeline by Danielle Gordon
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
6.53 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speaker

Danielle Gordon
Software Engineer at Nift

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.


Share

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

read it. I just want you to know that if you file is coming kind of consists of three different parts you to have your Templar part of a pair which is just HTML you're going to have your JavaScript part here and your CSF part. And of course the order of this does not matter. This is just what I have to put it in. What is the asset pipeline when you go to the ruby guide it says that the pipeline provides a framework to concatenate and Minify or compressed JavaScript and CSS acid. And we've all started a new rails app, right and we've all seen this

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

you're done using my powers, are you going to see import statements like these? So when you import other things school things about webpack is you can import just about any kind of file into your Javascript file. So you can import classes and functions in objects from other jobs for files into your current jobs for flour and you can even import things like images in CSS into your jobs for plow. So when we're configuring webpack, we wouldn't want to start with an entry point. And your entry point is file that you the file that you're going to compile down. These are the files

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

files and along with that. You're also going to be able to get mouth while me and my files are super useful, especially when you're in production and you're trying to debug your JavaScript because you going to have minimize JavaScript files. You can use that map file them at the back to your fully extended file to help you really understand what's going on. We know how sprockets works. We know how we can extend sprockets. We know how webpack works now we can start asking for more questions. Where are Asus located? How do we make components? How do we bundle files? How can

we handle CSS? And then what do we do at neft? We talked before about how by default all of your files are to be placed in the app Javascript packs for entry points. So if you can actually put all of your files when using webpack when you're using webpack, even if it's an image file that you're importing into another job script while it's still in your app Javascript folder, which may feel a little bit weird instead of putting in like the app assets image folder be at all of your files are going to be in subdirectories of app Javascript on

the other hand with course with when you use that as a pipeline everything isn't a passes. Spinelli when you compile down when your files compiled and fingerprinted With webpack they're going to be in public packs as opposed to the at the pipeline where they'll be in the public acid. The right we know where our files are we know where they'll end up. How do we make components? I get them to go back to this view file. So here in this view file, we have everything we have our template. We have our JavaScript. We have our CSS and webpack just handle this by yourself, right? It just it just

takes care of sprockets on the other hand can't handle this because it's just a dot view file. But it can you can extend it with a Transformer. You can get it if you can find of. View Transformer, you can transform this file from adopt you file to a Javascript file or adopt you file to see if that's well. And of course like every Ruby programming knows this probably jumped for that. Of course, there is a real bilodeau Jam we could use this damn to do that compliation for us. But what if there isn't a sprocket Transformer what if you don't want to make one yourself because frankly it

takes a lot of time. In that case you can use a real view partial file. And this might make some people feel uncomfortable put in your job scope with your HTML like at least like this with scrip tags. You can do this. There is usually a little bit of a performant it when you keep adding when you keep importing rails you Parcels, but you can also cash this and it's easy to cash because nothing here depends on user data. This is just static HTML and JavaScript. Great soon. We know how to write a components.

How do we actually bundle everything up properly? From the top level when you're including your JavaScript links and you're a CSS links. It's actually pretty similar to when you do it with rockets instead of staying job stripping Flugtag. You do JavaScript Pat tag, instead of doing stylesheet link tag, who do stylesheet pack tag? But more specifically let's say we were using of you sprocket Transformer after all. One thing you have to make sure to do is because even though you're using that view Transformer that view sprocket Transformer, you need to

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

a little bit where we said how you can import just about any type of object into a JavaScript object or if you can just use anything as entry point and you can say they couldn't put anything there so we can actually take advantage of exports Imports to import are components anywhere. Just a quick little bit of an overview important export if you don't export something from a Javascript file, you can't use it in a different file. And if you want to export the entire file, you can just put it in your expert brackets. But I think another important part another part that super

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

talk a little bit about what we do and what we choose to do. It neft at next we actually went more with a real view parcel method. Most of our Pages aren't using JavaScript. We have a lot of static pages and then we have a few pages that are just super Dynamic and I think this works well for us because we're not having something take over entire front in firstly. I don't think there's a right or wrong way to do this. I think if you want a full spa, do you want a full single page app? Maybe it does make sense to use webpack first instead just because webpack is going to handle all your

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.

Cackle comments for the website

Buy this talk

Access to the talk “RailsConf 2019 - Webpacker vs Asset Pipeline by Danielle Gordon”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “RailsConf 2019”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
166
app store, apps, development, google play, mobile, soft

Similar talks

Aaron Patterson
Senior Software engineer at GitHub
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “RailsConf 2019 - Webpacker vs Asset Pipeline by Danielle Gordon”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
577 conferences
23312 speakers
8705 hours of content