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