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