themeroller 2.0: refactoring for speed
DESCRIPTION
Doug has been working on the new version of ThemeRoller for the jQuery UI site. In his talk, Doug aims to give you a peak of the code and show off some of the speed improvements that are being made. The new version of ThemeRoller is being built on top of the latest technologies like Canvas and HTML5. You will see how you can use client side technologies to reduce server load and maximize the speed of your app.TRANSCRIPT
Pixel Graphic Design Studio
New Features✓ Snow ThemeRoller
✓ Speed Improvements
★ Server Image Generation: 40 – 50x faster
★ Removed ImageMagick Dependency
★ Client Image & CSS Generation: Almost Instant Feedback
✓ JSON Structure: Nested, Overridable
✓ Updated Bookmarklet
★ More Browser Support
★ Offline Support
Pixel Graphic Design Studio
Server Side Image Generation✓ Removed ImageMagick dependency
★ PHP GD
★ Optipng
✓ Icons: Precompiled
Pixel Graphic Design Studio
Client Side CSS Generation✓ Use Strategies
★ Inline Style Changes $(".ui-icon").css({ ... })
★ Rule Editing
★ Style Tags $("head").append("<style ...></style>")
Pixel Graphic Design Studio
Client Side CSS Generation✓ Templating/Replacement
★ Simple Tokens#aaaaaa/*{header.b}*/normal/*{font.w}*/
★ Same as server replacement
Pixel Graphic Design Studio
Client Side CSS Generation
var file = $.Themeroller.CSS[version], tokens = base.to_tokens(), regex = /\s+\S+\/\*\{([^\}\*\/]+)\}\*\//gi, css = file.replace(regex, function(m,k,v){ return ' ' + tokens[k]; });
Pixel Graphic Design Studio
Client Side CSS Generation
var tokens = [ "header.bg.c" = "#fff", "header.bg.i" = "#a00", "header.bg.b" = "#00a", "header.bg.tx.repeat" = "repeat-x" ... ];
Pixel Graphic Design Studio
Client Side CSS Generation
$("head #themeroller-stylesheet") .replaceWith( "<style type='text/css' media='screen' id='themeroller-stylesheet'>" + css + "</style>");
Pixel Graphic Design Studio
Client Side Image Generation✓ New Images
★ Stamping: Take an icon template, and change the colors
★ Layering: Merge a texture with a solid color
✓ Application to CSS
★ Needed the image in a URL format
Pixel Graphic Design Studio
Client Side Image Generation✓ HTML5 Canvas
★ Supported Composite Modes
★ toDataURL
★ Built in PNG support
Pixel Graphic Design Studio
HTML5 Canvas Workflow1. Load the template image
2. Create a canvas
3. Size the canvas (Clears existing content)
4. Set the composite mode and opacity
5. Draw the template image
6. Return the dataURL
7. Add the dataURL to the CSS
Pixel Graphic Design Studio
Creating the Iconsvar canvas = document.createElement('canvas'), context = canvas.getContext('2d');
function makeImage( color ){ canvas.width = 100; canvas.height = 100;
canvas.fillStyle = color; canvas.fillRect(0, 0, 100, 100);
context.globalCompositeOperation = "destination-out"; context.drawImage(img, 0, 0);
return canvas.toDataURL('image/png')}
http://github.com/dcneiner/html5-demo
Pixel Graphic Design Studio
Fallback Support✓ Build the support on the server first
✓ Work out a clean URL strategy
✓ Use feature detection to test for Canvas support
✓ Since DataURL is a URL, you can use a real path and the base64 data interchangeably.
Pixel Graphic Design Studio
Send as Little Data as Needed✓ Send JSON, not HTML, wherever possible
✓ Provide overrides instead of full data wherever possible
★ You can override any default theme
★ Merge on the server
@dougneiner
http://dougneiner.com
http://pixelgraphics.us
TUMBLR
WEB