Casualties: One Desk. How we made one mobile app for four platforms in 40 days

@gaqzi Casualties: one desk Björn Andersson How we made one
mobile app for four platforms in 40 days

@gaqzi Who is this bloke?

@gaqzi Who is this bloke? ✓ Swedish

@gaqzi Who is this bloke? ✓ Swedish ✓ Whisky lover

@gaqzi Who is this bloke? ✓ Swedish ✓ Whisky lover
✓ Full stack web developer

@gaqzi What did we build?

@gaqzi What did we build? • Source material is high
resolution PDFs

resolution PDFs • The individual pages are rendered as JPEGs

resolution PDFs • The individual pages are rendered as JPEGs • A lot of different resolution assets

resolution PDFs • The individual pages are rendered as JPEGs • A lot of different resolution assets • Support for Android, BlackBerry 10, iOS and Windows Phone 8

@gaqzi Who is your daddy,   and what does he
do?

do? • 3 man team

do? • 3 man team • Frontend designer

do? • 3 man team • Frontend designer • Backend developer

do? • 3 man team • Frontend designer • Backend developer • Tie-it-all-together full stack developer

@gaqzi How it was planned -‐ app

@gaqzi How it was planned -‐ app One week for
common functionality

common functionality One week per platform for fixing quirks specific to them

common functionality One week per platform for fixing quirks specific to them Rolling releases for the platforms as they were finished

common functionality One week per platform for fixing quirks specific to them Rolling releases for the platforms as they were finished Release order: Android, iOS, Windows Phone 8, BlackBerry10

@gaqzi How it was planned -‐ API

@gaqzi How it was planned -‐ API Two weeks for
the basic functionality:

the basic functionality: • Listing all magazines

the basic functionality: • Listing all magazines • Return a list of all the changed pages from timestamp

@gaqzi Frameworks and tools

@gaqzi Frameworks and tools API is a Django with django-rest-framework
and Celery

and Celery Frontend uses Cordova with Lavaca as the Javascript framework

and Celery Frontend uses Cordova with Lavaca as the Javascript framework Weinre for debugging – WEb INspector REmote

@gaqzi What’s your first thought: cross platform app

@gaqzi

@gaqzi Is it really that bad?

@gaqzi Is it really that bad? Will it be as
fast as a native app? No.

fast as a native app? No. Will it be fast enough for your use case? Maybe.

fast as a native app? No. Will it be fast enough for your use case? Maybe. We’ve come a long way from the beginning of PhoneGap to today

@gaqzi How does it work?

@gaqzi How does it work? You make a web app
using HTML5/CSS and Javascript

using HTML5/CSS and Javascript Cordova package it up and render it using the native WebView

using HTML5/CSS and Javascript Cordova package it up and render it using the native WebView Most of the time you’re just building a normal website

@gaqzi What is a WebView?

@gaqzi What is a WebView? Access to the HTML and
Javascript engine of the platform

@gaqzi What is a WebView? Access to the HTML and
Javascript engine of the platform Not all WebViews are equal WebKit

@gaqzi What is in a name?

@gaqzi What is in a name? PhoneGap is a distribution
of the open source project Cordova

@gaqzi What is in a name? PhoneGap is a distribution
of the open source project Cordova Cordova was initially known as PhoneGap before Adobe bought Nitobi and contributed PhoneGap to the Apache Software Foundation

@gaqzi What’s the differences then?

@gaqzi What’s the differences then? Cordova has the core functionality
of PhoneGap, when we talk they are basically interchangeable.

@gaqzi What’s the differences then? Cordova has the core functionality
of PhoneGap, when we talk they are basically interchangeable. The PhoneGap package has an integration with PhoneGap build which is awesome

@gaqzi PhoneGap Build

@gaqzi PhoneGap Build Builds your app in the cloud –
no need to install APIs locally

no need to install APIs locally At the time of writing no support for BlackBerry 10 and WP8 is in beta

no need to install APIs locally At the time of writing no support for BlackBerry 10 and WP8 is in beta Remote debugger, but setup your own weinre server in Singapore

@gaqzi How do you get started?

@gaqzi How do you get started? > npm install –g
cordova

cordova > cordova create project-folder org.example.app.id AppName

cordova > cordova create project-folder org.example.app.id AppName > cordova platform add android

cordova > cordova create project-folder org.example.app.id AppName > cordova platform add android > cordova build

cordova > cordova create project-folder org.example.app.id AppName > cordova platform add android > cordova build > cordova emulate android

@gaqzi Where did we end up?

@gaqzi Where did we end up? Pretty okay for time
– but we did end up having crunch time

