jQuery Migration
-
Upload
chris-pederick -
Category
Technology
-
view
837 -
download
0
description
Transcript of jQuery Migration
![Page 1: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/1.jpg)
jQuery MigrationMigrating a site to jQuery
Chris PederickYelp Learning Group 2011
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
![Page 2: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/2.jpg)
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
![Page 3: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/3.jpg)
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
![Page 4: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/4.jpg)
What?
Cold Aluminum Board by YasuhiroThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
![Page 5: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/5.jpg)
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
![Page 6: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/6.jpg)
Why?
White Boxer Puppy by Nic AdlerThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
![Page 7: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/7.jpg)
Why?
• Experience
• Popularity
• Simplicity
• Performance
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
![Page 8: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/8.jpg)
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
![Page 9: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/9.jpg)
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 ...
![Page 10: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/10.jpg)
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
![Page 11: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/11.jpg)
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
![Page 12: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/12.jpg)
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
![Page 13: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/13.jpg)
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
![Page 14: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/14.jpg)
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
![Page 15: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/15.jpg)
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
![Page 16: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/16.jpg)
Design patterns
• jQuery plugin patternswintoni.us/post/123029056/jquery-plugin-patterns
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
![Page 17: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/17.jpg)
Tools
• Web Developer ☺chrispederick.com/work/web-developer/
• Firebuggetfirebug.com
• Page Speed/YSlowcode.google.com/speed/page-speed/
developer.yahoo.com/yslow/
• WebPagetestwww.webpagetest.org
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
![Page 18: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/18.jpg)
• 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
![Page 19: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/19.jpg)
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
![Page 20: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/20.jpg)
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
![Page 21: jQuery Migration](https://reader033.fdocuments.in/reader033/viewer/2022052505/5565370cd8b42ad7648b4864/html5/thumbnails/21.jpg)
Questions?
Lemuren by baerchen57This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License