Download as PDF, PPTX
![[].slice.apply(nodelist)
convert to
JavaScript array
document.querySelectorAll
returns a NodeList, not an array](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/75/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-17-2048.jpg)
![[1,2,3].forEach(alert);](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/75/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-24-2048.jpg)
![[1,2,3].forEach(alert);
array with three numbers](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/75/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-25-2048.jpg)
![[1,2,3].forEach(alert);
forEach is a native function on
arrays, taking a function argument](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/75/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-26-2048.jpg)
![[1,2,3].forEach(alert);
call with window.alert
function](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/75/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-27-2048.jpg)
![[1,2,3].forEach(alert);](https://image.slidesharecdn.com/zepto-110506095625-phpapp02/75/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-28-2048.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/75/Zepto-and-the-rise-of-the-JavaScript-Micro-Frameworks-29-2048.jpg)
Uploaded byThomas Fuchs
Zepto and the rise of the JavaScript Micro-Frameworks
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.
More Related Content
![[143]Inside fuse deview 2016](https://cdn.slidesharecdn.com/ss_thumbnails/insidefuse-deview2016-161023163118-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Zepto and the rise of the JavaScript Micro-Frameworks
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Zepto and the rise of the JavaScript Micro-Frameworks
- 1. Nano? Pico? Femto?Atto? Zepto! @thomasfuchs (cc) 2011 Thomas Fuchs
- 2.
- 3. Fast and stablenetwork connection Lots of storage Fast, multi-core CPUs Hardware-accelerated graphics
- 5. Slow & unstablenetwork connection Limited storage Slow CPUs Hardware acceleration only on iOS
- 6. All major JSlibs 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.
- 11.
- 12. Adoption of features from JavaScript frameworks
- 13. Proprietary features are awesome
- 14.
- 15.
- 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 Noneed for external JavaScript libraries Fast, native implementation Returns a NodeList, not an array
- 19.
- 20. JSON.stringify({ s: 'a string', n: 123, d: new Date })
- 21.
- 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.
- 24.
- 25.
- 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
- 28.
- 29. [].slice.apply(nodelist).forEach( function(element){ alert(element.innerHTML); } ); Iterate through all elements found, alerting the element’s contents
- 30.
- 31. Array Iteration No morefor loops required
- 32. Array Iteration No morefor loops required No more for loops required
- 33. Array Iteration No morefor loops required No more for loops required No more for loops required
- 34. Array Iteration No morefor loops required No more for loops required No more for loops required No more for loops required
- 35. Array Iteration No morefor 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 isnot supported or not meaningful on mobile devices. resizing & scrolling orientation fixed positioning fonts SVG
- 39. More code causeslonger download and initialization times.
- 40. Most of thedownloaded code isn’t even used. (there’s no IE 6 to support on mobile phones, lucky us)
- 41. A lot ofthe rest of the code is duplicating features that are directly available as native implementations.
- 42. Goals for amobile JavaScript framework
- 43. Reduce code sizeas much as possible to keep download and initialization times down.
- 44. Easy to useAPI—possibly emulating jQuery because developers already know it.
- 45. Easy to extendand customize— again, jQuery has a familiar plugin/ extension mechanism
- 46. Ideally, have afallback mechanism in case it’s run on non-WebKit mobile browsers.
- 47. It’s not soimportant 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
- 51.
- 52. Main use case$(some selector)
- 53. this saves ~6kof selector engine code
- 55. make sure domis a JavaScript array
- 56. swap out the prototype, but leave “length” and other properties intact, uses the proprietary __proto__ property
- 57. Z.prototype is pointingto $.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 anarray-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.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73. Micro-Frameworks you/users are the rebels —the ewoks are helping you achieve your goals
- 75. Classic frameworks Do allthings 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 thingand do it really well
- 78. smaller than 5k,minified & gzipped
- 79. use directly orloosely coupled
- 80. Small is beautiful easierto understand code & fork downloads and runs faster fewer bugs (less code!) …and you’ll learn how JavaScript REALLY works
- 81. {{ mustache }}~ 1.5k
- 82.
- 83.
- 84. But how doI know what’s out there?
- 85.
- 86. Add your own! github.com/madrobby/ microjs.com
- 87.