Developing for Firefox OS

Slide 1

Slide 1 text

FOR FIREFOX OS DEVELOPING @SERGIMANSILLA Friday, June 7, 13

Slide 2

Slide 2 text

@sergimansilla sergi Who am I? Friday, June 7, 13

Slide 3

Slide 3 text

Why Firefox OS Friday, June 7, 13

Slide 4

Slide 4 text

Write once, run...once Different APIs Different languages Different stores Why Firefox OS Friday, June 7, 13

Slide 5

Slide 5 text

The gap is gone, and it’s time to move on. Why Firefox OS Friday, June 7, 13

Slide 6

Slide 6 text

New mobile OS Leverages open web WebAPI standards No walled gardens Why Firefox OS Friday, June 7, 13

Slide 7

Slide 7 text

Friday, June 7, 13

Slide 8

Slide 8 text

Friday, June 7, 13

Slide 9

Slide 9 text

Device independence Why will users care? Friday, June 7, 13

Slide 10

Slide 10 text

No need to repurchase Higher quality apps No brand discrimination Device independence Why will users care? Friday, June 7, 13

Slide 11

Slide 11 text

Developer bliss Developer bliss Friday, June 7, 13

Slide 12

Slide 12 text

You already know this stuff Developer bliss Friday, June 7, 13

Slide 13

Slide 13 text

HTML5, CSS3, JavaScript Each site is an app Extreme flexibility Great tooling Developer bliss Friday, June 7, 13

Slide 14

Slide 14 text

No developer fees No API breaks No need for a phone No dependencies Friday, June 7, 13

Slide 15

Slide 15 text

https://addons.mozilla.org/en-US/ﬁrefox/addon/ﬁrefox-os-simulator/ Developer tools Friday, June 7, 13

Slide 16

Slide 16 text

Developer tools Friday, June 7, 13

Slide 17

Slide 17 text

It also works on Android! Android Friday, June 7, 13

Slide 18

Slide 18 text

Open web apps Built using standard web technologies Small additions to turn them into apps Responsive to adapt to any device Friday, June 7, 13

Slide 19

Slide 19 text

Create a Firefox OS app 1. Develop web app using HTML5, JavaScript and CSS 2. Create an app manifest ﬁle 3. Publish the app Friday, June 7, 13

Slide 20

Slide 20 text

Creating a Firefox OS app index.html Friday, June 7, 13

Slide 21

Slide 21 text

Creating a Firefox OS app index.html Friday, June 7, 13

Slide 22

Slide 22 text

Sniff before you use! Friday, June 7, 13

Slide 23

Slide 23 text

Sniff before you use! Friday, June 7, 13

Slide 24

Slide 24 text

Any hipster framework/technology Friday, June 7, 13

Slide 25

Slide 25 text

Develop a web app Reuse any existing HTML5 website Use Web APIs for more options Make it responsive! Friday, June 7, 13

Slide 26

Slide 26 text

Create a .webapp extension Create a ﬁle with a .webapp extension Friday, June 7, 13

Slide 27

Slide 27 text

manifest.webapp Create a .webapp extension Friday, June 7, 13

Slide 28

Slide 28 text

Create a .webapp extension Friday, June 7, 13

Slide 29

Slide 29 text

Create a .webapp extension Serve with Content-type/MIME type: application/x-web-app-manifest+json Friday, June 7, 13

Slide 30

Slide 30 text

https://marketplace.ﬁrefox.com/developers/validator Create a .webapp extension Friday, June 7, 13

Slide 31

Slide 31 text

Running it in the simulator Friday, June 7, 13

Slide 32

Slide 32 text

Running it in the simulator Friday, June 7, 13

Slide 33

Slide 33 text

Running it in the simulator Friday, June 7, 13

Slide 34

Slide 34 text

Running it in the simulator Friday, June 7, 13

Slide 35

Slide 35 text

Friday, June 7, 13

Slide 36

Slide 36 text

Friday, June 7, 13

Slide 37

Slide 37 text

Friday, June 7, 13

Slide 38

Slide 38 text

Friday, June 7, 13

Slide 39

Slide 39 text

Friday, June 7, 13

Slide 40

Slide 40 text

OS/X: out of the box Windows: needs drivers Linux: follow instructions Push to device Running it in the simulator Friday, June 7, 13

Slide 41

Slide 41 text

Open web apps https://developer.mozilla.org/docs/Apps/Getting_Started Friday, June 7, 13

Slide 42

Slide 42 text

