Mobile HTM5 apps that can compete with native

Nolan Lawson

HTC Magic, 2009

→

→

Android
iOS
Windows Phone
Blackberry
Firefox OS

Windows
OS X
Linux
Chrome OS
etc.

mark zuckerburg says the mobile web ain't ready

Nexus 6, 2014

Animations
Android
Frameworks
Offline-first

Animations smooth as

JavaScript animations

Normal CSS animations

Hardware-accelerated CSS animations

Look at this comparison of JavaScript animations (using Y.Anim) and hardware-accelerated CSS animations, using the same hardware. They're just not in the same league. That's because JavaScript is bound to the event loop - the same event loop that can't guarantee that setTimeout() will actually execute that many milliseconds later. This is not what you want for your complex bezier curves and easing functions. By comparison, hardware-accelerated CSS animations convert the DOM node into an image, then animate it on a separate layer using the GPU. It's doing what GPUs were built to do, which is push pixels around. It's off the CPU, it doesn't require a re-paint, and it's very fast.

`translate3d`
`scale3d`
`rotate3d`
`opacity`

`top / left`
`top / left / translateZ(0)`
`translate3d`

The Android problem

Android is the new IE

If you want to know what Android web development is like, imagine a parallel universe where instead of IE being the non-evergreen browser everyone hated, it was Chrome. And every user had a different version of Chrome, so you had to worry about bugs in Chrome 37 that didn't appear in Chrome 36, or you had to worry about bugs introduced by Samsung and HTC that only appeared on their phones. That's Android. These are the HTML5 test scores for the WebView in each of the recent major Android version. If you test your desktop browser (Firefox or Chrome), it'll score around 500. Only Android 5.0 Lollipop actually scores that well, because it's actually, finally, an evergreen WebView. That's the one you want, and it's less than 0.1% of all users.

This is the same app running on Android 4.4.4 WebView vs the Crosswalk XWalkView. It's not an old version of Android at all - it's the one right before Lollipop - and yet the difference in performance is huge. I've seen old 4.0 phones that outperform 4.4 just because they're running Crosswalk. Crosswalk adds about 20MB to the download size of your APK, because you're basically giving your users Chrome, but for what you get, it's definitely worth it. You get the Lollipop experience all the way back to Android 4.0, which covers nearly all Android users. This is probably the single best thing you can do to improve the performance of your hybrid app. I can't recommend it enough.

Pick your frameworks carefully

tweet, Looking fwd to js framework authors getting smartphones and trying their stuff out on em someday.

Mobile-optimized frameworks

Angular ng-repeat (left) vs. Ionic collection-repeat (right)

For example, here's something Ionic has done. On the right, you have Ionic's custom collection-repeat directive, which is a replacement for the standard Angular ng-repeat directive, i.e. the thing that shows a list of items. And you'll notice that the Ionic one is way faster than the Angular one, and that I can actually flick through the list of items just as fast as I could on a native list. How they did this is actually really interesting. They just used the same trick that the native UICollectionView (iOS) or ListView (Android) does, which is that they only render those DOM elements that are currently visible. So now we finally have smooth, fast-scrolling lists on the mobile web!

Offline-first

Last but not least, I want to talk about offline-first. The basic idea of offline-first is that you want to cache aggressively, and prefer talking to the local data store rather than the network. And the reason you want to do that is that the network is slow and unreliable. And every time your app needs to make a network call before it can proceed, your users have to stare at a spinner. This can slow down your app a ton, and furthermore it means your app can stop working when your users go on the subway or a far corner of the building with poor reception. You can make lovely spinners with CSS animations that give beautiful animations, but people aren't using your app to look at a spinner. Everything I said before about smooth animations and crisp UIs doesn't matter if your users are staring at a spinner. This technique is important for desktop, but it's especially important for mobile, because of just how slow cell networks are.

Ilya Grigorik talks about slow mobile networks

This video by Ilya Grigorik is a must-see. The basic takeaway is that mobile networks are slow, especially when it comes to latency, and 4G is not going to save us. Furthermore, these numbers he points out (100-400 milliseconds) are the best case. If the radio needs to warm up, then this is a lot greater. And if the user dips offline, then the latency shoots to infinity. On the other hand, once a connection is open, you can actually download data pretty fast. So much of the solution here is the same stuff we've done for years - concatenating, minifying, spriting, and reducing the number of network requests. But with offline-first, you can take it one step further.

Offline-first libraries

PouchDB
LocalForage
YDN-DB
Hoodie
Lawnchair
RemoteStorage
MakeDrive
IndexedDBShim

pouchdb-lru-cache

blob-util

easy offline images


var db = new PouchDB('my-images');
db.initLru(5000000); // store 5 MB max

function getImageSrc(src) {
  return db.lru.get(src).then(function (blob) {
    return blobUtil.createObjectURL(blob); // cached
  }).catch(function () { // not cached
    return blobUtil.imgSrcToBlob(src).then(function (blob) {
      return db.put(src, blob); // cache it
    }).then(function () {
      return src;
    });
  });
}

Basically you can think of this as a poor man's Service Worker. We are overriding the browser's built-in cache, which normally would be cleared when a user closes our app. Instead, we are setting a max limit of how much data we want to store, then we are downloading images and putting them in the cache if they aren't already there. Then if they're cached, we can just show an image instantly instead of waiting for it to load all over again. It's an LRU, so the least-recently used images get evicted from the cache. We actually go one step further and maintain two caches - a hi-res one and a low-res one. The low-res one is essentially infinite, so that means that, even if a user is offline and their hi-res image got evicted, we can still show them a lo-res image. Basically, if they've downloaded an image once, they'll never have to download it again. This gives them a faster experience whether they're online or offline.

Harness the GPU for animations
Use Crosswalk for Android
Choose your frameworks wisely
Go offline-first

Android	2.2	2.3	4.0	4.2	4.3	4.4	5.0 (estimated)
Score	187	187	272	278	384	428	497
Coverage	0.035%	7.8%	6.7%	39.5%	6.5%	39.1%	0.05%