zepto and the rise of the javascript micro-frameworks
DESCRIPTION
Here are my slides from JSConf 2011 in Portland, Oregon. I was talking about Zepto, my micro-framework, WebKit-only (works on Firefox too, though) clone of the jQuery API, and why I think that Micro-Frameworks and Micro-Libraries are better suited for the mobile Web than traditional, monolithic libraries, like script.aculo.us, Prototype or jQuery. (A video of the talk is forthcoming and will be announced on my blog, http://mir.aculo.us).TRANSCRIPT
![Page 1: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/1.jpg)
Nano? Pico? Femto? Atto?
Zepto!@thomasfuchs
(cc) 2011 Thomas Fuchs
![Page 2: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/2.jpg)
“real” computer
![Page 3: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/3.jpg)
Fast and stable network connection
Lots of storage
Fast, multi-core CPUs
Hardware-accelerated graphics
![Page 4: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/4.jpg)
![Page 5: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/5.jpg)
Slow & unstable network connection
Limited storage
Slow CPUs
Hardware acceleration only on iOS
![Page 6: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/6.jpg)
All major JS libs where created
before phones had web browsers to
write home about.
![Page 7: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/7.jpg)
![Page 8: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/8.jpg)
Don’t use something because it’s popular.
Use stuff because it’s the right tool for the job.
![Page 9: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/9.jpg)
![Page 10: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/10.jpg)
WebKit
![Page 11: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/11.jpg)
Proprietary features
![Page 12: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/12.jpg)
Adoption of features from JavaScript
frameworks
![Page 13: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/13.jpg)
Proprietary featuresare awesome
![Page 14: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/14.jpg)
CSS Selectors
![Page 15: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/15.jpg)
document.querySelectorAll('div.awesome > p')
![Page 16: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/16.jpg)
full featured CSS3 selectors
// select all li elements with both "just" and "testing" classnamesdocument.querySelectorAll('li.just.testing')
// how many paragraphs?document.querySelectorAll('p').length // select even paragraphsdocument.querySelectorAll('p:nth-child(2n+1)')
![Page 17: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/17.jpg)
document.querySelectorAll returns a NodeList, not an array
[].slice.apply(nodelist)
convert to JavaScript array
![Page 18: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/18.jpg)
querySelectorAll
Fast, native implementation
Returns a NodeList, not an array
Full-featured CSS selectors
No need for external JavaScript libraries
![Page 19: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/19.jpg)
JSON
![Page 20: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/20.jpg)
JSON.stringify({ s: 'a string', n: 123, d: new Date })
![Page 21: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/21.jpg)
JSON.parse('{"some":"json","test":123}')
![Page 22: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/22.jpg)
Native JSON
Fast, native implementation
Parsing JSON (convert to JS object)
Serializing JS objects to JSON
No problem with security of “eval” as in some JavaScript-based implementations
![Page 23: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/23.jpg)
Array iteration
![Page 24: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/24.jpg)
[1,2,3].forEach(alert);
![Page 25: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/25.jpg)
[1,2,3].forEach(alert);
array with three numbers
![Page 26: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/26.jpg)
[1,2,3].forEach(alert);
forEach is a native function on arrays, taking a function argument
![Page 27: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/27.jpg)
[1,2,3].forEach(alert);
call with window.alert function
![Page 28: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/28.jpg)
[1,2,3].forEach(alert);
![Page 29: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/29.jpg)
Iterate through all elements found,alerting the element’s contents
[].slice.apply(nodelist).forEach( function(element){ alert(element.innerHTML); });
![Page 30: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/30.jpg)
Array Iteration
![Page 31: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/31.jpg)
No more for loops required
Array Iteration
![Page 32: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/32.jpg)
No more for loops required
Array Iteration
No more for loops required
![Page 33: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/33.jpg)
No more for loops required
Array Iteration
No more for loops required
No more for loops required
![Page 34: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/34.jpg)
No more for loops required
Array Iteration
No more for loops required
No more for loops required
No more for loops required
![Page 35: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/35.jpg)
No more for loops required
Array Iteration
No more for loops required
No more for loops required
No more for loops required
No more for loops required
![Page 36: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/36.jpg)
Mobile JavaScript framework?
![Page 37: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/37.jpg)
Why not use Prototype, jQuery or other frameworks?
![Page 38: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/38.jpg)
Some functionality is not supported or not meaningful
on mobile devices.
resizing & scrollingorientationfixed positioningfontsSVG
![Page 39: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/39.jpg)
More code causes longer download and initialization times.
![Page 40: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/40.jpg)
Most of the downloaded code isn’t even used.
(there’s no IE 6 to support on mobile phones, lucky us)
![Page 41: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/41.jpg)
A lot of the rest of the code is duplicating features that are directly available as native
implementations.
![Page 42: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/42.jpg)
Goals for a mobile JavaScript framework
![Page 43: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/43.jpg)
Reduce code size as much as possible to keep download and
initialization times down.
![Page 44: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/44.jpg)
Easy to use API—possibly emulating jQuery because
developers already know it.
![Page 45: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/45.jpg)
Easy to extend and customize—again, jQuery has a familiar plugin/
extension mechanism
![Page 46: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/46.jpg)
Ideally, have a fallback mechanismin case it’s run on non-WebKit
mobile browsers.
![Page 47: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/47.jpg)
It’s not so important what’s there, but what’s not there.
![Page 48: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/48.jpg)
Meet zepto.jshttp://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!)
![Page 49: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/49.jpg)
31.33K
4.83K
jQuery 1.6 Zepto (master)
![Page 50: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/50.jpg)
![Page 51: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/51.jpg)
Various special cases
![Page 52: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/52.jpg)
Main use case $(some selector)
![Page 53: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/53.jpg)
this saves ~6k of selector engine code
![Page 54: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/54.jpg)
![Page 55: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/55.jpg)
make sure dom is a JavaScript array
![Page 56: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/56.jpg)
swap out the prototype,
but leave “length” and other properties
intact, uses the proprietary
__proto__ property
![Page 57: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/57.jpg)
Z.prototype is pointing to $.fn which holds all methods that are used on found elements
![Page 58: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/58.jpg)
Reusing array methods, works because we have an array-like object
![Page 59: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/59.jpg)
this is an array-like of resulting nodes and a Zepto object at the same time
![Page 60: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/60.jpg)
insertAdjacentElement is IE-proprietary, but supported by WebKit
(doesn’t work on Firefox!)
![Page 61: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/61.jpg)
Zepto.jshttp://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)
![Page 62: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/62.jpg)
![Page 63: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/63.jpg)
![Page 64: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/64.jpg)
/
![Page 65: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/65.jpg)
m.checkers.com
![Page 66: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/66.jpg)
![Page 67: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/67.jpg)
![Page 68: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/68.jpg)
One more thing…
![Page 69: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/69.jpg)
scriptaculous
![Page 70: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/70.jpg)
Prototype.js
![Page 71: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/71.jpg)
jQuery
![Page 72: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/72.jpg)
mootools
![Page 73: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/73.jpg)
you/users are the rebels—the ewoks are helping you achieve your goals
Micro-Frameworks
![Page 74: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/74.jpg)
![Page 75: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/75.jpg)
Classic frameworks
25k+ minified & gzipped
Do all things and do it ok-ish
Many extensions are now availablein the DOM or JavaScript
Force you into an API
Not modular/not modular enough
![Page 76: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/76.jpg)
Micro-Frameworks(are awesome!)
![Page 77: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/77.jpg)
do one thing and do it really well
![Page 78: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/78.jpg)
smaller than 5k, minified & gzipped
![Page 79: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/79.jpg)
use directly or loosely coupled
![Page 80: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/80.jpg)
Small is beautiful
downloads and runs faster
easier to understand code & fork
fewer bugs (less code!)
…and you’ll learn how JavaScript REALLY works
![Page 81: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/81.jpg)
{{ mustache }} ~ 1.5k
![Page 82: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/82.jpg)
Lawnchair ~ 2.0k
![Page 83: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/83.jpg)
Backbone.js ~ 3.9k
![Page 84: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/84.jpg)
But how do I know what’s out there?
![Page 85: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/85.jpg)
microjs.com
![Page 86: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/86.jpg)
github.com/madrobby/microjs.com
Add your own!
![Page 87: Zepto and the rise of the JavaScript Micro-Frameworks](https://reader031.vdocuments.us/reader031/viewer/2022020105/554f628db4c905c8088b4b34/html5/thumbnails/87.jpg)
Questions?@thomasfuchs