Why not use Prototype, jQuery, etc.
Lots of code = long time to download
Caching on mobile devices is not so great
Most co...
Goals for a mobile
JavaScript framework
Very small codebase
Easy to use API for common DOM tasks
Easy to extend & customiz...
http://en.wikipedia.org/wiki/Aerogel
0.002kg
2.5kg
Size: ~2K
jQuery-compatible API
Uses mobile WebKit features as much as possible
Easily replaceable with larger libs if you...
$('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 ele...
get(): return array of all elements found
get(0): return first element found
each(callback): iterate over array of all ele...
$.get(url, callback)
$.post(url, callback)
$.getJSON(url, callback)
$('selector').load('url'[, callback]);
$('selector').l...
$('some selector').tap(function(){ ... });
$('some selector').doubleTap(function(){ ... });
$('some selector').swipe(funct...
Uncompresed Minified Minified & Gzipped
0K
50K
100K
150K
200K
180K
160K
9K
78K 87K
6K
27K
27K
2K
Uncompresed Minified Minified & Gzipped
0K
50K
100K
150K
200K
180K
160K
9K
78K 87K
6K
27K
27K
2K
Uncompresed Minified Minified & Gzipped
jQuery
0K
50K
100K
150K
200K
180K
160K
9K
78K 87K
6K
27K
27K
2K
Uncompresed Minified Minified & Gzipped
jQuery
Prototype
0K
50K
100K
150K
200K
180K
160K
9K
78K 87K
6K
27K
27K
2K
Uncompresed Minified Minified & Gzipped
jQuery
Prototype
Zepto.js
Uncompresed Minified Minified & Gzipped
8.788K
5.816K
2.368K
Uncompresed Minified Minified & Gzipped
var $ = function(selector){
return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)),
anim: $.anim, ...
var $ = function(selector){
return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)),
anim: $.anim, ...
var $ = function(selector){
return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)),
anim: $.anim, ...
var $ = function(selector){
return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)),
anim: $.anim, ...
css(‘style’) sets the style of
one or more elements
var $ = function(selector){
return { dom: Array.prototype.slice.apply(...
var $ = function(selector){
return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)),
anim: $.anim, ...
var $ = function(selector){
return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)),
anim: $.anim, ...
var $ = function(selector){
return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)),
anim: $.anim, ...
(cc) http://www.flickr.com/photos/gloson/4594527045
$.html = function(html){
this.dom.forEach(function(el){ el.innerHTML = html }); return this;
}
How a chainable function wo...
this.dom refers to the nodes
selected by the call to $
How a chainable function works
$.html = function(html){
this.dom.fo...
forEach iterates over all the nodes
(nodelist was converted to an array)
How a chainable function works
$.html = function(...
set the contents of the node to
some specificed html
How a chainable function works
$.html = function(html){
this.dom.forE...
return the “zepto” object
for chaining
How a chainable function works
$.html = function(html){
this.dom.forEach(function(e...
Inlining FTW
<!DOCTYPE html>
<html>
<head>
<title>Zepto.js</title>
<script>
// stick all JS stuff in here
</script>
</head...
function $$(el, selector){
return slice.call(el.querySelectorAll(selector))
}
function compact(array){
return array.filter...
Only targets mobile browsers
Minimalist, jQuery-ish framework
Use WebKit features as much as possible
Can be “upgraded”
In...
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Upcoming SlideShare
Loading in …5
×

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

114,654 views
114,472 views

Published on

Published in: Education, Technology
3 Comments
64 Likes
Statistics
Notes
No Downloads
Views
Total views
114,654
On SlideShare
0
From Embeds
0
Number of Embeds
86,846
Actions
Shares
0
Downloads
299
Comments
3
Likes
64
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. 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
  3. 3. http://en.wikipedia.org/wiki/Aerogel 0.002kg 2.5kg
  4. 4. 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)
  5. 5. $('p').html('test').css('color:red');
  6. 6. 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
  7. 7. 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
  8. 8. $.get(url, callback) $.post(url, callback) $.getJSON(url, callback) $('selector').load('url'[, callback]); $('selector').load('url #fragment-selector'[, callback]); Ajax
  9. 9. $('some selector').tap(function(){ ... }); $('some selector').doubleTap(function(){ ... }); $('some selector').swipe(function(){ ... }); Tap & Swipe
  10. 10. Uncompresed Minified Minified & Gzipped
  11. 11. 0K 50K 100K 150K 200K 180K 160K 9K 78K 87K 6K 27K 27K 2K Uncompresed Minified Minified & Gzipped
  12. 12. 0K 50K 100K 150K 200K 180K 160K 9K 78K 87K 6K 27K 27K 2K Uncompresed Minified Minified & Gzipped jQuery
  13. 13. 0K 50K 100K 150K 200K 180K 160K 9K 78K 87K 6K 27K 27K 2K Uncompresed Minified Minified & Gzipped jQuery Prototype
  14. 14. 0K 50K 100K 150K 200K 180K 160K 9K 78K 87K 6K 27K 27K 2K Uncompresed Minified Minified & Gzipped jQuery Prototype Zepto.js
  15. 15. Uncompresed Minified Minified & Gzipped
  16. 16. 8.788K 5.816K 2.368K Uncompresed Minified Minified & Gzipped
  17. 17. 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)
  18. 18. 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’)
  19. 19. 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
  20. 20. 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
  21. 21. 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; }
  22. 22. var $ = function(selector){ return { dom: Array.prototype.slice.apply(document.querySelectorAll(selector)), anim: $.anim, css: $.css, html: $.html }; } How $() works
  23. 23. 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
  24. 24. 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
  25. 25. (cc) http://www.flickr.com/photos/gloson/4594527045
  26. 26. $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; } How a chainable function works
  27. 27. 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; }
  28. 28. 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; }
  29. 29. 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; }
  30. 30. return the “zepto” object for chaining How a chainable function works $.html = function(html){ this.dom.forEach(function(el){ el.innerHTML = html }); return this; }
  31. 31. 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>
  32. 32. 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; }
  33. 33. Only targets mobile browsers Minimalist, jQuery-ish framework Use WebKit features as much as possible Can be “upgraded” Inlineable http://zeptojs.com/

×