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.
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.
13. Also made a Web-based tool
Edit code, debug, build via browser.
Backend features.
No setup required.
14.
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.
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.