marketplace.ﬁrefox.com Publish the app Friday, June 7, 13

Slide 43

Slide 43 text

marketplace.ﬁrefox.com Marketplace Friday, June 7, 13

Slide 44

Slide 44 text

marketplace.ﬁrefox.com Marketplace Friday, June 7, 13

Slide 45

Slide 45 text

marketplace.ﬁrefox.com/developers/ Marketplace Friday, June 7, 13

Slide 46

Slide 46 text

https://wiki.mozilla.org/WebAPI WebAPIs Friday, June 7, 13

Slide 47

Slide 47 text

arewemobileyet.com Opening up phones Friday, June 7, 13

Slide 48

Slide 48 text

Verification needed Only Mozilla and vendors Types of apps No verification needed Unprivileged Web content Regular web apps Privileged More access More responsibility Certified Device-critical apps Friday, June 7, 13

Slide 49

Slide 49 text

http://mzl.la/11F4kSn Setting permissions Friday, June 7, 13

Slide 50

Slide 50 text

Regular APIs Vibration API (W3C) Screen Orientation Geolocation API Mouse Lock API (W3C) Open WebApps Network Information API (W3C) Battery Status API (W3C) Web Activities Push Notiﬁcations API WebFM API WebPayment IndexedDB (W3C) Ambient light sensor Proximity sensor Notiﬁcation Friday, June 7, 13

Slide 51

Slide 51 text

Still requires authentication Friday, June 7, 13

Slide 52

Slide 52 text

Battery status Friday, June 7, 13

Slide 53

Slide 53 text

Notiﬁcation Friday, June 7, 13

Slide 54

Slide 54 text

Vibration API Friday, June 7, 13

Slide 55

Slide 55 text

Device proximity Friday, June 7, 13

Slide 56

Slide 56 text

Privileged APIs Device Storage API Browser API TCP Socket API Contacts API systemXHR Friday, June 7, 13

Slide 57

Slide 57 text

Contacts Friday, June 7, 13

Slide 58

Slide 58 text

Certiﬁed APIs WebTelephony WebSMS Idle API Settings API Power Management API Voicemail Mobile Connection API WiFi Information API WebBluetooth Permissions API Network Stats API Camera API Time/Clock API Attention screen Friday, June 7, 13

Slide 59

Slide 59 text

WebSMS Friday, June 7, 13

Slide 60

Slide 60 text

http://bit.ly/ffos-magic Firefox OS Boilerplate app Friday, June 7, 13

Slide 61

Slide 61 text

Camera only available for certiﬁed apps :( Friday, June 7, 13

Slide 62

Slide 62 text

Application bus Friday, June 7, 13

Slide 63

Slide 63 text

Hey I need an image! Sure, I can provide you with one! Web activities Friday, June 7, 13

Slide 64

Slide 64 text

Web activities Friday, June 7, 13

Slide 65

Slide 65 text

Web is built for connectivity :-( Application assets Server data Offline Friday, June 7, 13

Slide 66

Slide 66 text

ZIP up your app Lose flexibility of the web But very easy! Use appcache Browser feature Caching assets Friday, June 7, 13

Slide 67

Slide 67 text

manifest.appcache Specify HTML / CSS / JS Extra assets (images?) Prefer online Caching assets Friday, June 7, 13

Slide 68

Slide 68 text

manifest.appcache Specify HTML / CSS / JS Extra assets (images?) Prefer online Caching assets Friday, June 7, 13

Slide 69

Slide 69 text

manifest.appcache Specify HTML / CSS / JS Extra assets (images?) Prefer online Caching assets Friday, June 7, 13

Slide 70

Slide 70 text

github.com/comoyo/ffos-list-detail Demo app Friday, June 7, 13

Slide 71

Slide 71 text

Getting help irc://irc.mozilla.org/ #openwebapps Friday, June 7, 13

Slide 72

Slide 72 text

Thanks! Sergi Mansilla sergimansilla.com @sergimansilla Friday, June 7, 13

Slide 73

Slide 73 text

@sergimansilla github.com/sergi speakerdeck.com/sergi sergimansilla.com Questions? Friday, June 7, 13

Slide 74

Slide 74 text

https://addons.mozilla.org/firefox/addon/firefox-os-simulator/ sergimansilla.com/blog/promise-of-ffos/ http://arewemobileyet.com/ https://wiki.mozilla.org/WebAPI http://www.mozilla.org/en-US/firefoxos/ Links Friday, June 7, 13