This document discusses migrating a site from Prototype to jQuery. It covers why jQuery was chosen, how the migration will be done page by page including renaming files and packages and writing plugins, recommended design patterns and tools to use, and testing upgrades. The presentation was given by a lead front-end engineer discussing migrating a large sports media site to jQuery.

1. jQuery Migration
Migrating a site to jQuery
Chris Pederick
Yelp Learning Group 2011
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

2. Who?
Eastern Screetch Owl by t.davis photogrpahy
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

3. Who?
• Lead front-end engineer at Bleacher Report
• 4th largest sports media site
• Nearly 20 million uniques and 500 million
page views a month
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

4. What?
Cold Aluminum Board by Yasuhiro
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

5. What?
• Ruby on Rails
• JavaScript written on top of Prototype
• Migrate to jQuery
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

6. Why?
White Boxer Puppy by Nic Adler
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

7. Why?
• Experience
• Popularity
• Simplicity
• Performance
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

8. How?
How cute can you possibly get? by Ville Miettinen
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

9. Asset packager
• Merges and compresses JavaScript into fewer
files
• Create new packages for the migration
• Prefix new packages and directories
common: redesign_common:
- prototype - redesign/jquery
- lowpro - redesign/modernizr
- effects - redesign/namespace
- dragdrop - redesign/common
- controls - redesign/tooltips
... ...
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

10. Layouts
• Combined with the view to create a response
• Create new layouts that use the new asset
packages
default.html.erb → redesign_default.html.erb
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

11. Page by page
• Migrate pages by priority
• Importance
• Simplicity
• Common functionality/code
• Switch pages to new layouts and asset
packages
• Rewrite page specific code to use jQuery and
create new asset packages for these
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

12. Clean up
• Delete unused packages in the asset
packager
• Delete JavaScript files from the deleted asset
packages
• Delete old layouts
• Rename all prefixed asset packages,
directories and layouts to defaults
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

13. Plugins
• Use existing plugins or write your own?
• Problem already solved
• Support
• Complexity/performance
• Wrap existing plugins with your own interface
• Can switch plugins or replace with your own code without
changing every usage
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

14. Plugins
• Choose a standard plugin for each solution
that should be used by everyone
• We are using three templating plugins
• Tmpl
• Tmpl2
• Mustache
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

15. Design patterns
(function() {
BR.Feature = {};
BR.Feature.publicFunction = privateFunction;
var variable = true;
$(function() {
// Run on page load
initialize();
});
function initialize() {
// Set up the feature
}
function privateFunction() {
// Can be called by other code
}
})();
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

16. Design patterns
• jQuery plugin patterns
wintoni.us/post/123029056/jquery-plugin-patterns
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

17. Tools
• Web Developer ☺
chrispederick.com/work/web-developer/
• Firebug
getfirebug.com
• Page Speed/YSlow
code.google.com/speed/page-speed/
developer.yahoo.com/yslow/
• WebPagetest
www.webpagetest.org
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

18. WebPagetest
• Waterfall view
• Optimization checklist
• Content breakdown
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

19. jQuery upgrades
• QA (even point releases)
• Identify “fragile” features/pages
• Unit tests
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

20. Selector tests
• Simple HTML page to test problematic
selectors
#link-to + ul .token-input-token:first p
#tags-1 + ul .token-input-token:eq(1) p
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

21. Questions?
Lemuren by baerchen57
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License