jQuery Migration   Migrating a site to jQuery   Chris Pederick   Yelp Learning Group 2011This presentation is distributed ...
Who?Eastern Screetch Owl by t.davis photogrpahyThis presentation is distributed under the terms of the Creative Commons At...
Who?       • Lead front-end engineer at Bleacher Report       • 4th largest sports media site       • Nearly 20 million un...
What? Cold Aluminum Board by Yasuhiro This presentation is distributed under the terms of the Creative Commons Attribution...
What?       • Ruby on Rails       • JavaScript written on top of Prototype       • Migrate to jQueryThis presentation is d...
Why?White Boxer Puppy by Nic AdlerThis presentation is distributed under the terms of the Creative Commons Attribution-Non...
Why?       •       Experience       •       Popularity       •       Simplicity       •       PerformanceThis presentation...
How?How cute can you possibly get? by Ville MiettinenThis presentation is distributed under the terms of the Creative Comm...
Asset packager       • Merges and compresses JavaScript into fewer               files       • Create new packages for the ...
Layouts       • Combined with the view to create a response       • Create new layouts that use the new asset             ...
Page by page       • Migrate pages by priority                    •       Importance                    •       Simplicity...
Clean up       • Delete unused packages in the asset               packager       • Delete JavaScript files from the delete...
Plugins       • Use existing plugins or write your own?                    •       Problem already solved                 ...
Plugins       • Choose a standard plugin for each solution               that should be used by everyone       • We are us...
Design patterns       (function() {         BR.Feature                = {};         BR.Feature.publicFunction = privateFun...
Design patterns       • jQuery plugin patterns               wintoni.us/post/123029056/jquery-plugin-patternsThis presenta...
Tools       • Web Developer ☺               chrispederick.com/work/web-developer/       • Firebug               getfirebug....
WebPagetest• Waterfall view• Optimization checklist• Content breakdownThis presentation is distributed under the terms of ...
jQuery upgrades       • QA (even point releases)       • Identify “fragile” features/pages       • Unit testsThis presenta...
Selector tests       • Simple HTML page to test problematic               selectors        #link-to + ul .token-input-toke...
Questions?Lemuren by baerchen57This presentation is distributed under the terms of the Creative Commons Attribution-Noncom...
Upcoming SlideShare
Loading in...5
×

jQuery Migration

847

Published on

Migrating a site to jQuery.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
847
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Migration

  1. 1. jQuery Migration Migrating a site to jQuery Chris Pederick Yelp Learning Group 2011This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  2. 2. Who?Eastern Screetch Owl by t.davis photogrpahyThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  3. 3. Who? • Lead front-end engineer at Bleacher Report • 4th largest sports media site • Nearly 20 million uniques and 500 million page views a monthThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  4. 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. 5. What? • Ruby on Rails • JavaScript written on top of Prototype • Migrate to jQueryThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  6. 6. Why?White Boxer Puppy by Nic AdlerThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  7. 7. Why? • Experience • Popularity • Simplicity • PerformanceThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  8. 8. How?How cute can you possibly get? by Ville MiettinenThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  9. 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. 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.erbThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  11. 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 theseThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  12. 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 defaultsThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  13. 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 usageThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  14. 14. Plugins • Choose a standard plugin for each solution that should be used by everyone • We are using three templating plugins • Tmpl • Tmpl2 • MustacheThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  15. 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. 16. Design patterns • jQuery plugin patterns wintoni.us/post/123029056/jquery-plugin-patternsThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  17. 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.orgThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  18. 18. WebPagetest• Waterfall view• Optimization checklist• Content breakdownThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  19. 19. jQuery upgrades • QA (even point releases) • Identify “fragile” features/pages • Unit testsThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  20. 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) pThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  21. 21. Questions?Lemuren by baerchen57This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×