zepto.js, a jquery-compatible mobile javascript framework in 2k
DESCRIPTION
TRANSCRIPT
![Page 1: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/1.jpg)
![Page 2: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/2.jpg)
![Page 3: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/3.jpg)
![Page 4: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/4.jpg)
Why not use Prototype, jQuery, etc.
Lots of code = long time to download
Caching on mobile devices is not so great
Most code is for browsers that you don’t need to support (IE6 doesn’t run on an iPhone!)
Natively supported features are duplicated,for example JSON support and animations
![Page 5: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/5.jpg)
Goals for a mobile JavaScript framework
Very small codebase
Easy to use API for common DOM tasks
Easy to extend & customize
No need to deal with browser cruft (IE6, etc)
Inlineable
![Page 6: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/6.jpg)
![Page 7: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/7.jpg)
![Page 8: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/8.jpg)
![Page 9: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/9.jpg)
http://en.wikipedia.org/wiki/Aerogel
0.002kg
2.5kg
![Page 10: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/10.jpg)
Size: ~2KjQuery-compatible API
Uses mobile WebKit features as much as possible
Easily replaceable with larger libs if your app grows
Open source (MIT license)
![Page 11: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/11.jpg)
$('p').html('test').css('color:red');
![Page 12: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/12.jpg)
get(): return array of all elements found get(0): return first element found each(callback): iterate over array of all elements found index('selector'): return an integer indicating the position of 'selector' in array of all elements found first(): remove all but the first element from the list of found elements
find('selector'): find all children/grandchildren that match the given selector closest('selector'): traverses the DOM upwards to find the first matching element next(): next siblings prev(): previous siblings is('selector'): returns true/false if first element matches the selector
remove(): remove element
html('new html'): set the contents of the element(s) append, prepend, before, after: like html, but add html to element contents (or before/after) html(): get first elements .innerHTML show(): forces elements to be displayed (only works correctly for block elements right now) hide(): removes a elements from layout
offset(): get object with top: left: width: height: properties (in px) height(): get first elements height in px width(): get first elements width in px
attr('attribute'): get element attribute attr('attribute', 'value'): set element attribute
css('css property', 'value'): set a CSS property css({ property1: value1, property2: value2 }): set multiple CSS properties css('css property'): get this CSS property of the first element
addClass('classname'): adds a CSS class name removeClass('classname'): removes a CSS class name hasClass('classname'): returns true of first element has a classname set
bind(type, function): add an event listener (see below) delegate(selector, type, function): add an event listener w/ event delegation (see below) live(type, function): add an event listener that listens to the selector for current and future elements trigger(type): triggers an event
![Page 13: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/13.jpg)
get(): return array of all elements found get(0): return first element found each(callback): iterate over array of all elements found index('selector'): return an integer indicating the position of 'selector' in array of all elements found first(): remove all but the first element from the list of found elements
find('selector'): find all children/grandchildren that match the given selector closest('selector'): traverses the DOM upwards to find the first matching element next(): next siblings prev(): previous siblings is('selector'): returns true/false if first element matches the selector
remove(): remove element
html('new html'): set the contents of the element(s) append, prepend, before, after: like html, but add html to element contents (or before/after) html(): get first elements .innerHTML show(): forces elements to be displayed (only works correctly for block elements right now) hide(): removes a elements from layout
offset(): get object with top: left: width: height: properties (in px) height(): get first elements height in px width(): get first elements width in px
attr('attribute'): get element attribute attr('attribute', 'value'): set element attribute
css('css property', 'value'): set a CSS property css({ property1: value1, property2: value2 }): set multiple CSS properties css('css property'): get this CSS property of the first element
addClass('classname'): adds a CSS class name removeClass('classname'): removes a CSS class name hasClass('classname'): returns true of first element has a classname set
bind(type, function): add an event listener (see below) delegate(selector, type, function): add an event listener w/ event delegation (see below) live(type, function): add an event listener that listens to the selector for current and future elements trigger(type): triggers an event
Basically, everything
![Page 14: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/14.jpg)
$.get(url, callback)$.post(url, callback)$.getJSON(url, callback)
$('selector').load('url'[, callback]);$('selector').load('url #fragment-selector'[, callback]);
Ajax
![Page 15: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/15.jpg)
$('some selector').tap(function(){ ... });$('some selector').doubleTap(function(){ ... });
$('some selector').swipe(function(){ ... });
Tap & Swipe
![Page 16: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/16.jpg)
Uncompresed Minified Minified & Gzipped
![Page 17: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/17.jpg)
0K
50K
100K
150K
200K180K
160K
9K
78K 87K
6K
27K27K
2K
Uncompresed Minified Minified & Gzipped
![Page 18: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/18.jpg)
0K
50K
100K
150K
200K180K
160K
9K
78K 87K
6K
27K27K
2K
Uncompresed Minified Minified & Gzipped
jQuery
![Page 19: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/19.jpg)
0K
50K
100K
150K
200K180K
160K
9K
78K 87K
6K
27K27K
2K
Uncompresed Minified Minified & Gzipped
jQueryPrototype
![Page 20: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/20.jpg)
0K
50K
100K
150K
200K180K
160K
9K
78K 87K
6K
27K27K
2K
Uncompresed Minified Minified & Gzipped
jQueryPrototype
Zepto.js
![Page 21: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/21.jpg)
Uncompresed Minified Minified & Gzipped
![Page 22: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/22.jpg)
8.788K
5.816K
2.368K
Uncompresed Minified Minified & Gzipped
![Page 23: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/23.jpg)
var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; } $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; } $.css = function(style){ this.dom.forEach(function(el){ el.style.cssText += ';'+style }); return this; }
Core implementation (simplified)
![Page 24: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/24.jpg)
var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; } $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; } $.css = function(style){ this.dom.forEach(function(el){ el.style.cssText += ';'+style }); return this; }
$(‘some CSS selector’)
![Page 25: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/25.jpg)
var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; } $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; } $.css = function(style){ this.dom.forEach(function(el){ el.style.cssText += ';'+style }); return this; }
returns a zepto.js object
![Page 26: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/26.jpg)
var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; } $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; } $.css = function(style){ this.dom.forEach(function(el){ el.style.cssText += ';'+style }); return this; }
html(‘new html’) sets the contents of one or more elements
![Page 27: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/27.jpg)
css(‘style’) sets the style of one or more elements
var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; } $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; } $.css = function(style){ this.dom.forEach(function(el){ el.style.cssText += ';'+style }); return this; }
![Page 28: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/28.jpg)
var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; }
How $() works
![Page 29: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/29.jpg)
var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; }
select elements on the page as per the user-specified CSS selector
$('p')
How $() works
![Page 30: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/30.jpg)
var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; }
return a “zepto” object
{ dom: [/* element 1, element 2, element 3, etc.*/], css: $.css, html: $.html}
How $() works
![Page 31: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/31.jpg)
(cc) http://www.flickr.com/photos/gloson/4594527045
![Page 32: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/32.jpg)
$.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; }
How a chainable function works
![Page 33: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/33.jpg)
this.dom refers to the nodes selected by the call to $
How a chainable function works
$.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; }
![Page 34: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/34.jpg)
forEach iterates over all the nodes(nodelist was converted to an array)
How a chainable function works
$.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; }
![Page 35: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/35.jpg)
set the contents of the node tosome specificed html
How a chainable function works
$.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; }
![Page 36: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/36.jpg)
return the “zepto” objectfor chaining
How a chainable function works
$.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; }
![Page 37: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/37.jpg)
Inlining FTW<!DOCTYPE html><html><head> <title>Zepto.js</title> <script> // stick all JS stuff in here </script></head><body> <p> Blah </p> <p> Blub </p> <script> $('p').html('test').css('color:red'); </script></body></html>
![Page 38: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/38.jpg)
function $$(el, selector){ return slice.call(el.querySelectorAll(selector))}
function compact(array){ return array.filter(function(el){ return el !== void 0 && el !== null })}
function $(_, context){ if(context !== void 0) return $(context).find(_); function fn(_){ return fn.dom.forEach(_), fn } fn.dom = compact((typeof _ == 'function' && 'dom' in _) ? _.dom : (_ instanceof Array ? _ : (_ instanceof Element ? [_] : $$(d, fn.selector = _)))); $.extend(fn, $.fn); return fn;}
![Page 39: Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b78e334a7959b12c8b46fa/html5/thumbnails/39.jpg)
Only targets mobile browsers
Minimalist, jQuery-ish framework
Use WebKit features as much as possible
Can be “upgraded”
Inlineable
http://zeptojs.com/