Pancake/JavaScript Framework Research

Notes on JavaScript library decisions for Pancake. Related to https://bugzilla.mozilla.org/show_bug.cgi?id=707269

We want to move away from using jQuery as our core utilities library:

• Lots of legacy-browser baggage (for example, no need for Sizzle, since we're targeting mobile/modern platforms)
• Too self-referential/bundled -- want to move to a clearer module-based approach.

Really what we want covered is:

• Dom access via CSS Queries (querySelectorAll)
• DOM manipulation
  • Modify classes
  • Get/set attributes
  • Etc...
• AJAX API wrapper for XHR
• Events
  • Ideally, we want to be able to fire events on any object type -- not just DOM element objects.
• Animation helper that uses CSS transitions

Summary: going with Zepto.js. While it's all in a lump, it's pretty small and the jQuery-compatible API is a win. Ender's component modules have some bugs right now that we don't want to deal with.

Options

Zepto.js by Thomas Fuchs (Scriptaculous). ~20k.

Doesn't look like it supports AMD out of the box. We're going to have to AMD-wrap the library ourselves. Fuchs has no interest in adding AMD support https://github.com/madrobby/zepto/pull/342

Advantages:

• No legacy baggage
• Touch/Swipe events
• CSS Animation
• Very jQuery-like. jQuery-compatible API -- not every method is there, but the ones that are act the same way

Disadvantages:

• Not modular
• Can't easily add to it
• (Probably) can't fire events on non-DOM objects.

Ender.js with Jeesh by Ded (Twitter.com). Kind of a package-manager approach to building your own framework from microframeworks. ~20k.

Running into some issues with the individual modules that makeup ender, e.g. https://github.com/ded/bonzo/issues/32.

We would remove Qwery, which is a selector engine targeting legacy browsers that don't support document.querySelectorAll and use qwery-mobile.

Interesting -- the main modules in Ender support AMD, but it looks like Ender (the $ API glue) does not. http://www.dustindiaz.com/sandboxing-javascript, https://github.com/ender-js/Ender/pull/65 and https://github.com/ender-js/Ender/issues/99.

Advantages:

• Easily pluggable query API (sub in our own engine if needed).
• jQuery-like
• No legacy baggage.
• Based on stand-alone microframeworks
  • Modular -- we could use AMD/require.js instead of building with Ender.
  • Allows you to add/remove whatever you don't need.
• Swipe events through https://github.com/paulstraw/ender-poke. Cool and expressive N-S-E-W swipe definitions.
  • Blech - requires Qwery: would need to fork.
• Bean (event library) allows firing events on DOM or standard objects. Big win.
• Ender has a Zepto-like wrapper for DOM selector querying that picks the fastest thing -- e.g. getElementByID for ID queries, getElementsByClassname for classname queries, querySelectorAll for everything else.

Gestures and Events

The iPhone exposes the following multitouch events to the DOM:

Touch (one finger):

• OnTouchStart
• OnTouchEnd
• OnTouchMove (can be turned into swipe)

Gestures (2 finger):

• OnGesture

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

http://www.html5rocks.com/en/mobile/touch.html

Might be worth cherry-picking this code from Zepto's helper utilities. While swipeLeft/swipeDown, etc isn't very expressive, it does cover the basics.