Pain in the Asset Pipeline

The slides from my talk at OxRUG on the 2nd of December 2015, on Ruby's asset pipelines and the future.

Transcript

1. PAIN IN THE ASSET PIPELINE / Ryan Brooks @spikeheap December 2015
2. HELLO!
3. OVERVIEW 1. Asset pipelines? 2. Asset pipelines 3. Asset pipelines! 4. Is it worth the effort?
4. ASSET PIPELINES?
5. Page performance 1. Concatenation 2. Minification
6. That's just a build system, right?
7. Developer performance 1. Sourcemaps 2. Asset compilation 3. Modular sources 4. Auto-prefixing & polyfills 5. Linting 6. Testing 7. Auto-reloading
8. ASSET PIPELINES
9. SPROCKETS / | - a p p | | - a s s e t s | | - j a v a s c r i p t s | | | - a p p . j s | | - v e n d o r | | | - b o w e r _ c o m p o n e n t s | | | - j q u e r y | | | - d i s t | | | - j q u e r y . j s | | - s t y l e s | | - s t y l e . s a s s | | - p u b l i c | - a p p l i c a t i o n . j s | - a p p l i c a t i o n . c s s
10. SPROCKETS / / = r e q u i r e ' b o w e r _ c o m p o n e n t s / E l e m e n t . c l o s e s t / c l o s e s t . j s ' / / = r e q u i r e ' b o w e r _ c o m p o n e n t s / j q u e r y / d i s t / j q u e r y . j s ' / / = r e q u i r e ' b o w e r _ c o m p o n e n t s / j q u e r y - u j s / s r c / r a i l s . j s ' / / = r e q u i r e ' b o w e r _ c o m p o n e n t s / l o d a s h / l o d a s h . j s ' / / = r e q u i r e ' b o w e r _ c o m p o n e n t s / a n g u l a r / a n g u l a r . j s '
11. SPROCKETS dev and prod
12. A QUICK ASIDE It's all about context
13. SPROCKETS BAD, HULK SMASH ✅ Minification ✅ Concatenation ✅ SCSS/LESS compilation ✅ (Rails only) ❌ ❌ Modular JavaScript ❌ JavaScript best practices ❌ Not being quirky ❌ Dev == Prod ❌ Keeping pace with modern frontend development Autoprefixing ES6/ES2015 JavaScript Sourcemaps
14. Abandon Sprockets? Add more gems/middleware? Use a JavaScript build tool?
15. ASSET PIPELINES! How do we get to ✨?
16. Single Responsibility
17. The plan: 1. Use existing source location 2. Compile to a new directory 3. Switch the ERBs 4. Deprecate Sprockets and rejoice!
18. What actually happened: ✅ Use existing source location ❌ Compile to a new directory ❌ Switch the ERBs ❌ Deprecate Sprockets and rejoice!
19. Problems 1. Paths 2. Cachebusting
20. { " a p p . j s " : " a p p - a 4 1 d 8 c d 1 . j s " , " u n i c o r n . c s s " : " u n i c o r n - d 4 1 d 8 c d 9 8 f . c s s " }
21. HAPPILY EVER AFTER ng-annotate SPA partial compilation Browsersync Karma JSCS Browserify/Webpack Typescript/ES2015
22. IS IT WORTH THE EFFORT?
23. ...yup
24. CONTEXT
25. THANKS / Ryan Brooks @spikeheap