Migrating a 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