Optimizing your JavaScript using fancy concatenation magic.

1. SPROCKET
Optimizing Your JavaScript
Using Fancy Concatenation Magic

2. SPROCKET
Optimizing Your JavaScript
Using Fancy Concatenation Magic
this does not
involve cats

3. THE PROBLEM
WHAT IS SPROCKETS?
USING IT

4. THE PROBLEM
WHAT IS SPROCKETS?
USING IT

5. Maintainability
Structure vs. Performance
Programmer Sanity

6. Maintainability
Structured and well organized code
Leads to programmer sanity
But there’s an inherent problem…

7. Structure vs. Performance
Bigger Applications == More Files!
Longer load times == Frustrated visitors

9. THE PROBLEM
WHAT IS SPROCKETS?
USING IT

10. Ruby Library
that helps you to...

11. Turn messy JavaScript *
* otherwise known as zillions of files

12. Into clean modules for
development

13. And a single* file for
deployment
* Yes, really. Just the one. No, for real. That’s it. Would I lie to you?

14. IT’S AWESOME!

16. THE PROBLEM
WHAT IS SPROCKETS?
USING IT

17. Installing
It’s a Ruby Gem
You don’t need to know Ruby
But you do need to have Ruby and Ruby Gems installed

18. Using via Terminal

19. Using via Terminal
Example Load Path

20. Dependencies
//= require "sqm"
//= require <sqm/admin>
//= require <sqm/utilities>
//= require <sqm/debugger>
//= require <sqm/tooltips>
//= require <sqm/lightbox>
//= require <sqm/controllers>
//= require <sqm/admin/utilities>

21. Dependencies
//= require "sqm"
//= require <sqm/admin>
//= require <sqm/utilities>
//= require <sqm/debugger>
//= require <sqm/tooltips>
//= require <sqm/lightbox>
//= require <sqm/controllers>
//= require <sqm/admin/utilities>

22. Dependencies
//= require <sqm/admin/controllers/versions/lightbox/case_benefit>
//= require <sqm/admin/controllers/versions/spreetabs>
//= require "sqm"
//= require <sqm/admin>
//= require <sqm/utilities>
//= require <sqm/debugger>
//= require <sqm/tooltips>
//= require <sqm/lightbox>
//= require <sqm/controllers>
//= require <sqm/admin/utilities>

23. Comments
// a private comment
/* a public comment */
/** a PDoc comment */

24. Other things it can do
Insert string constants with <%= %>
Bundle assets to create JS packages
Can run within Ruby code
Can be ran as a Rails plugin (sprocket-rails)
Or as a CGI script

25. Numbers!
Non-Optimized Optimized
Size 344kb 204kb
HTTP Requests 26 1

26. Resources
I wrote it so that makes me awesome.
Sam Stephenson
http://getsprockets.org
http://github.com/sstephenson
http://github.com/sstephenson/sprockets-rails

28. Thank you!
tim.novinger@gmail.com
@timnovinger
Screaming Monkeys Web Guild Tim Novinger
17 May 2010 Squaremouth, Inc.