using phonegap to develop incredible html5 hybrid mobile apps
DESCRIPTION
PhoneGap is an awesome tool for building mobile apps. The barrier to entry is low and allows more flexibility and creativity. Still, attempting to build a successful mobile app with PhoneGap can be daunting. The various types of devices, platforms, and even platform versions can be confusing. And even though PhoneGap allows you to use HTML, CSS and JavaScript to program, JavaScript in particular can present challenges for beginners. However, things are getting better. CSS and Javascript are becoming more mature than ever, and many modern JS frameworks are now more focused on creating mobile apps than websites. Being a developer myself, I know the struggles and frustrations that can arise from HTML5 hybrid app development. In my talk, I will cover the exact tips and tricks you need to quickly master PhoneGap development. I’ll focus on getting started, and building a better UX. You’ll find out how and why PhoneGap is such an awesome tool for building mobile apps.TRANSCRIPT
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: [email protected]
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