The Native/Mobile Web

Transcript

1. think ◦ design ◦ develop ◦ mentor Beyond the basics with PhoneGap JC Grubbs, CEO DevMynd @thegrubbsian github.com/thegrubbsian The Native/Mobile Web
2. How many of you have used PhoneGap? How many of you have PhoneGap apps in production? think ◦ design ◦ develop ◦ mentor Survey
3. Agenda Brief introduction to PhoneGap think ◦ design ◦ develop ◦ mentor Construction best practices Architectural approach Performance tips & tricks Q&A
4. PhoneGap? think ◦ design ◦ develop ◦ mentor
5. What is PhoneGap? A set of native wrappers think ◦ design ◦ develop ◦ mentor Bridge code for exposing native APIs Your code, basically a web app Lightweight tooling
6. Anatomy think ◦ design ◦ develop ◦ mentor App Code iOS Android Windows Cordova & Plugin JS Cordova & Plugin JS Cordova & Plugin JS Plugin Plugin Plugin Plugin Plugin Plugin
7. Architecture think ◦ design ◦ develop ◦ mentor
8. Our Stack think ◦ design ◦ develop ◦ mentor OR sass ejs jasmine rake pipeline moment gui tools other libs
9. GUI Frameworks think ◦ design ◦ develop ◦ mentor jQuery Mobile iUI Ratchet Sencha Topcoat jQuery Mobile Fries ...or none
10. Architecture think ◦ design ◦ develop ◦ mentor Application Module Backbone.Offline Backbone.Sync View Handler Window Views Collections Models Events Templates
11. Server API Standard JSON/REST think ◦ design ◦ develop ◦ mentor Pass user context information as headers
12. Online/Offline Make use of localStorage think ◦ design ◦ develop ◦ mentor Use the available SQLite DB Listen to PhoneGap connectivity events
13. think ◦ design ◦ develop ◦ mentor {code} github.com/thegrubbsian/triage_mobile
14. Assets Coffee/SASS pre-processors think ◦ design ◦ develop ◦ mentor Concatenate JS & CSS jshint and csslint
15. Templates Write in individual files think ◦ design ◦ develop ◦ mentor Pre-compile template functions for performance
16. Build Use rake-­‐pipeline to run all the asset steps think ◦ design ◦ develop ◦ mentor Use listen to observe file changes and re-compile
17. think ◦ design ◦ develop ◦ mentor {code} github.com/thegrubbsian/triage_web
18. Browser Runnable Mouse vs. touch events think ◦ design ◦ develop ◦ mentor Deal with CORS or serve app from the server Use feature detection for PhoneGap specific APIs
19. Debugging Desktop browser think ◦ design ◦ develop ◦ mentor Safari inspector + iOS simulator Chrome remote debugger + Android device debug.phonegap.com
20. Deployment Don’t wait to test on a device think ◦ design ◦ develop ◦ mentor Use TestFlight for team testing PhoneGap Build
21. Testing Jasmine now packaged with PhoneGap 3.0 think ◦ design ◦ develop ◦ mentor Make use of capybara/ cucumber or selenium
22. Performance think ◦ design ◦ develop ◦ mentor
23. DOM & Views Avoid redraws think ◦ design ◦ develop ◦ mentor Keep markup shallow Remove non-visible views Kill view old view objects, watch for memory leaks
24. Rendering Make light use of shadows and gradients think ◦ design ◦ develop ◦ mentor Use CSS sprites or better yet an icon font Use hardware accelerated transitions where possible
25. Interactions Mouse events are generally composite touch events think ◦ design ◦ develop ◦ mentor Cache selectors
26. Plugins If necessary write plugins to gain native performance for expensive operations think ◦ design ◦ develop ◦ mentor
27. Plugins If necessary write plugins to gain native performance for expensive operations think ◦ design ◦ develop ◦ mentor The plugin API changed significantly in 3.0
28. Web Workers In some situations web workers can be helpful think ◦ design ◦ develop ◦ mentor Be careful though of OS versions that do not support them
29. Bonus Tips think ◦ design ◦ develop ◦ mentor
30. Odds & Ends Use -­‐webkit-­‐overflow-­‐ scroll to better deal with scrolling and fixed elements think ◦ design ◦ develop ◦ mentor Use media queries to deal with rotation and tablet vs. phone
31. Odds & Ends Disable the iOS “Bounce” for a more native feel think ◦ design ◦ develop ◦ mentor Pass user’s timezone to server for better time translation
32. Questions think ◦ design ◦ develop ◦ mentor