Your SlideShare is downloading. ×
jQuery Migration
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Migration

823

Published on

Migrating a site to jQuery.

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
823
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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 jQueryThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  • 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. Why? • Experience • Popularity • Simplicity • PerformanceThis 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 MiettinenThis 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.erbThis 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 theseThis 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 defaultsThis 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 usageThis 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 • MustacheThis 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-patternsThis 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.orgThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  • 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. 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. 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. Questions?Lemuren by baerchen57This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License

×