Upload
jan-jongboom
View
922
Download
1
Embed Size (px)
Citation preview
Firefox OS workshopPart 1I: Getting your first app up & running
Jan 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 framework made by Google
• Does proper MVC in the browser
• Amazing data binding: no dealing with DOM
Populate ListView
views/list.html js/controllers/list.js
Populate ListView
views/list.html js/controllers/list.js
Populate ListView
views/list.html js/controllers/list.js
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
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
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
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
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
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
Add some magic
• Consume $timeout service
• Tell DI framework
• Use the service
js/controllers/list.js
Add some magic
• Consume $timeout service
• Tell DI framework
• Use the service
js/controllers/list.js
Add some magic
• Consume $timeout service
• Tell DI framework
• Use the service
js/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 > More
information > Developer
• Enable ‘Remote debugging’
Firefox OS workshopPart III: Consuming third party data sources
Jan 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/database.js)
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
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 source
js/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.js
js/controllers/detail.js
Routing detail pagejs/app.js
js/controllers/detail.js
Routing detail pagejs/app.js
js/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.html
js/controllers/detail.js
Loading detail info
Same pattern as with the list
js/controllers/detail.js
Super simple template
Firefox OS workshopPart IV: Taking advantage of the phone
Jan Jongboom
Phone has sensors
• Accelerometer
• Vibration
• GPS
• Ambient light levels
• Proximity
• Etc. etc. etc.
Vibration
Super 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.js
Monitor accelerometer
Check position every 150 ms.
Shaken enough? Broadcast event!
Bootstrapping
• We use RequireJS
• Explicitly load shaking service
js/main.js
React on shake
js/controllers/list.js
Test it by pushing to device!
Ideas...
• Refresh the list of news on shake
• Add progress indicator
• http://buildingfirefoxos.com/building-blocks/progress-and-activity/
Firefox OS workshopPart V: Offline
Jan 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 barrier to try app
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
Depends on the app
Appcache
App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.appcache
App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.appcache
App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.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.release.html
manifest.webapp
Using Chrome?
chrome://appcache-internals/
And clear appcache for your app (doesn’t respect prefer-online)
Third party requests
• http.get has idbCache option
• Specify cache key, expiration time
• No internet connection? Always from cache!
js/controllers/list.js
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
Caching resources
• Browser does caching
• Have to have proper expiration headers
• No additional work
js/controllers/list.js
Twitter: @janjongboom
slideshare.net/janjongboom