Pollyfills

Transcript

1. Polyfills Using modern features today Shawn Jonnet <sjonnet@gmail.com> Monday, April 16, 12
2. Overview •Polyfills / Shims •Use cases •Examples Monday, April 16, 12
3. Polyfills “Polyfills are a type of shim that retrofit legacy browsers with HTML5/CSS3 features” - Remy Sharp Monday, April 16, 12
4. Shims “Shims refer to any code that intercepts API calls and provides a layer of abstraction” - Paul Irish Monday, April 16, 12
5. Use cases •Use native capabilities if a browser does support a feature •Use fallbacks (Java applets, Flash, JS) for browsers that don't •Provide as consistent an experience as is possible Polyfills help us use today's modern features in yesterday's browsers Monday, April 16, 12
6. Examples •HTML5Shim/HTML5Shiv •respond.js •mediaelement.js •socket.io •flashcanvas •store.js / AmplifyJS Monday, April 16, 12
7. Monday, April 16, 12
8. Monday, April 16, 12
9. Note •Just because you can load a polyfill doesn't mean you should •The fastest loading page on the planet is this - about:blank :) •Each thing added to this page means more time the browser has to spend loading or processing Monday, April 16, 12
10. Remember “Degradation is your friend” “Build for the future and degrade for the past.” - Shawn Jonnet •Just because you can load a polyfill doesn't mean you should •The fastest loading page on the planet is this - about:blank :) •Each thing added to this page means more time the browser has to spend loading or processing Monday, April 16, 12
11. Loading Modules •yepnope.js (standalone, Modernizr) - Alex Sexton •LabJS - Kyle Simpson •YeahNo.js - also by Kyle There are some great script loaders that can help with conditional loading Monday, April 16, 12
12. Monday, April 16, 12
13. Performance Monday, April 16, 12
14. Utility-belt Monday, April 16, 12
15. Monday, April 16, 12
16. Each / forEach Iterates over a list of elements, yielding each in turn to an iterator function. Monday, April 16, 12
17. Map Produces a new array of values by mapping each value in list through a transformation function (iterator). Monday, April 16, 12
18. Reduce Reduce boils down a list of values into a single value. Monday, April 16, 12
19. Find Looks through each value in the list, returning the first one that passes a truth test (iterator) Monday, April 16, 12
20. Filter Looks through each value in the list, returning an array of all the values that pass a truth test (iterator). Monday, April 16, 12