Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Firefox OS Workshop @ Serbia & Montenegro - Training
Ähnlich wie Firefox OS Workshop @ Serbia & Montenegro - Training (20)
Mehr von Jan Jongboom
Mehr von Jan Jongboom (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Firefox OS Workshop @ Serbia & Montenegro - Training
- 1. Firefox OS workshop Part 1I: Getting your first app up & running Jan Jongboom
- 3. UI elements
- 4. ListView
- 5. ListView
- 6. Headers
- 7. Headers
- 8. Building Blocks • Plain HTML / CSS • Customizable like any HTML element • Cross platform (also iOS,Android)
- 9. Data binding with AngularJS • AngularJS is a modern javascript framework made by Google • Does proper MVC in the browser • Amazing data binding: no dealing with DOM
- 13. Controller boilerplate 1. Get reference to our app 2. Say we want to add controller with name 3. Dependency injection 4. Controller constructor 5. Logic js/controllers/list.js
- 14. Controller boilerplate 1. Get reference to our app 2. Say we want to add controller with name 3. Dependency injection 4. Controller constructor 5. Logic js/controllers/list.js
- 15. Controller boilerplate 1. Get reference to our app 2. Say we want to add controller with name 3. Dependency injection 4. Controller constructor 5. Logic js/controllers/list.js
- 16. Controller boilerplate 1. Get reference to our app 2. Say we want to add controller with name 3. Dependency injection 4. Controller constructor 5. Logic js/controllers/list.js
- 17. Controller boilerplate 1. Get reference to our app 2. Say we want to add controller with name 3. Dependency injection 4. Controller constructor 5. Logic js/controllers/list.js
- 18. Controller boilerplate 1. Get reference to our app 2. Say we want to add controller with name 3. Dependency injection 4. Controller constructor 5. Logic js/controllers/list.js
- 19. Add some magic • Consume $timeout service • Tell DI framework • Use the service js/controllers/list.js
- 20. Add some magic • Consume $timeout service • Tell DI framework • Use the service js/controllers/list.js
- 21. Add some magic • Consume $timeout service • Tell DI framework • Use the service js/controllers/list.js
- 23. Testing the app • Get Firefox • Firefox OS Simulator (https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/)
- 27. github.com / comoyo / ffos-list-detail
- 28. github.com / comoyo / ffos-list-detail
- 31. Get out your phone • Settings > Device Information > More information > Developer • Enable ‘Remote debugging’
- 32. Firefox OS workshop Part III: Consuming third party data sources Jan Jongboom
- 33. So what do we have? • An app with a list / detail view • Running on a phone • Data comes from a static list (js/services/database.js)
- 34. Third party data • Data comes from a server • Example: CNN NewsFlash • Here’s an API that spits out JSON http://scrapey2.herokuapp.com/c/jan/ ?url=http://api.cnn.com
- 36. HTTP requests • Consume HTTP service • Call http.get(url, options) • Returns request object
- 37. HTTP requests • Consume HTTP service • Call http.get(url, options) • Returns request object
- 38. HTTP requests • Consume HTTP service • Call http.get(url, options) • Returns request object
- 39. HTTP requests • Consume HTTP service • Call http.get(url, options) • Returns request object
- 40. Response as data source js/controllers/list.js
- 41. Adding a nice image • Look up ‘Lists’ on buildingfirefoxos.com • And we find information on images as well
- 46. Linking to another route $navigate.go(url, effect)
- 47. CNN newsfeed: no nice IDs :-(
- 48. Workaround • /some/url/@*Ddqdhq7/////~~21721 • /some/url/?whu=@*Ddqdhq7/////~~21721 • Leverage search
- 50. Loading detail info Same pattern as with the list js/controllers/detail.js
- 52. Firefox OS workshop Part IV:Taking advantage of the phone Jan Jongboom
- 53. Phone has sensors • Accelerometer • Vibration • GPS • Ambient light levels • Proximity • Etc. etc. etc.
- 55. Implementing cool stuff • Shake to refresh • Feel free to choose something else... • https://developer.mozilla.org
- 56. Shake to refresh • Detect shake • Let the user know with a vibration • Refresh news list
- 57. Shake detection service • Detect shake • Emit event • Place in js/services/ directory • http://bit.ly/ffos-shake
- 58. js/services/shaking.js Monitor accelerometer Check position every 150 ms. Shaken enough? Broadcast event!
- 59. Bootstrapping • We use RequireJS • Explicitly load shaking service js/main.js
- 60. React on shake js/controllers/list.js Test it by pushing to device!
- 61. Ideas... • Refresh the list of news on shake • Add progress indicator • http://buildingfirefoxos.com/building-blocks/ progress-and-activity/
- 62. Firefox OS workshop PartV: Offline Jan Jongboom
- 63. Offline • Internet connections are unreliable • Roaming is expensive • Web != online
- 64. Two types of resources • Application resources • HTML / CSS / javascript / assets • Data • E.g. List of news items
- 65. Application assets • Packaged application • ZIP app and submit to marketplace • Pro: super easy • Con: Hard to update, higher barrier to try app
- 66. Application assets • Hosted application with appcache • Pro: just a website, updating works like any site, simple development cycle • Con: discoverability, user has to load the app once from internet connection to cache assets
- 67. Depends on the app
- 68. Appcache
- 69. App caching our app • Specify HTML / CSS / JS • Extra assets (images?) • Prefer online manifest.appcache
- 70. App caching our app • Specify HTML / CSS / JS • Extra assets (images?) • Prefer online manifest.appcache
- 71. App caching our app • Specify HTML / CSS / JS • Extra assets (images?) • Prefer online manifest.appcache
- 72. Combine JS / CSS • Faster (less HTTP requests) • Appcache is way easier (no manual work)
- 73. Manifest file • Specify release version to be used • Not necessary with built in node.js server • Change launch_path > index.release.html manifest.webapp
- 74. Using Chrome? chrome://appcache-internals/ And clear appcache for your app (doesn’t respect prefer-online)
- 75. Third party requests • http.get has idbCache option • Specify cache key, expiration time • No internet connection? Always from cache! js/controllers/list.js
- 76. Also use to precache • Load all stories on index • Way faster navigation • Offline also available! • Make sure to also use the same cache key in detail.js ! js/controllers/list.js
- 77. Caching resources • Browser does caching • Have to have proper expiration headers • No additional work js/controllers/list.js