Firefox OS workshopPart 1I: Getting your first app up & runningJan Jongboom
buildingfirefoxos.com
UI elements
ListView
ListView
Headers
Headers
Building Blocks• Plain HTML / CSS• Customizable like any HTML element• Cross platform (also iOS,Android)
Data binding with AngularJS• AngularJS is a modern javascript frameworkmade by Google• Does proper MVC in the browser• Ama...
Populate ListViewviews/list.html js/controllers/list.js
Populate ListViewviews/list.html js/controllers/list.js
Populate ListViewviews/list.html js/controllers/list.js
Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Contro...
Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Contro...
Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Contro...
Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Contro...
Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Contro...
Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Contro...
Add some magic• Consume $timeoutservice• Tell DI framework• Use the servicejs/controllers/list.js
Add some magic• Consume $timeoutservice• Tell DI framework• Use the servicejs/controllers/list.js
Add some magic• Consume $timeoutservice• Tell DI framework• Use the servicejs/controllers/list.js
Run it!js/controllers/list.js
Testing the app• Get Firefox• Firefox OS Simulator(https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/)
Select www/manifest.webapp
Select www/manifest.webapp
github.com / comoyo / ffos-list-detail
github.com / comoyo / ffos-list-detail
Get out your phone• Settings > Device Information > Moreinformation > Developer• Enable ‘Remote debugging’
Firefox OS workshopPart III: Consuming third party data sourcesJan Jongboom
So what do we have?• An app with a list / detail view• Running on a phone• Data comes from a static list(js/services/datab...
Third party data• Data comes from a server• Example: CNN NewsFlash• Here’s an API that spits out JSONhttp://scrapey2.herok...
HTTP requests• Consume HTTP service• Call http.get(url, options)• Returns request object
HTTP requests• Consume HTTP service• Call http.get(url, options)• Returns request object
HTTP requests• Consume HTTP service• Call http.get(url, options)• Returns request object
HTTP requests• Consume HTTP service• Call http.get(url, options)• Returns request object
Response as data sourcejs/controllers/list.js
Adding a nice image• Look up ‘Lists’ on buildingfirefoxos.com• And we find information on images as well
Databinding images!views/list.html
Routing detail pagejs/app.jsjs/controllers/detail.js
Routing detail pagejs/app.jsjs/controllers/detail.js
Routing detail pagejs/app.jsjs/controllers/detail.js
Linking to another route$navigate.go(url, effect)
CNN newsfeed: no nice IDs:-(
Workaround• /some/url/@*Ddqdhq7/////~~21721• /some/url/?whu=@*Ddqdhq7/////~~21721• Leverage search
views/list.htmljs/controllers/detail.js
Loading detail infoSame pattern as with the listjs/controllers/detail.js
Super simple template
Firefox OS workshopPart IV:Taking advantage of the phoneJan Jongboom
Phone has sensors• Accelerometer• Vibration• GPS• Ambient light levels• Proximity• Etc. etc. etc.
VibrationSuper easy detection
Implementing cool stuff• Shake to refresh• Feel free to choose something else...• https://developer.mozilla.org
Shake to refresh• Detect shake• Let the user know with a vibration• Refresh news list
Shake detection service• Detect shake• Emit event• Place in js/services/ directory• http://bit.ly/ffos-shake
js/services/shaking.jsMonitor accelerometerCheck position every 150 ms.Shaken enough? Broadcast event!
Bootstrapping• We use RequireJS• Explicitly load shaking servicejs/main.js
React on shakejs/controllers/list.jsTest it by pushing to device!
Ideas...• Refresh the list of news on shake• Add progress indicator• http://buildingfirefoxos.com/building-blocks/progress-...
Firefox OS workshopPartV: OfflineJan Jongboom
Offline• Internet connections are unreliable• Roaming is expensive• Web != online
Two types of resources• Application resources• HTML / CSS / javascript / assets• Data• E.g. List of news items
Application assets• Packaged application• ZIP app and submit to marketplace• Pro: super easy• Con: Hard to update, higher ...
Application assets• Hosted application with appcache• Pro: just a website, updating works likeany site, simple development...
Depends on the app
Appcache
App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
Combine JS / CSS• Faster (less HTTP requests)• Appcache is way easier (no manual work)
Manifest file• Specify release version to be used• Not necessary with built in node.js server• Change launch_path > index.r...
Using Chrome?chrome://appcache-internals/And clear appcache for your app(doesn’t respect prefer-online)
Third party requests• http.get has idbCacheoption• Specify cache key,expiration time• No internet connection?Always from c...
Also use to precache• Load all stories on index• Way faster navigation• Offline also available!• Make sure to also usethe s...
Caching resources• Browser does caching• Have to have properexpiration headers• No additional workjs/controllers/list.js
Twitter: @janjongboomslideshare.net/janjongboom
Firefox OS Workshop @ Serbia & Montenegro - Training
Firefox OS Workshop @ Serbia & Montenegro - Training
Firefox OS Workshop @ Serbia & Montenegro - Training
Firefox OS Workshop @ Serbia & Montenegro - Training
Upcoming SlideShare
Loading in …5
×

Firefox OS Workshop @ Serbia & Montenegro - Training

1,563 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,563
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox OS Workshop @ Serbia & Montenegro - Training

  1. 1. Firefox OS workshopPart 1I: Getting your first app up & runningJan Jongboom
  2. 2. buildingfirefoxos.com
  3. 3. UI elements
  4. 4. ListView
  5. 5. ListView
  6. 6. Headers
  7. 7. Headers
  8. 8. Building Blocks• Plain HTML / CSS• Customizable like any HTML element• Cross platform (also iOS,Android)
  9. 9. Data binding with AngularJS• AngularJS is a modern javascript frameworkmade by Google• Does proper MVC in the browser• Amazing data binding: no dealing with DOM
  10. 10. Populate ListViewviews/list.html js/controllers/list.js
  11. 11. Populate ListViewviews/list.html js/controllers/list.js
  12. 12. Populate ListViewviews/list.html js/controllers/list.js
  13. 13. Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Controller constructor5. Logicjs/controllers/list.js
  14. 14. Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Controller constructor5. Logicjs/controllers/list.js
  15. 15. Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Controller constructor5. Logicjs/controllers/list.js
  16. 16. Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Controller constructor5. Logicjs/controllers/list.js
  17. 17. Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Controller constructor5. Logicjs/controllers/list.js
  18. 18. Controller boilerplate1. Get reference to our app2. Say we want to addcontroller with name3. Dependency injection4. Controller constructor5. Logicjs/controllers/list.js
  19. 19. Add some magic• Consume $timeoutservice• Tell DI framework• Use the servicejs/controllers/list.js
  20. 20. Add some magic• Consume $timeoutservice• Tell DI framework• Use the servicejs/controllers/list.js
  21. 21. Add some magic• Consume $timeoutservice• Tell DI framework• Use the servicejs/controllers/list.js
  22. 22. Run it!js/controllers/list.js
  23. 23. Testing the app• Get Firefox• Firefox OS Simulator(https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/)
  24. 24. Select www/manifest.webapp
  25. 25. Select www/manifest.webapp
  26. 26. github.com / comoyo / ffos-list-detail
  27. 27. github.com / comoyo / ffos-list-detail
  28. 28. Get out your phone• Settings > Device Information > Moreinformation > Developer• Enable ‘Remote debugging’
  29. 29. Firefox OS workshopPart III: Consuming third party data sourcesJan Jongboom
  30. 30. 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)
  31. 31. Third party data• Data comes from a server• Example: CNN NewsFlash• Here’s an API that spits out JSONhttp://scrapey2.herokuapp.com/c/jan/?url=http://api.cnn.com
  32. 32. HTTP requests• Consume HTTP service• Call http.get(url, options)• Returns request object
  33. 33. HTTP requests• Consume HTTP service• Call http.get(url, options)• Returns request object
  34. 34. HTTP requests• Consume HTTP service• Call http.get(url, options)• Returns request object
  35. 35. HTTP requests• Consume HTTP service• Call http.get(url, options)• Returns request object
  36. 36. Response as data sourcejs/controllers/list.js
  37. 37. Adding a nice image• Look up ‘Lists’ on buildingfirefoxos.com• And we find information on images as well
  38. 38. Databinding images!views/list.html
  39. 39. Routing detail pagejs/app.jsjs/controllers/detail.js
  40. 40. Routing detail pagejs/app.jsjs/controllers/detail.js
  41. 41. Routing detail pagejs/app.jsjs/controllers/detail.js
  42. 42. Linking to another route$navigate.go(url, effect)
  43. 43. CNN newsfeed: no nice IDs:-(
  44. 44. Workaround• /some/url/@*Ddqdhq7/////~~21721• /some/url/?whu=@*Ddqdhq7/////~~21721• Leverage search
  45. 45. views/list.htmljs/controllers/detail.js
  46. 46. Loading detail infoSame pattern as with the listjs/controllers/detail.js
  47. 47. Super simple template
  48. 48. Firefox OS workshopPart IV:Taking advantage of the phoneJan Jongboom
  49. 49. Phone has sensors• Accelerometer• Vibration• GPS• Ambient light levels• Proximity• Etc. etc. etc.
  50. 50. VibrationSuper easy detection
  51. 51. Implementing cool stuff• Shake to refresh• Feel free to choose something else...• https://developer.mozilla.org
  52. 52. Shake to refresh• Detect shake• Let the user know with a vibration• Refresh news list
  53. 53. Shake detection service• Detect shake• Emit event• Place in js/services/ directory• http://bit.ly/ffos-shake
  54. 54. js/services/shaking.jsMonitor accelerometerCheck position every 150 ms.Shaken enough? Broadcast event!
  55. 55. Bootstrapping• We use RequireJS• Explicitly load shaking servicejs/main.js
  56. 56. React on shakejs/controllers/list.jsTest it by pushing to device!
  57. 57. Ideas...• Refresh the list of news on shake• Add progress indicator• http://buildingfirefoxos.com/building-blocks/progress-and-activity/
  58. 58. Firefox OS workshopPartV: OfflineJan Jongboom
  59. 59. Offline• Internet connections are unreliable• Roaming is expensive• Web != online
  60. 60. Two types of resources• Application resources• HTML / CSS / javascript / assets• Data• E.g. List of news items
  61. 61. Application assets• Packaged application• ZIP app and submit to marketplace• Pro: super easy• Con: Hard to update, higher barrier totry app
  62. 62. Application assets• Hosted application with appcache• Pro: just a website, updating works likeany site, simple development cycle• Con: discoverability, user has to load theapp once from internet connection tocache assets
  63. 63. Depends on the app
  64. 64. Appcache
  65. 65. App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
  66. 66. App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
  67. 67. App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
  68. 68. Combine JS / CSS• Faster (less HTTP requests)• Appcache is way easier (no manual work)
  69. 69. Manifest file• Specify release version to be used• Not necessary with built in node.js server• Change launch_path > index.release.htmlmanifest.webapp
  70. 70. Using Chrome?chrome://appcache-internals/And clear appcache for your app(doesn’t respect prefer-online)
  71. 71. Third party requests• http.get has idbCacheoption• Specify cache key,expiration time• No internet connection?Always from cache!js/controllers/list.js
  72. 72. Also use to precache• Load all stories on index• Way faster navigation• Offline also available!• Make sure to also usethe same cache key indetail.js !js/controllers/list.js
  73. 73. Caching resources• Browser does caching• Have to have properexpiration headers• No additional workjs/controllers/list.js
  74. 74. Twitter: @janjongboomslideshare.net/janjongboom

×