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 ShimomaeAdobe / 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 AppPhoneGap Accessed via web browserInstalled 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 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 PTPhilip Taylor PT

8. Abstraction Tax Evasion

9. #DevLearn / Session 608 / Developing Better PhoneGap Apps var view = retrieveCurrentView(); var newView = createNewView(); view.parentNode.replaceChild(newView, view); 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

10. #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 libraryFastClick library

11. Demo Touch events vs. Click events

12. #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

13. #DevLearn / Session 608 / Developing Better PhoneGap Apps 1 Use instead of Buttons are designed for handling user interactions while anchor tags are for linking between pages You can disable buttons by adding the disabled attribute

14. #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

15. Let’s talk about the browser

16. #DevLearn / Session 608 / Developing Better PhoneGap Apps floatlearning.com on an iPhone 4

17. #DevLearn / Session 608 / Developing Better PhoneGap Apps cnn.com on an iPhone 4

18. #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

19. Applying our Understanding of Reflow

20. #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 View 1

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 View 1

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 Remove unused CSS rules Avoid complex CSS selectors where possible View 1

23. #DevLearn / Session 608 / Developing Better PhoneGap Apps var node = document.getElementById('some_element'), new_node = node.cloneNode(true); // Apply changes to the cloned node var a = document.createElement('span'), var b = document.createTextNode('some content'); a.appendChild(b); new_node.innerHTML = ''; new_node.appendChild(a); // Out with the old, in with the new node.parentNode.replaceChild(new_node, node); Reduce the number of reflows Avoid triggering unnecessary reflows Make batched changes to the DOM— don’t change one element at a time

24. #DevLearn / Session 608 / Developing Better PhoneGap Apps var node = document.getElementById('some_element'), new_node = node.cloneNode(true); // Apply changes to the cloned node var a = document.createElement('span'), var b = document.createTextNode('some content'); a.appendChild(b); new_node.innerHTML = ''; new_node.appendChild(a); // Out with the old, in with the new node.parentNode.replaceChild(new_node, node); Reduce the number of reflows Avoid triggering unnecessary reflows Make batched changes to the DOM— don’t change one element at a time

25. #DevLearn / Session 608 / Developing Better PhoneGap Apps Recalculate $('#view').animate({width:'50%'}); Use CSS animations jQuery.animate performs custom animations on a set of CSS properties jQuery.animate Changing size- or position-related CSS properties will trigger a reflow ReflowPaint

26. #DevLearn / Session 608 / Developing Better PhoneGap Apps #view { -webkit-transform: scale(.5,0); } Use CSS animations CSS-based animations can skip the reflow process Some CSS-based animations are hardware accelerated and occur directly on the GPU Paint

27. #DevLearn / Session 608 / Developing Better PhoneGap Apps Consider client-side templating Helps provide a Model-View-Controller (MVC) structure to your applicationModel-View-Controller 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. Demo jQuery-based vs. CSS animations

29. #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 frameworkssmaller JavaScript frameworks

30. #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 ShimomaeAdobe / Yohei Shimomae

31. #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

32. Demo Measuring your app

33. #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 libraryFastClick 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 librarysmaller JS library

34. Questions? @mediabounds dpfeiffer@floatlearning.com www.floatlearning.com/blog/phonegap