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.

1. Nano? Pico? Femto? Atto?
Zepto!
@thomasfuchs
(cc) 2011 Thomas Fuchs

2. “real” computer

3. Fast and stable network connection
Lots of storage
Fast, multi-core CPUs
Hardware-accelerated graphics

5. Slow & unstable network connection
Limited storage
Slow CPUs
Hardware acceleration only on iOS

6. All major JS libs
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. WebKit

11. Proprietary features

12. Adoption of features
from JavaScript
frameworks

13. Proprietary features
are awesome

14. CSS Selectors

15. document.querySelectorAll('div.awesome > p')

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
No need for external JavaScript libraries
Fast, native implementation
Returns a NodeList, not an array

19. JSON

20. JSON.stringify({
s: 'a string',
n: 123,
d: new Date
})

21. JSON.parse('{"some":"json","test":123}')

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. Array iteration

24. [1,2,3].forEach(alert);

25. [1,2,3].forEach(alert);
array with three numbers

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. [1,2,3].forEach(alert);

29. [].slice.apply(nodelist).forEach(
function(element){
alert(element.innerHTML);
}
);
Iterate through all elements found,
alerting the element’s contents

30. Array Iteration

31. Array Iteration
No more for loops required

32. Array Iteration
No more for loops required
No more for loops required

33. Array Iteration
No more for loops required
No more for loops required
No more for loops required

34. Array Iteration
No more for loops required
No more for loops required
No more for loops required
No more for loops required

35. Array Iteration
No more for 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 is not
supported or not meaningful
on mobile devices.
resizing & scrolling
orientation
fixed positioning
fonts
SVG

39. More code causes longer download
and initialization times.

40. Most of the downloaded code
isn’t even used.
(there’s no IE 6 to support on
mobile phones, lucky us)

41. A lot of the rest of the code is
duplicating features that are
directly available as native
implementations.

42. Goals for a mobile
JavaScript framework

43. Reduce code size as much as
possible to keep download and
initialization times down.

44. Easy to use API—possibly
emulating jQuery because
developers already know it.

45. Easy to extend and customize—
again, jQuery has a familiar plugin/
extension mechanism

46. Ideally, have a fallback mechanism
in case it’s run on non-WebKit
mobile browsers.

47. It’s not so important
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. Various special cases

52. Main use case $(some selector)

53. this saves ~6k of selector engine code

55. make sure dom is a JavaScript array

56. swap out the
prototype,
but leave “length”
and other properties
intact, uses the
proprietary
__proto__ property

57. Z.prototype is pointing to $.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 an array-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. m.checkers.com

68. One more thing…

69. scriptaculous

70. Prototype.js

71. jQuery

72. mootools

73. Micro-Frameworks
you/users are the rebels
—the ewoks are helping
you achieve your goals

75. Classic frameworks
Do all things 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 thing and do it really well

78. smaller than 5k, minified & gzipped

79. use directly or loosely coupled

80. Small is beautiful
easier to understand code & fork
downloads and runs faster
fewer bugs (less code!)
…and you’ll learn how
JavaScript REALLY works

81. {{ mustache }} ~ 1.5k

82. Lawnchair ~ 2.0k

83. Backbone.js ~ 3.9k

84. But how do I know
what’s out there?

85. microjs.com

86. Add your own!
github.com/madrobby/
microjs.com

87. Questions?
@thomasfuchs