– but we did end up having crunch time Android and iOS were done in time

– but we did end up having crunch time Android and iOS were done in time A lot of time spent on image resizing and PDF extraction

– but we did end up having crunch time Android and iOS were done in time A lot of time spent on image resizing and PDF extraction BlackBerry had changed a lot and documentation not updated + bugs

– but we did end up having crunch time Android and iOS were done in time A lot of time spent on image resizing and PDF extraction BlackBerry had changed a lot and documentation not updated + bugs Windows Phone 8 on Cordova is a nightmare

@gaqzi Android

@gaqzi Android “Flexibility” / Choice

@gaqzi Android “Flexibility” / Choice We’ve dealt with Android before
so we know some quirks

so we know some quirks …and we expected there to be new ones

so we know some quirks …and we expected there to be new ones For example why images were blurry on some devices, but only when not animating. (Solution; backface-visibility: hidden)

so we know some quirks …and we expected there to be new ones For example why images were blurry on some devices, but only when not animating. (Solution; backface-visibility: hidden) Get as many devices as you can to test it out on.

@gaqzi iOS

@gaqzi iOS “Inflexible” / No choices

@gaqzi iOS “Inflexible” / No choices Same generation hardware as
Android runs faster

@gaqzi iOS “Inflexible” / No choices Same generation hardware as
Android runs faster Make sure you have enough time to send the app in at least twice

@gaqzi BlackBerry 10

@gaqzi BlackBerry 10 The pleasant surprise

@gaqzi BlackBerry 10 The pleasant surprise QNX seems to be
a very nice platform

a very nice platform Documentation wasn’t up to date

a very nice platform Documentation wasn’t up to date Cordova implementation is a thin wrapper around their own web APIs

a very nice platform Documentation wasn’t up to date Cordova implementation is a thin wrapper around their own web APIs Wish they continue to exist, because I actually liked the platform

@gaqzi Windows Phone 8

@gaqzi Windows Phone 8 Oh dear god… It runs IE,
with all that you would expect

with all that you would expect WebView does not support SVG

with all that you would expect WebView does not support SVG Debugging the DOM with weinre disconnects

with all that you would expect WebView does not support SVG Debugging the DOM with weinre disconnects Rejected because of silently injected permissions

with all that you would expect WebView does not support SVG Debugging the DOM with weinre disconnects Rejected because of silently injected permissions Took as long as everything else combined 

with all that you would expect WebView does not support SVG Debugging the DOM with weinre disconnects Rejected because of silently injected permissions Took as long as everything else combined  Stay away from

@gaqzi

@gaqzi The end product

@gaqzi The end product Time spent initial build and Android,
iOS and BB10: 4 weeks

iOS and BB10: 4 weeks Time spent Windows Phone 8: 4 weeks

iOS and BB10: 4 weeks Time spent Windows Phone 8: 4 weeks Available on all the app market places mid November

iOS and BB10: 4 weeks Time spent Windows Phone 8: 4 weeks Available on all the app market places mid November Output:

iOS and BB10: 4 weeks Time spent Windows Phone 8: 4 weeks Available on all the app market places mid November Output: ✓ 5 issues opened on the Cordova bug tracker

iOS and BB10: 4 weeks Time spent Windows Phone 8: 4 weeks Available on all the app market places mid November Output: ✓ 5 issues opened on the Cordova bug tracker ✓ 4 apps delivered

iOS and BB10: 4 weeks Time spent Windows Phone 8: 4 weeks Available on all the app market places mid November Output: ✓ 5 issues opened on the Cordova bug tracker ✓ 4 apps delivered ✓ 1 feature suggestion, implemented as a plugin for WP8

iOS and BB10: 4 weeks Time spent Windows Phone 8: 4 weeks Available on all the app market places mid November Output: ✓ 5 issues opened on the Cordova bug tracker ✓ 4 apps delivered ✓ 1 feature suggestion, implemented as a plugin for WP8 ✓ Newfound loathing for Internet Explorer

@gaqzi Questions?

@gaqzi Thank you

@gaqzi Thank you For more information see:

@gaqzi Thank you For more information see: http://docs.cordova.io/

@gaqzi Thank you For more information see: http://docs.cordova.io/ http://build.phonegap.com/

@gaqzi Thank you For more information see: http://docs.cordova.io/ http://build.phonegap.com/ http://plugins.cordova.io/

Casualties: One Desk. How we made one mobile app for four platforms in 40 days

Casualties: One Desk. How we made one mobile app for four platforms in 40 days

More Decks by Björn Andersson

Other Decks in Programming

Featured

Transcript