Live From PhoneGap Day EU 2017

The Adobe PhoneGap team has been attending, presenting and sharing at PhoneGap Day EU 2017 in Amsterdam last week. I tagged along and turned my notes into a live-blog.

This is the fifth PhoneGap Day in Europe, and just like last year happening in the wonderful Compagnietheater. The event has been organized by a group of volunteers around Peter Paul Koch and is sponsored by Adobe, Onsen UI, wikitude, and Monaca.

What follows is a short summary of the talks today.


Steve Gill: State of Cordova/PhoneGap

Steve Gill kicks off the event with a state of the Cordova and PhoneGap ecosystem.

With PhoneGap being in its ninth year of existence, the world of web development and the web platform itself has grown massively. For 2017, the main theme for Cordova is Modernizing.

This includes using the established tools of the JavaScript ecosystem like npm, or package.json. In fact, every Cordova project is now using npm behind the scenes.

The new platform focus for Cordova is on iOS, Android, Windows 10, and the web browser.

This modernization also allows a better integration of PhoneGap and Cordova. PhoneGap projects will now include Cordova as a proper npm dependency, which will simplify development.

In line with Cordova’s focus on the browser runtime, PhoneGap now provides a plugin to create Progressive Web Apps (PWAs) as an output target.

Finally, another focus for PhoneGap in 2017 is improved integration with Adobe I/O and the Adobe developer ecosystem.


Kerri Shotts: Modern JS and PhoneGap

Next up is Kerri Shotts talking about Modern JavaScript and how to use it for PhoneGap.

Mobile web development has come a long time since 2009 when the top of the line phones were running iOS 3 or Android 1.5 and the JavaScript version with universal adoption was ES3. ES3 was already ten years old at that point, the language has been specified in 1999.

Also in 2009, the ES5 standard was released, but it took until 2012 to get significant adoption in mobile devices.

Fortunately it does not take us ten years between JavaScript versions anymore (and a saner version scheme has been adopted), so that in short succession ES2015, ES2016, and ES2017 have been released.

The biggest step is probably ES2015, with lots of cool new stuff added to the language.

Kerri walks us through the most promising language features, and the best way to catch up is to check out her slides.

If you want to stay in the loop with what’s happening next in JavaScript language evolution, check out esdiscuss.org

In the final section of her talk, Kerri shows us how to use transpilers to bring new language features into old runtimes by automatically translating ES2015+ to ES5. These transpilers can be integrated easily with npm and the rest of the Cordova tooling, so that these advanced language features are available seamlessly to mobile app development.

There are a couple of caveats:

  • Es2015 is not a performance optimization, because it is still new
  • Debugging can be “fun”, especially with transpilers, but source maps help
  • Syntax can feel new & surprising

Andreas Fötschl: wikitude Augmented Reality

In the last talk before the break we stay on the topic of the most modern, bleeding edge advancements in mobile development. wikitude’s Andreas Fötschl presents us with a way to build AR apps using Cordova.

To cut through all the hype, Andreas offers us a short, buzzword-free definition of the three dominating types of augmented reality experiences:

What is AR anyway? More than a marketing buzzword? Not just UI with geolocation or HUDs.

Real AR needs computer vision (otherwise you don’t know what reality is)

  • Geo AR: Is the simplest way to do AR, and will barely even qualify to be real augmented reality. In its essence, Geo AR simply brings a user’s device and a point of interest in a database together and triggers something when there is a match. It is very easy to do, not really interesting.
  • 2D recognition: Here the app finds a plane in reality, e.g. a magazine page, and then uses it as a canvas. This requires some computer vision, but is limited to two-dimensional interfaces.
  • SLAM stands for simultaneous location and mapping and is according to Andreas the real rocket science of AR that tests the limits of hardware and software. SLAM allows to detect objects and put interaction on them.

This does not work as advertised. To make AR successful, developers need to address four challenges:

  1. Know your use case. AR will not make a broken app interesting.
  2. Content is King: Where do you get content from? What APIs do you have and how fast are they?
  3. The device is the Lord. Praise the device. Be aware of the limitations and opportunities.
  4. Algorithms are the air you need to breathe: chose your SDK wisely. For instance occlusion detection needed for photorealistic rendering

Speaking of SDKs, wikitude has a plugin that makes it easy to create AR apps using Cordova, which you can get on GitHub.

Live Updates

Follow the Medium series:


Shazron Abdullah: Growing the Cordova Community

After the lunch break, Shazron Abdullah gives us an update of the state of the Cordova community. Cordova is an Open Source project that thrives off contributions. For contributors, there are many good reasons to contribute.

A good way to get started contributing is to edit and send pull requests to the documentation on GitHub. That’s what Shaz calls “the easy mode”.

In the hard mode, developers can use cordova-coho, installable from npm, which automates common tasks in contributing to Open Source including:

  • Finding repositories
  • Keeping up with changes
  • Or creating a pull request

I have to say, even in “hard mode”, coho makes contributing look easy. If you want to learn more about contributing to Cordova, visit contribute.cordova.io


Timo Ernst: Building PhoneGap Apps with Vue.js and Framework7

