using phonegap to develop incredible html5 hybrid mobile apps

Using PhoneGap to develop

incredible HTML5 hybrid mobile apps.

May 22, 2014

MASAHIRO TANAKA

FOUNDER & CEO, MONACA

HTML5DevConf Session

Who am I?

Masahiro TanakaFounder & CEO, Monaca

Twitter: @massie

E-mail: masahiro@asial.co.jp

Recent books and magazines:

PhoneGap company.Official docs

translations.

#1 PG community

In Japan.

Cloud based IDE

No.1Platform: PhoneGap

Our first hybrid app…

News application for a large telecom.

Released in 2010, for Android Platform.

Platform: Android 1.6 to 2.3.

Why hybrid?

Programs stay up-to-date.

Easier to deal with pre-existing

CMS for websites.

GoalBut it was a long way to go…

Andrew E. LarsenThe Path of the Upward Call

But more bigger obstacles

Needed to pre-install to all the carrier’s devices

My journey has begun.

How can I make my app more incredible?

Better user experience? Or Better to be more stable?

Speed, Performance?

User satisfaction? Number of users?

All improvements do improve.

But the bottom-line, we need:

Faster development speed

Easier and deeper debugging

So, we made a PhoneGap debugger

HTML and JavaScript debugging.

Live reloading.

USB connection is optional.

Multiple devices at once.

Increased our development efficiency significantly.

Also made a Web-based tool

Edit code, debug, build via browser.

Backend features.

No setup required.

Made my team very happy

Designers don’t need to spend time on

updating environments.

The debugger is also integrated.

All command lines are now GUI.

And also supported local development.

And I decided to provide this.

Now 40,000 users are using our

product, mainly in Japan.

But unfortunately, not many people

here know about us. That’s why I’m

here and let you know that I’m doing

this.

Again, all improvements

do improve.

Faster development speed

Easier and deeper debugging

Because PhoneGap/Cordova is a library (or

framework), using an appropriate tools greatly

enhance our job.

There is another issue

User Interface.

“Your app doesn’t look cool”

Native UI Components

Some CSS3 and vendor-specific

attributes have critical bugs.

Position: fixed

Momentum scrolling

But it’s PhoneGap. Use native APIs to

cover those problems!

And we open-sourced

Navbars, tabbars, and widgets & buttons.

Page navigation.

Context menu.

Hardware keys.

Screen orientation support.

Relevant JavaScript APIs.

https://github.com/monaca/

But it was wrong approach

It’s a multi-page app, after all.

Difficult to

Maintain the state.

Pass variables.

Need to aware more about native.

HTML5 approach is also difficult.

JavaScript code easily get spaghetti.

Slow response.

Slow page rendering.

Smooth page navigation.

Standard input tags don’t look native.

Fixed top and bottom parts.

Smartphone and tablet support.

But they have a way to

overcome.

Spaghetti: Use Promise, or AltJS (TypeScript etc.)

Slow response: Use touch events, to avoid 300ms

delay.

Slow rendering: Think about browser reflow.

Smoother navigation: Use CSS3 GPU renderings.

Form elements: Create your own.

Fixed top and bottom parts: Google it. Many tricks.

Responsive: Use CSS Media Query + JavaScript.

And the technology evolution

Big change:

JavaScript framework

AngularJS, Backbone, Knockout…

So started a Web Component

framework

Onsen UI, an Web Component inspired

JS framework.

Aimed for: performance & ease of use.

And PhoneGap apps have gotten easier

to develop, even for light engineers.

But still, developing UI is difficult

In addition to provide pieces,

we also created all “common” UIs,

with those pieces.

So made a ready-made

components site.

http://components.onsenui.io

Looking back these 5 years…

Customers (or clients) demand very high

standards in all aspects of your app.

HTML5 is now a strong option for many

applications.

No shortest path, yet.

Individual tips and tricks can be searched

for and found easily.

However, no one place to keep up-to-date

with that knowledge, development

processes, debugging or experience.

That’s why we built Monaca and Onsen UI.

Thank you.

Monaca pricing starts from “forever free” even for commercial

use. Try it! Feedback welcome

Check @monaca_io to download the slides.

Contest runs until June 30, 2014