JsMag - the magazine for JavaScript developers

News roundup: iOS Orientationchange Fix, JavaScript Patterns, jQ.Mobi

Posted on January 20, 2012, 12:19 pm, by David Calhoun, under News.

Listen to this week’s podcast (January 20, 2012)!

iOS Orientationchange Fix

jQuery Mobile’s Scott Jehl has released iOS-Orientationchange-Fix (read his blog post). This has been a persistent annoyance on iOS since its release. You may be familiar with the mobile viewport tag, which allows you to properly fit sites to fill the screen and be sized appropriately (think of the mobile viewport as a sort of magnifying glass that can be zoomed in or out). The problem is that on iOS, rotating the screen screws around with the viewport, leaving the user zoomed-in when they rotate into landscape mode, for instance.

The easiest fix has been to forcibly constrict the min/max values of the viewport to 1 and disable the user pinch-zooming (all of these things can be specified with parameters in the viewport tag). But that’s no good, because now we can’t zoom in on things.

Another attempt at a soluton was by Shi Chuan, who tried taking advantage of iOS gesture events to dynamically change the viewport tag when the user pinch-zoomed.

This latest attempt by Scott Jehl cleverly taps into the device’s gyroscope, which tracks changes in the device’s orientation (not to be confused with the accelerometer, which tracks changes in motion). In JavaScript land this is the deviceorientation event. This is getting fired off constantly, checking for when the user is rotating the device, in the hopes that we can fire off some code before the orientationchange event gets fired. This code checks orientation and then dynamically changes to viewport tag to prevent viewport zooming. After the orientation changes, the code re-enables zooming for the benefit of the user. Whoo!

My only concern here is that the deviceorientation event gets fired off constantly, which is a potential memory hog and battery drain. It would be better to put the function call in a setTimeout (borrowing a performance pattern from window resize and scroll events), but I suppose the danger is that if the user rotated too fast, the function would never get fired.

One last thought on this – from my iOS app developer friends, I’ve heard that app developers get access to more events, such as events that fire before, during and after device orientation events. Other than Apple fixing the zooming issue themselves, that would be the next best thing, and would give us web developers a lot more goodies to use in other applications.

So, Apple, how about a beforeorientationchange event, eh?

JavaScript Patterns

Shi Chuan, of Mobile HTML5 Boilerplate fame, has compiled JavaScript Patterns, a set of best practices in JavaScript, culled together from a variety of articles and books. Most entries follow the helpful approach of showing the antipattern first (what not to do), followed by the right way to do it.

As with any explanations that are boiled down and simplified, some of the meaning and the details may get lost, so Shi has made sure to include a link to the original source where he could. The last thing we in the JavaScript community want is for these things to become dogma without any justification!

It looks like Shi is also starting a series of JS Patterns posts on his blog, going into more details about he patterns, so be sure to follow up there!

jQ.Mobi

jq.Mobi (by appMobi) is another new mobile framework targeted at iOS and Android specifically. It jumped on the jQuery-is-too-bloated bandwagon and asserts that it can do things better, smaller, faster, while retaining the familiar jQuery-like API everyone’s so familiar with already.

Wait, doesn’t this sound familiar? What about zepto.js? jq.Mobi insists that it can do things better than both jQuery and zepto.js. What do we say to that? Jsperf or it didn’t happen!

To be fair, jQ.Mobi does beat both jQuery and zepto.js in the main jsperf test they link to. But a closer look reveals that this is only a test of a DOM append method, something that is necessary but not sufficient for a fair comparison between the frameworks. I can’t find references to any other tests that were run – I want to be charitable, but as far as I can tell, the speed of the entire framework is based on a test of only one method in the library.

Tweaking the jsperf URL, we can see that there’s two previous iterations of tests, jqm1 and jqm2. Unfortunately, the latter test looks to still be in development, and the former is an earlier version of the append test before optimizations were made to the framework.

There’s been a lot of development on both jQuery and zepto.js at this point, and it’s easier to chuck them both out and start from scratch (see NIH), so I think it’s fair to remain skeptical on this one until we see more exhaustive performance comparisons. In terms of filesize, jQ.Mobi is very trim, so it has the advantage of filesize at this point, so at least it has that going for it. In terms of performance, I’ll stay skeptical at this point, although it would be certainly be awesome to see some true alternatives to the other big libraries out there!

(side note: there’s also some controversy brewing over the naming of the library, if you like geek drama)

Tidbits

Nokia Maps 3D WebGL is a worthy competitor to Google Maps, which also now has an experimental WebGL mode. Is WebGL the future of map apps?

Textarea Auto Resize (jQuery Plugin)

Short Musings On JavaScript MV* Tech Stacks (Addy Osmani)

What You May Not Know About jQuery

traversty is a simple headache-free DOM traversal library

Simplicity and JavaScript modules is an argument for AMD modules, and AMD is Not the Answer is a counterpoint

Introducing ObjectHandler is a clever use of passing arguments through addEventListener (didn’t know you could do that!), but I’m unsure about the usefulness of what is actually being proposed

What’s Coming in jQuery Mobile 1.1 and Beyond

The Top 10 Javascript MVC Frameworks Reviewed

Here’s a GameBoy Color emulator in JS!

es6-collections is a collection of ES6 shims/polyfills

Happy Fun Coding is a jsfiddle/jsbin/jsdo.it-style code playground specifically targeted at coding games in JavaScript.

browser.js is a collection of JavaScript hacks and workarounds implemented by Opera

filer.js is a wrapper library for the HTML5 Filesystem API, which aims to make it more accessible to coders more familiar with UNIX-style commands such as ls, cp, mv, etc.

An Object is not a Hash (Guillermo Rauch)

Captain Obvious on JavaScript and some ensuing discussion on reddit

resumable.js – resumable/restartable uploads via the HTML5 File API

Different flavors of JavaScript

Why is ಠ_ಠ a valid JavaScript variable name, but ♨_♨ is not? (via reddit)

node 0.7.0 unstable has been released