Zepto and the rise of the JavaScript Micro-Frameworks
41 likes21,453 views
The document discusses nano and pico frameworks for mobile JavaScript development. It highlights advantages of micro-frameworks like Zepto.js over larger frameworks, including smaller file size for faster loading, using native browser features instead of duplicating functionality, and focusing on the most common use cases. The document promotes micro-frameworks for mobile as they are lightweight, modular, and optimize for key tasks on resource-constrained devices.
![[].slice.apply(nodelist)
convert to
JavaScript array
document.querySelectorAll
returns a NodeList, not an array](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/85/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-17-320.jpg)
![[1,2,3].forEach(alert);](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/85/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-24-320.jpg)
![[1,2,3].forEach(alert);
array with three numbers](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/85/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-25-320.jpg)
![[1,2,3].forEach(alert);
forEach is a native function on
arrays, taking a function argument](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/85/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-26-320.jpg)
![[1,2,3].forEach(alert);
call with window.alert
function](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/85/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-27-320.jpg)
![[1,2,3].forEach(alert);](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/85/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-28-320.jpg)
![[].slice.apply(nodelist).forEach(
function(element){
alert(element.innerHTML);
}
);
Iterate through all elements found,
alerting the element’s contents](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/85/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-29-320.jpg)
Zepto and the rise of the JavaScript Micro-Frameworks
- 1. Nano? Pico? Femto? Atto? Zepto! @thomasfuchs (cc) 2011 Thomas Fuchs
- 3. Fast and stable network connection Lots of storage Fast, multi-core CPUs Hardware-accelerated graphics
- 5. Slow & unstable network connection Limited storage Slow CPUs Hardware acceleration only on iOS
- 6. All major JS libs where created before phones had web browsers to write home about.
- 8. Don’t use something because it’s popular. Use stuff because it’s the right tool for the job.
- 10. WebKit
- 12. Adoption of features from JavaScript frameworks
- 13. Proprietary features are awesome
- 14. CSS Selectors
- 16. full featured CSS3 selectors // select all li elements with both "just" and "testing" classnames document.querySelectorAll('li.just.testing') // how many paragraphs? document.querySelectorAll('p').length // select even paragraphs document.querySelectorAll('p:nth-child(2n+1)')
- 17. [].slice.apply(nodelist) convert to JavaScript array document.querySelectorAll returns a NodeList, not an array
- 18. querySelectorAll Full-featured CSS selectors No need for external JavaScript libraries Fast, native implementation Returns a NodeList, not an array
- 19. JSON
- 20. JSON.stringify({ s: 'a string', n: 123, d: new Date })
- 22. Native JSON Parsing JSON (convert to JS object) Serializing JS objects to JSON Fast, native implementation No problem with security of “eval” as in some JavaScript-based implementations
- 23. Array iteration
- 25. [1,2,3].forEach(alert); array with three numbers
- 26. [1,2,3].forEach(alert); forEach is a native function on arrays, taking a function argument
- 27. [1,2,3].forEach(alert); call with window.alert function
- 29. [].slice.apply(nodelist).forEach( function(element){ alert(element.innerHTML); } ); Iterate through all elements found, alerting the element’s contents
- 30. Array Iteration
- 31. Array Iteration No more for loops required
- 32. Array Iteration No more for loops required No more for loops required
- 33. Array Iteration No more for loops required No more for loops required No more for loops required
- 34. Array Iteration No more for loops required No more for loops required No more for loops required No more for loops required
- 35. Array Iteration No more for loops required No more for loops required No more for loops required No more for loops required No more for loops required
- 36. Mobile JavaScript framework?
- 37. Why not use Prototype, jQuery or other frameworks?
- 38. Some functionality is not supported or not meaningful on mobile devices. resizing & scrolling orientation fixed positioning fonts SVG
- 39. More code causes longer download and initialization times.
- 40. Most of the downloaded code isn’t even used. (there’s no IE 6 to support on mobile phones, lucky us)
- 41. A lot of the rest of the code is duplicating features that are directly available as native implementations.
- 42. Goals for a mobile JavaScript framework
- 43. Reduce code size as much as possible to keep download and initialization times down.
- 44. Easy to use API—possibly emulating jQuery because developers already know it.
- 45. Easy to extend and customize— again, jQuery has a familiar plugin/ extension mechanism
- 46. Ideally, have a fallback mechanism in case it’s run on non-WebKit mobile browsers.
- 47. It’s not so important what’s there, but what’s not there.
- 48. Meet zepto.js http://github.com/madrobby/zepto Target size: 5K jQuery-compatible API Uses mobile WebKit features whenever possible Easily replaceable with jQuery proper if needed Doesn’t cover all of jQuery (but lots of it!)
- 49. 31.33K 4.83K Zepto (master) jQuery 1.6
- 52. Main use case $(some selector)
- 53. this saves ~6k of selector engine code
- 55. make sure dom is a JavaScript array
- 56. swap out the prototype, but leave “length” and other properties intact, uses the proprietary __proto__ property
- 57. Z.prototype is pointing to $.fn which holds all methods that are used on found elements
- 58. Reusing array methods, works because we have an array-like object
- 59. this is an array-like of resulting nodes and a Zepto object at the same time
- 60. insertAdjacentElement is IE- proprietary, but supported by WebKit (doesn’t work on Firefox!)
- 61. Zepto.js http://github.com/madrobby/zepto CSS Selectors and DOM manipulation Ajax including x-domain JSONP Events (including touch events) Polyfills and bug fixes for older WebKits Modular (can leave out events, xhr, etc.) WebKit only! (with focus on mobile)
- 64. /
- 65. m.checkers.com
- 68. One more thing…
- 69. scriptaculous
- 70. Prototype.js
- 71. jQuery
- 72. mootools
- 73. Micro-Frameworks you/users are the rebels —the ewoks are helping you achieve your goals
- 75. Classic frameworks Do all things and do it ok-ish Force you into an API Not modular/not modular enough 25k+ minified & gzipped Many extensions are now available in the DOM or JavaScript
- 76. Micro-Frameworks (are awesome!)
- 77. do one thing and do it really well
- 78. smaller than 5k, minified & gzipped
- 79. use directly or loosely coupled
- 80. Small is beautiful easier to understand code & fork downloads and runs faster fewer bugs (less code!) …and you’ll learn how JavaScript REALLY works
- 81. {{ mustache }} ~ 1.5k
- 82. Lawnchair ~ 2.0k
- 84. But how do I know what’s out there?
- 85. microjs.com
- 86. Add your own! github.com/madrobby/ microjs.com