The document summarizes the speaker's experience developing hybrid mobile apps using PhoneGap. It describes his journey starting with an early news application in 2010, challenges faced around debugging, development speed and user interface design. Key points discussed include building tools like a PhoneGap debugger and cloud IDE to improve efficiency, open sourcing native UI components, and creating the Onsen UI framework and pre-built components site to simplify app development. The speaker emphasizes that while individual solutions can be found, his goal with Monaca and Onsen UI is to provide an up-to-date resource to help developers overcome common challenges in this area.

1. Using PhoneGap to develop
incredible HTML5 hybrid mobile apps.
May 22, 2014
MASAHIRO TANAKA
FOUNDER & CEO, MONACA
HTML5DevConf Session

2. Who am I?
Masahiro Tanaka
Founder & CEO, Monaca
Twitter: @massie
E-mail: masahiro@asial.co.jp
Recent books and magazines:

3. PhoneGap company.
Official docs
translations.
#1 PG community
In Japan.
Cloud based IDE

4. No.1Platform: PhoneGap

5. Our first hybrid app…
News application for a large telecom.
Released in 2010, for Android Platform.
Platform: Android 1.6 to 2.3.

6. Why hybrid?
Programs stay up-to-date.
Easier to deal with pre-existing
CMS for websites.

7. GoalBut it was a long way to go…
Andrew E. Larsen
The Path of the Upward Call

8. But more bigger obstacles
Needed to pre-install to all the carrier’s devices

9. 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?

10. All improvements do improve.
But the bottom-line, we need:
Faster development speed
Easier and deeper debugging

11. So, we made a PhoneGap debugger
 HTML and JavaScript debugging.
 Live reloading.
 USB connection is optional.
 Multiple devices at once.

12. Increased our development efficiency significantly.

13. Also made a Web-based tool
 Edit code, debug, build via browser.
 Backend features.
 No setup required.

15. 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.

16. 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.

17. 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.

18. There is another issue
User Interface.
“Your app doesn’t look cool”

19. 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!

20. And we open-sourced
 Navbars, tabbars, and widgets & buttons.
 Page navigation.
 Context menu.
 Hardware keys.
 Screen orientation support.
 Relevant JavaScript APIs.

21. https://github.com/monaca/

22. 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.

23. 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.

24. 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.

25. And the technology evolution
Big change:
JavaScript framework
AngularJS, Backbone, Knockout…

26. 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.

27. But still, developing UI is difficult
In addition to provide pieces,
we also created all “common” UIs,
with those pieces.

28. So made a ready-made
components site.
http://components.onsenui.io

29. 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.

30. 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.

31. Thank you.
Monaca pricing starts from “forever free” even for commercial
use. Try it! Feedback welcome 
Check @monaca_io to download the slides.

32. Contest runs until June 30, 2014