Developing Better PhoneGap Apps

Presented at DevLearn 2013.

Being able to develop for multiple platforms with a single code base means less time and money spent on development, in addition to easier future maintenance. The wide support for web technologies, the powerful layout engine provided by HTML5/CSS, and the flexibility and speed of the JavaScript language have made PhoneGap an ideal choice in developing for multiple platforms. However, many experience performance issues when using HTML5/CSS and JavaScript to develop applications. The problem lies in the bad habits web developers have acquired in their years of working with computers with an abundance of computing power.

In this session, you will explore the basics of how web browsers render content and use that knowledge to identify the bottlenecks in PhoneGap applications. You will cover the importance of making an application responsive and go over various tricks to achieve that goal. In addition, you’ll also review bad habits that you may have acquired in working with computers with an abundance of computing power. You will explore how to remedy these problems to be more considerate of the mobile devices’ computing limitations. Finally, you will dive into the code of a PhoneGap application to familiarize yourself with how to make the best use of PhoneGap in your mobile development toolbox.

Transcript

1. Developing Better PhoneGap Apps Session 608 / DevLearn 2013 Daniel Pfeiffer Lead Developer / Float Mobile Learning
2. #DevLearn / Session 608 / Developing Better PhoneGap Apps PhoneGap Overview • Write your app using standards-based web technologies • Access native OS features using JavaScript • Deploy to multiple platforms with the same codebase
3. #DevLearn / Session 608 / Developing Better PhoneGap Apps What PhoneGap is... • A “wrapper” for your web-based apps • A collection of standard APIs for accessing native device features across various platforms • A standard for interacting between the native OS and JavaScript using plugins Illustration by Adobe / Yohei Shimomae
4. #DevLearn / Session 608 / Developing Better PhoneGap Apps What PhoneGap isn’t... • Magic • Compiler/translator that turns your web code into native (Objective-C, Java, etc.) code • The answer for every mobile app
5. #DevLearn / Session 608 / Developing Better PhoneGap Apps Web App vs. PhoneGap Web App PhoneGap Accessed via web browser Installed as an app Can be saved as a Web Clip Locally available content Able to cache some data locally No storage limits Easy to distribute/update Additional features available through plugins
6. #DevLearn / Session 608 / Developing Better PhoneGap Apps What is a “better” PhoneGap app? • Responsive • Runs “like a native app” • Efficiently takes advantage of standards-based web technology while understanding the restrictions • Considers the unique mobile affordances • Maintainable
7. #DevLearn / Session 608 / Developing Better PhoneGap Apps Quizzle
8. #DevLearn / Session 608 / Developing Better PhoneGap Apps Analytics from Quizzle • 93% of players opted in to the leader board to compete with their colleagues • Most players spent about 10-30 minutes playing at a time • About 30% of the time spent playing was in the evening or on the weekend • The average player spent over 5 hours playing over the course of 2 weeks—in an optional competition • Most players returned to the game within a day of their last session—often to check the leader board
9. #DevLearn / Session 608 / Developing Better PhoneGap Apps What did we learn from Quizzle? • A performant PhoneGap application is a very viable medium for delivering eLearning • Mobile is intrinsically social—bringing that to eLearning improves the user experience • Learners welcome eLearning that takes advantage of mobile affordances
10. #DevLearn / Session 608 / Developing Better PhoneGap Apps Abstraction Taxes • PhoneGap provides an abstraction layer between your app logic and the native OS • There are costs to using the abstraction layer: - Performance restrictions - Missing out on very finely tuned native user controls/inputs Photo by Philip Taylor PT
11. Abstraction Tax Evasion
12. #DevLearn / Session 608 / Developing Better PhoneGap Apps Don’t navigate away from index.html • The time required to tear down a page and load a new one can be completely avoided • Use JavaScript to change the DOM
13. #DevLearn / Session 608 / Developing Better PhoneGap Apps Use touch events • Users interact with mobile devices by touching—not clicking • By default, most mobile browsers add ≈300ms delay for click events • Try using the FastClick library
14. #DevLearn / Session 608 / Developing Better PhoneGap Apps Communicate with your user • Users should never have to wonder if the app is doing something • Use loading indicators if something can’t be done instantly • Remember, there is no “hover” state for buttons making a “down” state even more important • Be prepared for users to hit buttons multiple times
15. #DevLearn / Session 608 / Developing Better PhoneGap Apps <button class=”level”>1</button> <button class=”level” disabled>1</button> Use <button>’s • Buttons are designed for handling user interactions while anchor tags are for linking between pages • You can disable buttons by adding the disabled attribute
16. #DevLearn / Session 608 / Developing Better PhoneGap Apps button:active { background-color: #F00; } button:disabled { background-color: #CCC; } Use CSS pseudo-classes • :active to define the “down” state of buttons • :disabled to define the “disabled” state of buttons
17. Let’s talk about the browser
18. #DevLearn / Session 608 / Developing Better PhoneGap Apps 88ms 761ms 448ms cnn.com on an iPhone 4 Recalculate Styles Layout Paint
19. #DevLearn / Session 608 / Developing Better PhoneGap Apps What is “reflow” (layout)? • The time spent determining where elements will be drawn on the page is called “reflow” • Reflow involves a lot of calculations as the browser determines how to layout the page
20. Applying our Understanding of Reflow
21. #DevLearn / Session 608 / Developing Better PhoneGap Apps Reduce the cost of a reflow • Calculations use the CPU—the more complicated the DOM, the more calculations, the longer it takes • Remove extraneous tags to reduce DOM depth <li><a href="#view1">View 1</a></li>
22. #DevLearn / Session 608 / Developing Better PhoneGap Apps Reduce the cost of a reflow • Calculations use the CPU—the more complicated the DOM, the more calculations, the longer it takes • Remove extraneous tags to reduce DOM depth <li> View 1 </li>
23. #DevLearn / Session 608 / Developing Better PhoneGap Apps Reduce the cost of a reflow • Calculations use the CPU—the more complicated the DOM, the more calculations, the longer it takes • Remove extraneous tags to reduce DOM depth • Remove unused CSS rules • Avoid complex CSS selectors where possible <li> View 1 </li>
24. #DevLearn / Session 608 / Developing Better PhoneGap Apps Reduce the number of reflows • Avoid triggering unnecessary reflows • Make batched changes to the DOM— don’t change one element at a time • Use CSS classes instead of inline styles to change styles of elements • Use CSS animations instead of JavaScript-based animations
25. #DevLearn / Session 608 / Developing Better PhoneGap Apps Recalculate $('#view').animate({width:'50%'}); Use CSS animations/transitions • jQuery.animate performs custom animations on a set of CSS properties • Changing size- or position-related CSS properties will trigger a reflow Reflow Paint
26. #DevLearn / Session 608 / Developing Better PhoneGap Apps #view { -webkit-transform: scale(.5,0); -webkit-transition: 0.5s; } Use CSS animations/transitions • CSS-based animations can skip the reflow process • Some CSS-based animations are hardware- accelerated and occur directly on the GPU Recalculate Reflow Paint
27. #DevLearn / Session 608 / Developing Better PhoneGap Apps Consider client-side templating • Helps provide a Model-View-Controller (MVC) structure to your application • Enhances future maintainability of the code • Enables you to keep the DOM free of nodes that are not needed - Application views can be stored/manipulated in memory instead of in the DOM - Only the active view lives in the DOM
28. #DevLearn / Session 608 / Developing Better PhoneGap Apps Be mindful of memory usage • Avoid excessive use of global variables - The garbage collector clears data that is no longer in scope, but global variables are always in scope - Code with well-defined scopes is easier to maintain • Consider using smaller JavaScript frameworks
29. #DevLearn / Session 608 / Developing Better PhoneGap Apps Share the work with plugins • PhoneGap provides the standard for interacting between the native OS and JavaScript using plugins • Take advantage of various OS features— including performance Illustration by Adobe / Yohei Shimomae
30. #DevLearn / Session 608 / Developing Better PhoneGap Apps Measure • Don’t make guesses as to what is causing your app to run slowly or crash • Use the Safari Inspector or Instruments to measure your app and determine what to focus on improving - Memory usage over time - CPU usage over time - Time spent in reflow • Use aggregated analytics reports to determine what users like and what they won’t miss
31. #DevLearn / Session 608 / Developing Better PhoneGap Apps Let’s review... ✓ Develop on the device—do not rely on the simulator ✓ Don’t navigate away from index.html ✓ Use touch events or the FastClick library ✓ Use pseudo-classes like :active or :disabled ✓ Keep the DOM simple ✓ Use CSS animations (especially hardware-accelerated animations where possible) ✓ Avoid global variables ✓ Use a smaller JS library
32. Questions? @mediabounds dpfeiffer@floatlearning.com www.floatlearning.com/blog/phonegap