Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Raymond Camden: Best Practices for Apache Cordo...

Realm
March 01, 2017

Raymond Camden: Best Practices for Apache Cordova/PhoneGap Development

Video: https://www.youtube.com/watch?v=gRsnUhVeD_g

Speaker: Raymond Camden is a developer advocate for IBM. His work focuses on LoopBack, API Connect, Bluemix, hybrid mobile development, Node.js, HTML5, and web standards in general. He's a published author and presents at conferences and user groups on a variety of topics.
Raymond can be reached at his blog (www.raymondcamden.com), @raymondcamden on Twitter, or via email at [email protected].

Abstract: In this session, I'll discuss best practices, tips, and suggestions, for working with hybrid mobile applications and the Apache Cordova (and PhoneGap) frameworks. I'll discuss testing, offline support, data management, a bit of UI and UX as well, and point out resources for learning more.

Twitter Link: https://twitter.com/raymondcamden

Realm

March 01, 2017
Tweet

More Decks by Realm

Other Decks in Technology

Transcript

  1. What they didn't tell you about Cordova! I started building

    hybrid apps and you won't believe what happened next!!
  2. Raymond Camden! •  Developer Advocate for IBM! •  LoopBack, OpenWhisk,

    Bluemix, Cordova/ PhoneGap, Node, and web stuff in general! •  Blogging at raymondcamden.com! •  Tweeting at @raymondcamden!
  3. HTML, JS, CSS! •  That web stuff… it’s kind of

    important! •  Know everything!! •  Mozilla Developer Network (developer.mozilla.org)! •  CanIUse (caniuse.com)!
  4. The Network is Evil! •  Your app runs on the

    device - it doesn't matter whether you're online or not! •  Your app may start in one state - and enter another! •  You may be online, but in a really, really crappy manner! •  You may be online, but behind a wifi captive portal!
  5. What to worry about...! •  Am I online?! •  How

    well am I online?! •  How much data do I need to transfer?! •  Can I get by with part of it?!
  6. Oh yeah...! •  What if your server is offline?! • 

    What if your server is online but returning crap?! •  What if your third party server - ditto...!
  7. Cookies! •  Yes - seriously! •  Just FYI! •  MDN

    Library - https://developer.mozilla.org/en-US/docs/Web/API/ Document/cookie/Simple_document.cookie_framework!
  8. WebStorage! •  LocalStorage/SessionStorage! •  Super easy!! •  iOS 8+ kills

    it though (cuz - iOS)! •  Tips: Use for caching - but assume it won't persist!
  9. WebSQL! •  Dead spec :(! •  But guess what -

    still works (http://caniuse.com/#feat=sql-storage)! •  But use SQLite instead!
  10. IndexedDB! •  The future of web storage!! •  Easy as

    rocket science!! •  Really, really, really, really bad iOS 9 support (fixed in 10)!
  11. File System! •  CRUD for the File System! •  You

    can do everything! •  It works!
  12. SQLite! •  Just works!! •  (As long as you know

    SQL ;)! •  cordova-sqlite-storage!
  13. if(window.localStorage) { var numHits = localStorage.getItem("numHits"); if(!numHits) numHits=0; else numHits

    = parseInt(numHits, 10); numHits++; localStorage.setItem("numHits",numHits); $("#resultDiv").text("You have visited this site "+numHits +" times."); }
  14. var openRequest = indexedDB.open("ora_idb1",1); openRequest.onupgradeneeded = function(e) { var thisDB

    = e.target.result; console.log("running onupgradeneeded"); if(!thisDB.objectStoreNames.contains("people")) { var peopleOS = thisDB.createObjectStore("people", {keyPath: "email"}); } }
  15. var transaction = db.transaction(["people"],"readwrite"); //Ask for the objectStore var store

    = transaction.objectStore("people"); //Define a person var person = { name:name, email:email, created:new Date().getTime() } //Perform the add var request = store.add(person); request.onerror = function(e) { console.log("Error",e.target.error.name); //some type of error handler } request.onsuccess = function(e) { console.log("Woot! Did it"); }
  16. db = window.openDatabase("notestrap", "1.0", "Note App", 5*1024*1024); //Handle initial creation

    and then load up the notes db.transaction(function(tx) { tx.executeSql("create table if not exists notes(id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, body TEXT, updated DATE)"); }, dbError,function(tx) { getNotes(); });
  17. function getNotes(search) { db.readTransaction(function(tx) { if(!search) { tx.executeSql("select id,title,body,updated from

    notes order by updated desc", [], displayNotes); } else { var fuzzy = "%" + search + "%"; tx.executeSql("select id,title,body,updated from notes where title like ? or body like ? order by updated desc", [fuzzy,fuzzy], displayNotes); } }, dbError); }
  18. "Use the Library, Luke!"! •  Lockr (LocalStorage only)! •  Dexie

    (IDB)! •  localForage! •  pouchdb (syncs!)!
  19. But wait...! •  They speak a different language (that's cool)!

    •  They use a different unit of measurement (that's mostly cool too)! •  "NASA lost a $125 million Mars orbiter because a Lockheed Martin engineering team used English units of measurement while the agency's team used the more conventional metric system for a key spacecraft operation..." (oh crap)! •  They write numbers differently (that's just insane)!
  20. Issues! •  Formatting:! •  Numbers change! •  Currencies change! • 

    Dates change! •  UI changes:! •  Buttons! •  Labels! •  Etc!
  21. Solutions (Formatting)! •  https://www.npmjs.com/package/cordova-plugin-globalization! •  cordova plugin add cordova-plugin-globalization! • 

    Supports numbers, currencies, and dates! •  Supports getting information about locale/language! •  Supports getting information about formats! •  Even supports isDayLightSavingsTime – because that's still a thing apparently!
  22. Even More Solutions! •  Intl! •  ECMAScript Internationalization API! • 

    OMG AWESOME NO PLUGIN NO LIBRARY PERFECT!!!!!!!!!!!!!! 11!!!!! •  Let's check CanIUse.com!
  23. That other problem...! •  What does "Add to Cart" look

    like in French?! •  Replace buttons/labels/etc with tokens! •  Replace tokens with the right language value!
  24. { "age": "Age", "email": "Email", "firstname": "First Name", "lastname": "Last

    Name", "register": "Register", "username": "Username" }
  25. .value('localeConf', { basePath: 'lang', defaultLocale: 'en-US', sharedDictionary: 'common', fileExtension: '.json',

    persistSelection: false, cookieName: 'COOKIE_LOCALE_LANG', observableAttrs: new RegExp('^data-(?!ng-|i18n)'), delimiter: '::' }).value('localeSupported', [ 'en-US', 'zh-CHS', 'fr-FR' ]);
  26. General Tips! •  Test on a real device! •  Use

    native UI as much as possible (dialogs plugin)! •  Use a framework!
  27. Performance! •  Look at what you load over the network!

    •  A secret: JSON isn't always slim (look at the number of rows and the size of each row)! •  Provide instant feedback!
  28. Performance! •  Use touch vs click! •  300ms! •  Old

    news: Removed in Chrome 32 (for mobile optimized sites)! •  <meta name="viewport" content="width=device-width">! •  Also removed from IE/Edge, FF, and Mobile Safari in iOS9.3!
  29. Performance! •  Use the dev tools!! •  https://developers.google.com/web/tools/chrome-devtools/profile/ evaluate-performance/?hl=en! • 

    https://developer.apple.com/library/mac/documentation/ AppleApplications/Conceptual/Safari_Developer_Guide/ Instruments/Instruments.html!
  30. Wrap Up! •  Contact me at raymondcamden.com! •  Contact me

    at @raymondcamden! •  Share your pain to help others!