Upload
chris-pederick
View
839
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Migrating a site to jQuery.
Citation preview
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
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
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
What?
Cold Aluminum Board by YasuhiroThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
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
Why?
White Boxer Puppy by Nic AdlerThis presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
Why?
• Experience
• Popularity
• Simplicity
• Performance
This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
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
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 ...
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 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
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
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
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
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
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
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
• 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
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
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
Questions?
Lemuren by baerchen57This presentation is distributed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License