Firefox OS Workshop @ Serbia & Montenegro - Training
•
0 likes•1,879 views
This document summarizes the key points from a workshop on building Firefox OS applications. It discusses using AngularJS for data binding, making HTTP requests to consume third party APIs, taking advantage of phone sensors like the accelerometer, and strategies for making apps work offline through app caching and caching data requests. The workshop covers building a news reader app as an example to demonstrate these techniques.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Firefox OS Workshop @ Serbia & Montenegro - Training
Similar to Firefox OS Workshop @ Serbia & Montenegro - Training (20)
More from Jan Jongboom
More from Jan Jongboom (20)
Recently uploaded
Recently uploaded (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