Micro Frameworks for Mobile Web Apps

What is a Micro Framework?

Basically, it is a small bit of JavaScript that does one thing really well

hopefully

Why Use Micro-Frameworks?

• Solve a specific problem without needing to pull in large chunks of code that will never be used.
• Less JavaScript, means faster downloads.
• Easy to understand.
• Easy to integrate.

Perceived Problem: Mobile Web Apps are Slow

Did you know that mobile browsers will wait 300ms from the time that you tap the button to fire the click event.

The reason for this is that the browser is waiting to see if you are actually performing a double tap.

Proposed Solution: FastClick

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

Normal: 21.8 kb
Minified: 13.9 kb
Compressed: 2.2 kb

FastClick

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);
					

Speaking of touch events...

Perceived Problem: Touch Events are Hard

Well maybe not hard but definitely more difficult than they need to be. For instance in order to detect a "swipe left" gesture you'll have to listen to and react to the "touchstart", "touchmove" and "touchend" events.

You can touch this!

Proposed Solution: Hammer.js

Hammer supports Tap, DoubleTap, Swipe, Drag, Pinch, and Rotate gestures. Each gesture triggers useful events and eventData.

Normal: 47.2 kb
Minified: 12.5 kb
Compressed: 3.0 kb

Hammer.js

Hammer(el).on("swipeleft", function() {
    alert('you swiped left!');
});
					

Perceived Problem: jQuery

jQuery is a great cross platorm library but how many of you actually use all of it?

When you are developing a mobile web app do you really need jQuery to smooth over browser inconsistencies when most mobile OS have webkit based browsers?

Normal: 246 kb
Minified: 86 kb
Compressed: 29.2 kb

Proposed Solution: JavaScript

DOM Selector

// jQuery 
var n = $("article#first p.summary");

// JavaScript
var n = document.querySelectorAll("article#first p.summary");
					

DOM Manipulation

// jQuery 
$("#container").append("
more content
");

// JavaScript
document.getElementById("container").innerHTML += "
more content
";
					

Class Manipulation

// jQuery 
$('body').addClass('hasJS');
$('body').removeClass('hasJS');

// JavaScript
document.body.classList.add('hasJS');
document.body.classList.remove('hasJS');
					

Event Listeners

// jQuery 
$('#somelink').on('touchstart', handleTouch);

// JavaScript
var el = document.getElementById('somelink');
el.addEventListener("touchstart", handleTouch);
					

In conclusion

If you only ever use jQuery for DOM selection consider replacing it with:

var $ = document.querySelectorAll.bind(document);

					

You may also want to take a look at Remy Sharp's min.js which provides a jQuery syntax for query selection and events.

THE END