jQuery Migration

Migrating a site to jQuery.

Transcript

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 This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License common: - prototype - lowpro - effects - dragdrop - controls ... redesign_common: - redesign/jquery - redesign/modernizr - redesign/namespace - redesign/common - redesign/tooltips ...
10. Layouts • Combined with the view to create a response • Create new layouts that use the new asset packages This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License default.html.erb → redesign_default.html.erb
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. • Waterfall view • Optimization checklist • Content breakdown This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License WebPagetest
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 This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License #link-to + ul .token-input-token:first p #tags-1 + ul .token-input-token:eq(1) p
21. Questions? Lemuren by baerchen57 This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License