PhoneGap Day EU 2015conference report

Sebastian Lopienski

CAPPS meeting, June 2015

Apache Cordova / PhoneGap

Apache Cordova is a platform for building native mobile applications using HTML5/CSS/JavaScript

– mobile means tablets and smartphones, but also wearables (Google Glass PoC created recently)

– big community; 900+ plugins available (!)

PhoneGap is a distribution of Apache Cordova

2

PhoneGap Day EU 2015http://pgday.phonegap.com/eu2015/

• In central Amsterdam (30min train+walk from Schiphol)

• Conference on May 18: ~15 presentations• Workshops on May 19 (didn’t attend)

• Around 150 people: experts, developers etc.• Lively and friendly community• Very interesting coffee discussions• Very interesting sponsors stands (!)

3

4

Affiliation hardly visible

Most common question: “Where are you from?”

5

From http://www.slideshare.net/sydlawrence/high-performance-phonegap-apps

Hybrid apps: 7 performance tipshttp://www.slideshare.net/sydlawrence/high-performance-phonegap-apps

1. use a JS framework (don’t write your own!)

2. avoid animations

3. use FastClick to avoid the dreaded 300ms tap delay

4. use PouchDB for offline storage (syncs with CouchDB)

5. detect when app is in background => don’t update UI

6. avoid memory leaks– reuse HTML/DOM elements– remove unused media from memory (img.src=”empty.gif”)– use callbacks or promises instead of timeouts or intervals

7. use CrossWalk to put the latest Chromium on Androids

6

Apple App Store rule 3.3.23.3.2 An Application may not download or install executable code.

Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.

This means we can update hybrid apps live (!!!), without going through the review process.

7

Hybrid apps

• Performance used to the problem – but now solved

• Superpowers of hybrid apps:– platform coverage– development cost (a single web developer vs. one per OS)– agility (update your app live to change UI, do A/B testing)– one codebase to maintain– many tools available (dev, debug, test, deploy, analytics…)

8

Ionic Framework

• Becoming the solution for hybrid mobile app dev– not “just” a framework, but a whole ecosystem

(tools, libs, plugins, services etc.)– mature: v1.0 stable released May 2015

– https://www.airpair.com/javascript/posts/switching-from-ios-to-ionic

9

Phone: first day of off-line sale• Shifting focus from apps to scopes

– categorized context home screens (e.g. Nearby, Music, News)

– branded scopes - (e.g. from Amazon)– no need to discover and download apps

• Development: – C/C++ (scopes)– Qt/QML (native apps)– HTML5 (web apps + hybrid apps)

• Devices (targeting European market): – BQ Aquaris E4.5 (dual SIM, 169 EURO)– Meizu MX4 (a high-end device, coming soon)

10

Push and pull models• Android:

– Google Play Store apps that use push: 15%– Installed apps that use push: 42%

• Push notifications enhance user experience if done well– Main reason for removing an app: too frequent notifications– Make frequency and content configurable– Respect quiet hours (night); don’t rely on “Do not disturb”

• Solutions available:– phonegap-push plugin for Cordova/PhoneGap– ionic-push API for Ionic apps

11

Push and pull models

• Pull is the traditional model – but still valid

• Combine all requests into one, compress data• Web File API hard to use, results in a “callback hell”

– list files -> download one -> unzip it -> remove the zip• Solution: phonegap-plugin-contentsync plugin

• You can even update your app (!!!)

12

Accessibility• From a "nice to have" to a a requirement

– especially for governments, education etc.• Mobile OSes support accessibility in their webviews

– good news for web/hybrid developers!– a web site cannot see if accessibility features are enabled

(for privacy reasons)– phonegap-mobile-accessibility plugin comes to rescue

• Developers’ duties:– Take care of reading order, structure the page, add alt text– Use semantic HTML: e.g. star icon is an HTML checkbox

• Enable accessibility features in your mobile OS and use them really to learn the logic

13

Other presentations• WebViews (WebKit, Chromium) - differences, fragmentation• Telerik – development platform for mobile apps • CrossWalk – modern WebView with advanced web features

for legacy Android devices• HTML GL – library to rendering HTML/CSS via WebGL,

for speeding up HTML/CSS animations:<html-gl>

<img src="file.gif"></html-gl>

• phonegap-plugin-gameCenter – add gamification to an app• Growing your app’s user base - luck? work!

14

Misc• App downloads Android vs. iOS is 1:50 (!?!)

– “Android users don't download apps”

• Some other frameworks, tools and libraries mentioned:– ReactNative - build native apps with React and JavasScript– Parse - online services: DB/back-end, push server, analytics– Kendo - jQuery-based mobile widgets w/ Angular integration– Sencha Touch - cross-platform mobile web app framework – Monaca - cloud-based app development environment

– localForage - a library for offline storage, improved

15

My conclusions: Hybrid mobile apps are mainstream

• The technology (Cordova / PhoneGap) is mature

• The ecosystem (frameworks, 900+ plugins) is very rich

• “Low performance” argument not valid anymore

• Benefits (one codebase etc.) hard to ignore

16