Timo Ernst gives a whirlwind demo of building a chat app with vue.js, Framework7, and PhoneGap.

What makes vue.js so interesting is:

  • It’s simple
  • It’s fast
  • It’s just HTML, CSS, and JavaScript
The tools you use, they end up using you.

Interestingly, using vue.js with ES2015 in a web view still requires compromises (no modules) or transpilers, because web browsers have advanced farther than WebViews.

Framework7 is a high-fidelity widget framework that supports native iOS and Material Design look and feel. This includes a terrific attention to detail in areas like animations. Even the ease-in and ease-out of slider animations matches the native equivalent.

Timo also gives an outlook of what’s in the books for Framework7's future:

You can find all of Timo’s links here:


Masahiro Tanaka: Creating Reusable User Interfaces with Web Components

Masa is founder of Monaca and Onsen UI. Web components are composed of four main building blocks:

  • HTML Templates
  • Custom Elements
  • Shadow DOM
  • HTML Imports

Altogether, WebComponents provide a simple, standardized way to build composable user interfaces with HTML, CSS, and JavaScript.

Unfortunately, native support is not yet available in all browsers, which will unlock additional performance benefits compared to polyfills like Polymer (there are other polyfills, Polymer is not identical to WebComponents.)

One of these polyfill + widget libraries based on Web Components that enables the creation of hybrid mobile applications or progressive web apps is Onsen UI.

Fun fact: Onsen is the Japanese word for Spa, which looks very much like the acronym for “single page app” and has it’s own emoji: ♨️.


Edouard Lafargue: Cordova and Citizen Science

I spoke with Edouard briefly before the talk: «What’s that device you are carrying around?» «That’s a Geiger counter.» «Now I can’t wait for your talk.»

Edouard is working with Safecast, an NGO that is collecting radiation data worldwide and making it available under a CC-0 license, enabling scientists and activists to work with better data.

What does Cordova have to do with it? The bGeigie nano is a kit for building your own professional-grade Geiger counter with a Bluetooth interface. The Bluetooth interface allows you to connect the Geiger counter to a mobile app, and this is where Cordova (and Edouard) come to play.

The app allows volunteers to connect to Safecast, start recording, and upload data once recording has completed. To achieve this, the app has to meet a couple of hard requirements:

  • Low battery usage (because it is running for a long time)
  • Simple user interface (because volunteers are using the app voluntarily)
  • Work without network connectivity (it needs to work worldwide)
  • Store lots of data (see offline usage)
  • Support for Bluetooth low energy and serial devices (see battery usage)

In his talk, Edouard shares how the Safecast Android application is meeting these requirements. You can see it in action in Safecast’s GitHub repos:


Ryan Hanna: How Sworkit went from Side Project to Full Time Venture

After the break, Ryan got the audience going with some light exercise to tell the story of Sworkit, a mobile workout app.

Sworkit started as a hobby project and has professionalized incredibly, being a true mobile app success story. So how did Ryan and team go from this:

to this:

  • 25 million downloads
  • Google & Apple featured
  • Appeared on Shark Tank
  • 50 million workouts delivered

Here are the lessons Ryan shared with us:

  1. Do do something you want yourself
  2. Do as much as you can alone before you raise money
  3. Consider how to make money (not just how to raise it)
  4. Start with just one feature
  5. Version 1 will be your worst version (and that’s ok)
  6. Consider analytics at the start (know your pirate metrics)

A great tip for app developers looking to make money is to look for apps that have a high delta between their “top grossing” rank and their ranking among free apps. These are apps that convert users successfully and that can be an inspiration for patterns to follow.


Max Lynch: Performance Tips from the Ionic Team

Max Lynch is a performance geek. And he is right to instate a policy of yearly performance check-ins.

If your understanding of mobile web performance ends with “Facebook said (five years ago) mobile web is not fast enough”, you have a lot of catching up to do.

Mobile web performance has improved massively, and you can make your app fast, too, if you follow Max’s performance tips.

But first, you need to understand that every frame on the web will go through a JS, Style, Layout, Paint, and Composite life cycle that leaves you with about 10ms per frame. The techniques below allow you to skip some of these steps to squeeze the milliseconds.

  1. requestAnimationFrame()
  2. Reduce layout thrashing, by aligning DOM reads and writes through DOM batching. See fastdom for a small implementation
  3. Only modify transform and opacity properties to skip layout and paint steps in animations
  4. Passive Event Listeners (works on iOS 10.2)
  5. Use the will-change CSS property hint
  6. CSS containment to indicate contained elements — works in Chrome and Android already
  7. And many more

It’s hard to keep up with Max, as he is truly a high-performance speaker.


Jesse MacFayden: Music Exploration in PhoneGap

you don’t have to look like a rock star to code like one

Jesse explains how to use the new AudioContext API to load, manipulate and play audio in browsers, WebViews or Electron apps.

Playing audio in your demo allows you to get applause twice: once the demo works, and again when the music stops.

Thank You & See You

PhoneGap Day EU 2017 has been a great event! Thanks to organizers, speakers and sponsors for making it possible. See you next year!