Make something real for Firefox OS with Mozilla app templates

1Wednesday, 12 September 12

OHAI

2Wednesday, 12 September 12

@TOFUMATT AND @ZALUN

3Wednesday, 12 September 12

MAKE SOMETHING REAL FOR FIREFOX OS WITH

MOZILLA APP TEMPLATES

4Wednesday, 12 September 12

FIRST,we’ll need a phone

5Wednesday, 12 September 12

EMULATING FIREFOX OS

•Download and install B2G emulator (95MB)

•Checkout gaia project (200MB)

•Create profile (50MB)

•Run $> b2g -profile /Users/{user}/gaia/profile

6Wednesday, 12 September 12

B2G + GAIA

7Wednesday, 12 September 12

STANDARD WEBDEV TOOLSMAKE USE OF THEM

8Wednesday, 12 September 12

INSPECTOR

9Wednesday, 12 September 12

3D VIEW

10Wednesday, 12 September 12

RESPONSIVE VIEW

11Wednesday, 12 September 12

WEB CONSOLE

12Wednesday, 12 September 12

JSFIDDLE DRAFT FEATURE

13Wednesday, 12 September 12

X-TAGS: BUILDING BLOCKS

14Wednesday, 12 September 12

X-TAGS

• accordion • actionbar • alert-popup • autosuggest • date-time-picker • dialog-prompt • dialog-toast • dragbox • dropdown-menu

• flipbox • grid-list • index-scroller• list-view• map• mediaquery• modal • overlay • pager • panel

• select-list• shiftbox• slidebox• slider• tabbox• time-picker-analog• toggle-switch• toggler • search-list

15Wednesday, 12 September 12

MANY OTHER TOOLS...

16Wednesday, 12 September 12

PRE-APP SUBMISSION

•Write your app

•Create Manifestcheck it on http://appmanifest.org

•Host the app somewhere for github $> volo ghdeploy

17Wednesday, 12 September 12

http://marketplace.mozilla.org/developers

18Wednesday, 12 September 12

IN STORE!

19Wednesday, 12 September 12

OK, SO HOW DO I BUILD IT?!

20Wednesday, 12 September 12

WE’VE THOUGHT OF THAT

21Wednesday, 12 September 12

22Wednesday, 12 September 12

MANY MOVING PARTS

23Wednesday, 12 September 12

•Appcache and web app manifests

•Asset management

•Responsive design

•Server to host an app

•Gaming template

•Payment API

• iOS Compatibility

•Modular JavaScript

•App-specific libraries

•Kitchen sink?

24Wednesday, 12 September 12

25Wednesday, 12 September 12

APP TEMPLATES

26Wednesday, 12 September 12

•Standard App Stub

•2D Game Template

•Server Template

27Wednesday, 12 September 12

•Appcache (App works offline)

• iOS, FirefoxOS, etc.

•Responsive Design

•Works with volo

APP STUB

28Wednesday, 12 September 12

•Animation Loop

•Canvas + JS

•Desktop + Mobile

•Keyboard, Mouse, and Gamepad

WEBGAMESTUB

29Wednesday, 12 September 12

•node.js + express

•Common use cases

•Deploy on Heroku

• Includes App Stub

SUTTHISAN สุทธิสาร

30Wednesday, 12 September 12

Web app package and deploy management

VOLO

31Wednesday, 12 September 12

It does all this awesome stuff OMG!!!1♥♥♥VOLO

32Wednesday, 12 September 12

ONE-STEP DEPLOY

33Wednesday, 12 September 12

COMPRESS ASSETS

34Wednesday, 12 September 12

CREATE MANIFESTS

35Wednesday, 12 September 12

SHOW ME THE MONEY

36Wednesday, 12 September 12

BORING

37Wednesday, 12 September 12

MUCH COOLER

38Wednesday, 12 September 12

NOT JUST GAMES

39Wednesday, 12 September 12

BUILT INA DAY

40Wednesday, 12 September 12

TELEPONGTwo contributors in one afternoon

41Wednesday, 12 September 12

YOU CAN DO THIS

42Wednesday, 12 September 12

NOW GO MAKEAWESOME APPS!

43Wednesday, 12 September 12

QUESTIONS?

44Wednesday, 12 September 12

THANKS!http://tinyurl.com/mozcamp-apps

45Wednesday, 12 September 12