Miguel Camba

@miguelcamba

@cibernox

miguelcamba.com

• 2 years in development
• Began in beta, now in 1.9
• Live matches, realtime auctions
• 5M users
• Web, iOS and Android clients
• A lot of lessons learned...

Being the most important one...

F**K THE WEB. LET'S DO iOS/Android

RIGHT NOW

Hold on

I have some numbers

The web is the only technology we know that will be present on each one of those mobile devices

Why are we treating the mobile experience like a nice to have?

UX is the new king

Design

Coding

Desing and coding are converging

What does a user expect from your app?

• Respond fast

• Load fast

• Work offline*

*At least don't break misserably

Load fast

• Ember FastBoot™
   
• Remove jQuery dependency
   
• Tree Shaking
  ​
• HTTP2 Server push
   
• Browser caching

Cool stuff comming to speed up your boot time

Respond fast

User input

App update

What means fast?

User input

App update

< 100ms

100-300

300-1s

> 1s

Instantaneous

Uncertainty

How fast is fast?

Gesture recognition

Route transition

Data fetching

View update

Classic workflow

Use animations to create mental workflows

Animated transition

If you can't make things faster, make things

look

faster

100ms

Animation start

Animation end

50-100ms

User interaction

Perceived completeness

Animation

Watch Chrome Dev Summit talk by Paul Lewis

Gesture recognition tracking

Data fetching

Transition

View updating

Animate along with the gesture

Instant feedback

Happy users

Gesture tracking + Intelligent prefetch = Awesome

Preload content

Animations help to improve perceived speed only if they are smooth

But animation control with JS is hard

web-animations-api

New standard for animations

• Declarative like CSS animations

• Full control like JS animations

• Run outside the main thread

• Synchronization, grouping and sequencing

• MotionPath and SVG animations features

// Basic usage
element.animate([{ left: 0, opacity: 0 }, { left: 100, opacity: 1 }], 2000);


// Fully customizable
element.animate(
    [{ color: 'black' }, { color: 'yellow' }],
    { duration: 1000, delay: 250, easing: 'ease-in-out', iterations: 3 }
);

// Full control
var player = element.animate([{ left: 0 }, { left: 100 }], 2000);

// Pause
player.pause();

// Play
player.play();

// 2x speed
player.playbackRate = 2;

// Reverse
player.reverse();

// Seek
player.currentTime = 1000;

The Polymer project has a polyfill you can use today.

https://github.com/web-animations/web-animations-next

Small Demo

Bigger Demo

Work offline

What if I tell you that you can make your app pretty offline in ~20 loc

Service Workers

var CACHE_NAME =  'mobile-patterns-v1';

self.addEventListener('fetch', function(event) {
  var fetchRequest = event.request.clone();
  var cacheRequest = event.request.clone();

  event.respondWith(
    fetch(fetchRequest).then(function(response) {
      caches.open(self.CACHE_NAME).then(function(cache) {
        var cacheSaveRequest = event.request.clone();
        cache.put(cacheSaveRequest, response.clone());
      });
      return response;
    }).catch(function(err) {
      return caches.match(cacheRequest);
    })
  );
});

offline-support.js

if ('serviceWorker' in window.navigator) {
  window.navigator.serviceWorker.register('/offline-support.js');
}

Register the worker

Small demo

Normal workflow, fallback to cache if no network

Lots of other patterns

• Pre-fetch content in advance
   
• Use cache, fallback to network (offline first)
   
• Save for offline (read-it-later like)
   
• Immediate response, revalidate in background
   
• Listen for push notification (even when your app is closed)

Check the Cookbook

http://jakearchibald.com/2014/offline-cookbook

Bigger Demo

Don't wait, use it right now

Thanks