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
![Page 1: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/1.jpg)
![Page 2: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/2.jpg)
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
![Page 3: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/3.jpg)
Pixel Graphic Design Studio
Server Side Image Generation✓ Removed ImageMagick dependency
★ PHP GD
★ Optipng
✓ Icons: Precompiled
![Page 4: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/4.jpg)
Pixel Graphic Design Studio
Client Side CSS Generation✓ Use Strategies
★ Inline Style Changes $(".ui-icon").css({ ... })
★ Rule Editing
★ Style Tags $("head").append("<style ...></style>")
![Page 5: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/5.jpg)
Pixel Graphic Design Studio
Client Side CSS Generation✓ Templating/Replacement
★ Simple Tokens#aaaaaa/*{header.b}*/normal/*{font.w}*/
★ Same as server replacement
![Page 6: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/6.jpg)
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]; });
![Page 7: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/7.jpg)
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" ... ];
![Page 8: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/8.jpg)
Pixel Graphic Design Studio
Client Side CSS Generation
$("head #themeroller-stylesheet") .replaceWith( "<style type='text/css' media='screen' id='themeroller-stylesheet'>" + css + "</style>");
![Page 9: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/9.jpg)
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
![Page 10: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/10.jpg)
Pixel Graphic Design Studio
Client Side Image Generation✓ HTML5 Canvas
★ Supported Composite Modes
★ toDataURL
★ Built in PNG support
![Page 11: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/11.jpg)
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
![Page 12: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/12.jpg)
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')}
![Page 13: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/13.jpg)
http://github.com/dcneiner/html5-demo
![Page 14: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/14.jpg)
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.
![Page 15: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/15.jpg)
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
![Page 16: Themeroller 2.0: Refactoring for Speed](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c82a9c4a7959b8368b4578/html5/thumbnails/16.jpg)
@dougneiner
http://dougneiner.com
http://pixelgraphics.us
TUMBLR
WEB