Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K

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

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

2.5kg 0.002kg http://en.wikipedia.org/wiki/Aerogel

Size: ~2K jQuery-compatible API Uses mobile WebKit features as much as possible Easily replaceable with larger libs if your app grows Open source (MIT license)

$('p').html('test').css('color:red');

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

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) Basically, everything 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

Ajax $.get(url, callback) $.post(url, callback) $.getJSON(url, callback) $('selector').load('url'[, callback]); $('selector').load('url #fragment-selector'[, callback]);

Tap & Swipe $('some selector').tap(function(){ ... }); $('some selector').doubleTap(function(){ ... }); $('some selector').swipe(function(){ ... });

Uncompresed Minified Minified & Gzipped

Uncompresed Minified Minified & Gzipped 200K 180K 160K 150K 87K 100K 78K 27K 50K 27K 9K 6K 0K 2K

Uncompresed Minified Minified & Gzipped 200K 180K 160K 150K 87K 100K 78K 27K 50K 27K 9K 6K jQuery 2K 0K

Uncompresed Minified Minified & Gzipped 200K 180K 160K 150K 87K 100K 78K 27K 50K 27K 9K 6K jQuery 2K 0K Prototype

Uncompresed Minified Minified & Gzipped 200K 180K 160K 150K 87K 100K 78K 27K 50K 27K 9K 6K jQuery 2K 0K Prototype Zepto.js

Uncompresed Minified Minified & Gzipped

8.788K 5.816K 2.368K Uncompresed Minified Minified & Gzipped

$(‘some CSS selector’) 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 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; }

How $() works var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; }

How $() works select elements on the page as per the user-specified CSS selector var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; } $('p')

How $() works 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 }

(cc) http://www.flickr.com/photos/gloson/4594527045

How a chainable function works $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; }

How a chainable function works $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; } 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; } 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; } set the contents of the node to some specificed html

How a chainable function works $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; } return the “zepto” object for chaining

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>

Minimalist, jQuery-ish framework Use WebKit features as much as possible Only targets mobile browsers Can be “upgraded” Inlineable http://zeptojs.com/

http://mir.aculo.us	77405
http://phpspot.org	2559
http://mobilejavascript.com	877
http://blog.dreamcss.com	638
http://www.balam.in	476
http://www.lije-creative.com	385
http://mtnconcept.com	244
http://ngio.co.kr	241
http://free-tools.fr	146
http://www.madrasgeek.com	110
http://thinkrooms.tumblr.com	106
http://mobilejavascript.wordpress.com	58
http://www.andrew.planet.ee	57
http://www.tjfr.nl	35
http://translate.googleusercontent.com	34
http://churchm.ag	25
http://balam.in	23
http://andrew.planet.ee	22
http://tutslist.com	20
http://churchco.de	19
http://techmark.tumblr.com	16
http://www.ngio.co.kr	16
http://francescoagati.wordpress.com	14
http://posts.swbratcher.com	13
http://paper.li	12
http://www11.atpages.jp	10
http://webcache.googleusercontent.com	10
http://sns.labs.fujitsu.com	10
http://lanyrd.com	9
http://scraps.hecticjeff.net	5
http://wiki.ngio.co.kr	5
http://0xff0000.blogspot.com	5
http://passing.tk	4
http://us-w1.rockmelt.com	2
http://beta.lije-creative.com	2
http://static.slidesharecdn.com	2
https://krittproxy.appspot.com	2
http://tumblr.hecticjeff.net	2
https://p.yammer.com	2
http://twitter.com	2
http://www.swbratcher.com	2
http://www.tutslist.com	2
http://azurf.com	2
http://entwickler.com	1
https://si0.twimg.com	1
http://safe.tumblr.com	1
http://mir.aculo.us.sixxs.org	1
http://soup.mabe.at	1
http://tcbs17.cafe24.com	1
http://scripty2.soup.io	1
http://blog.siesqo.be	1

Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K

by Thomas Fuchs

Accessibility

Categories

Upload Details

Usage Rights

64 Embeds 83,650

Statistics

Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K Presentation Transcript