00:00:12.200
Hello everyone! I am here to speak about how Sprockets works.
00:00:18.960
But first, I want to know about you. How many of you know what Sprockets is?
00:00:25.759
Okay, looks like not too many. That's fine.
00:00:31.140
My name is Rafael França, and you can find me on GitHub and Twitter as @rafaelfranca.
00:00:36.660
I'm a member of the Rails Core team and I work for Shopify, which is an eCommerce platform that allows you to create your own eCommerce site.
00:00:44.670
In the Rails Core team, I think what I find really interesting is that you can work on whatever you want, and there are a lot of people doing great work like improvements to Arrow or performance improvements in Action Pack.
00:00:54.989
My job is more about the maintenance aspect of Rails. I'm one of the Rails maintainers, which means I handle the releases of the framework.
00:01:06.270
Every single release is made by me, except for Rails 5.1, which is handled by someone else. As a Rails maintainer, I want to work on projects that go beyond just the framework itself.
00:01:21.090
Rails encompasses a variety of different projects, and it exists across different layers of your application, including the process level with Sprockets, in the MVC architecture with Active Record, and also in the front-end where we use tools like the JavaScript driver and Turbolinks.
00:01:58.109
There is also the Asset Pipeline, which is what makes it possible to manage your assets effectively. Today, I will discuss why we need an Asset Pipeline, what changes it introduces, how it works in a Rails application, and how to extend it.
00:02:30.000
So, why do we need an Asset Pipeline? Before the Asset Pipeline was introduced in Rails, there were various ways to build client-side code.
00:02:52.319
One question everyone had was, 'Where should I put my assets?' Before Rails 3.1, there were no conventions about how to organize your application.
00:03:06.120
People usually put assets inside the public folder, which worked fine, but when you had a large client-side application, organizing those assets became necessary to avoid clutter and confusion.
00:03:23.790
In that scenario, we had to consider trade-offs, as better code organization could hurt performance.
00:03:36.079
We also faced decisions about whether to create self-contained files for modularity and maintainability, or to put all assets in the same file for fewer requests.
00:04:02.340
More requests meant slower page loading times, which was a significant factor to consider.
00:04:19.590
Another trade-off to consider was whether to write readable code or to minimize the size of the files being sent to the client. Back then, we often prioritized size over clarity, which resulted in verbose, poorly documented code.
00:05:03.040
However, today we have better internet speeds, so we don't need to worry as much about minimizing bytes sent to the client. There was also the rise of new technologies like CoffeeScript, Sass, and most recently, ES6.
00:05:37.060
To mitigate these challenges, we introduced the Rails Asset Pipeline.
00:05:49.360
The Asset Pipeline is essentially a set of conventions and tools. The first part of the Asset Pipeline includes conventions for where to place assets like stylesheets, JavaScript files, and images.
00:06:07.120
Additionally, it allows you to store third-party libraries and manage your assets through compilation on-the-fly. This enables you to focus on code organization and maintenance.
00:06:19.540
The Asset Pipeline can handle a lot of heavy lifting for you, enabling you to make fewer requests in the browser while ensuring that the code is organized efficiently.
00:06:36.160
Another significant feature of the Rails Asset Pipeline is that it generates fingerprints for the files, allowing browsers to cache them effectively.
00:07:05.950
You can instruct your server to cache the assets for a specified amount of time, and if the file changes, the fingerprint will change as well, prompting the browser to fetch the new version.
00:07:40.450
Now that we know how it works, let's discuss the gems responsible for it. The core of the Asset Pipeline is Sprockets. Rails acts as a wrapper around Sprockets to provide a more integrated experience.
00:08:15.950
Sprockets is a collection of processors that allows you to build asset pipelines by combining various types of assets. I will explain the key components of Sprockets, which include processors, compressors, and directives.
00:08:45.000
A processor is any callable object that accepts a hash as input and returns a hash of metadata. For example, a simple processor would remove all semicolons from a given JavaScript file.
00:09:06.310
The input hash will contain the asset data being processed, and the output will include the necessary data for the next process. This processor operates by stripping away unnecessary semicolons, returning a cleaner version of the file.
00:09:27.890
In addition to simple processors for JavaScript and CSS, there are also bundle processors that concatenate files together, allowing you to manage multiple assets more efficiently.
00:09:49.930
The environment object in Sprockets manages access to these processors and allows you to set up the configurations needed for processing assets effectively.
00:10:19.610
Moreover, directives are special comments within your code that provide instructions about what to include or how to process specific files.
00:10:48.950
These comments allow for a more dynamic and flexible approach to asset management, helping you specify which files to include when generating your application's assets.
00:11:25.000
Using directives, you can build an application HTML file that includes only the necessary JavaScript and CSS files, rather than bundling everything together.
00:11:54.240
The manifest file serves as a central point that tracks all assets and their dependencies while allowing you to perform operations such as versioning and caching efficiently.
00:12:52.700
In summary, understanding Sprockets and the Asset Pipeline is essential for optimizing your applications. They greatly improve the handling of assets while enabling cleaner, more maintainable code.
