Doing mobile web Apps for Firefox OS - the right way

Doing mobile web Apps for Firefox OS the right way

Andre Fiedler www.visualdrugs.net www.bessa-app.com

Let's assume everyone knows Firefox OS (FFOS). If you don't, you can read about it here:

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS

This presentation will give a very short overview about how to write apps for FFOS and some details on implementation specific topics like app design and performance.

Some parts are personal thoughts what's "good practice". Don't take them as given, there might be better choices. Some are experiences I had building Bessa App (www.bessa-app.com).

#Doi ngFirefoxOSApps 2/41

Parts of FFOS

· FFOS is made up of three parts

- Gonk - The 'OS' i.e. low level Linux kernel and hardware abstraction layer (HAL)

- Gecko -The application runtime, also present in your desktop and mobile Firefox

- Gaia - The front end of the OS build with HTML, CSS and java Script https://gith u b.com/mozi lla-b2g/ga ia


Basics of FFOS Apps

· like Gaia, FFOS Apps are build with HTML, CSS and java Script

· 2 types of apps, hosted and packaged apps

- hosted apps

- are like a web site

- user needs internet connection to run the app

- side note: webapps can be cached (cache.manifest) and run without inet connection. But it's not very well implemented, so don't trust!

- limited WebAPI calls

- easy updateable

- packaged apps

- zip file containing all resources to run the app

- runs without network access

- can access all possible WebAPI's


Basics of FFOS Apps the parts of an app

· a minimal app consists of

- a HTML file and

- an app manifest (hosted and packaged apps)

· app manifest

- is a JSON file

- contains metadata about the app like

- app name

- description

- developer info .

- ICOnS ...

- more about app manifests: https://developer.mozilla.org/en-US /docs/Apps/Manifest


Basics of FFOS Apps how to run apps?

· there are three ways to run apps

- in the browser

- in the simulator

- on real devices


Basics of FFOS Apps running apps in the browser

· use Firefox Nightly to get access to newest features and APis

· you can simulate a phone screen in Firefox by using the responsive design view: https:/ /developer. mozi II a .org/ en-US/docs/Too ls/Responsive_Design_ View

· you can easily use all debugging tools


Basics of FFOS Apps running apps in the simulator

· the FFOS Simulator is a Firefox browser addon

· can be installed from: https://addons.mozilla.org/de/firefox/addon/firefox-os-simulator/

· start it from the developer menu

· required for testing packaged apps

· don't trust the Simulator, it has much more RAM than the FFOS devices!


Basics of FFOS Apps running apps on real devices

· by now, you can buy a Geeksphone Keon or Peak

· or you can flash your Samsung Nexus 5, Galaxy 52 and Galaxy Nexus

· or your Sony Xperia™ E

· more devices with FFOS preinstalled will come out in the next months:

- ZTE Open

- Alcatel One Touch Fire

- Huawei and LG will follow

- Sony plans a high end device for next year


Organizing your app

· think about your folder structure

- src - a folder where all your source will rest

- take a look at the Gaia app folders: https://github.com/mozilla-b2g/gaia/tree/master/apps/clock

- build -all your automated building stuff

- mine contains a php script and some compilers (Google Closure Compiler, GLSL compiler, YUI compressor)

- more about building/packaging later

- release - the build script will put your ready to run application in here (packaged or not)

- think about backing up older versions of your app

- release-assets - manifest files, precompiled libraries, ...

- the build script will take these and merge them with the src


Organizing your app

· use javaScript pseudo-classes to separate application logic

· more aboutjavaScript pseudo-classes: http://stackoverflow.com/questions /1261 0394/javascript-classes

· classes I'm using

- Application class

- keeps an eye on the overall application

- GUI class

- handles all the DOM elements and their current state

- Helper classes

- like Menu, Utils, Logger, DemoMode, lmageProcessor, ...


Organizing your app

· manifest files

- don't call them

- cache.manifest

- webapp.manifest

- package.manifest

- better use

- manifest.appcache

- manifest.webapp

- manifest.package

· you will find them more easily

· but mostly, it's easier to define custom headers server side (different ext.)

- webapp manifest- JSON header

- cache manifest- plain text header


Lets talk about frameworks. really?


Lets talk about frameworks

· first- no framework comparison at this point- sorry;)

· this topic is about frameworks at all

· there are two kinds of frameworks

- small frameworks for specific purposes

- like Modernizr, iScroll, html2canvas, ...

- these are great, use them :)

- huge "all inclusive" frameworks

- like jQuery Mobile, Sencha Touch (ST), ...

- be aware of them!

- I will tell you why ...


Lets talk about frameworks Pro and Contra of "all inclusive" frameworks

· Pro

- you are able to build good looking apps in a very short time

- save time by abstraction of complexity

- much has already been "done"



· Contra

- usually more source code than necessary (Eg exceptions for WP 7/8, Android 2.1/2.2/2.3/3.0/4.0/4.1 /4.2, 88 6/7/10, iOS 5/6 ... phones, tablets, ... )

- often complex troubleshooting because frequently the programming of the framework must be "debugged", too (understanding the programming of the frameworks)

- special cases usually more complicated to achieve than building from scratch

- simple example: ST- try to get native scrolling in a list ...



· ST globally disables all "touch move" events

· so "overflow: scroll" is no longer possible

· disabling the behavior of ST cause some ST components no longer functional (eg Carousel}

· "caught in the framework"


Programming Performance.


Programming Performance

Let's build a datepicker!

1 2 3 4 5 6

7 8 9 10 11 12

13 14 15 16 17 18

19 20 21 22 23 24

25 26 27 28 29 30

Source: http://jsfiddle.net/SunboX/KkY6H/



comparing the first and last datepicker script (higher is better)

• first • last

Android 2.3.5 (1)

Firefox 19.0 (1)

0 1.250 2.500 3.750 5.000

operations per second (higher is better)

JSPerf: http://jsperf.com/simple-performance-test/4



· if doing a lot style and DOM manipulation, remove the element from the DOM first

- same for creating new elements, apply styles aso. before inserting into the DOM

· use DocumentFragment to insert many DOM elements at once


Ul Performance.


Ul Performance

· enlarge touchable areas

- that's why native iOS apps are feeling "snappier" when touching something- touchable areas are bigger than they appear

- http://mattgemmell.com/2008/1 0/29/favorites-ui-design/

- http:l/cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app

· use "rem" (read: root em) for sizing elements

- rem represents the font-size of the <html> element

- easily scale your app on different dpi/screen sizes

- FFOS has a bug, use this work around: https://github.com/mozilla-b2g/gaia/blob/master/shared/style /responsive.css


Ul Performance

check if you should use translate{x, y) instead of top I left

· can be faster (that's not always the case!}, I would suggest you to read http://css-tricks.com/tale-of-animation-performance/

· renders sub-pixels (smoother animations, may look unsharp) • top /left • translate(x, y)

Android 2.3.5 (1)

Rrefox 19.0 (1)

0 1.500 3.000 4.500 6.000

operations per second {higher is better)

JSPerf: http://jsperf.com/simple-positioning-test/2


Ul Performance

· be careful with dropshadow, textshadow, alpha transparency

- rendering these effects may take some time

· Firefox OS 8uildingblocks (88)

- use 88, they are well thought and optimized for FFOS

- http:/ /build i ngfi refoxos.com/bu i ld i ng-blocks/

- you have to copy them from the Gaia "shared" folder into your app directory


Localization.


Localization

· that's it, you're ready to go

· there are two ways to translate text

- statically inside you HTML

- put a data-llOn-id="ok" attribute in the element tag

- dynamically

- listening for the ~~localized" window event

- calling var text= navigator.mozLlOn. get ('ok');


Packaging.


Packaging

· do write a simple build script for packaging

· increment the build number

· fetch the files from the 11Src" directory

· replace placeholders (for paths, version numbers, current date, ... )

- {{app-path}}, {{app-version}} ...

· replace debug marks:

//<debug>

console.log('app running');

//</debug>

· do some minification I compiling (if you like to)

· zip all files

· done

#Doi ngFirefoxOSApps

JAVASCRIPT

35/41

Differences between devices.


Differences between devices

· performance- test on low end devices first

- if your app performs well on low end devices, it will run smooth on high end

. dpi

- check high resolution displays!

- you will get rejected from marketplace if your apps buttons are too small

- Handling High DPI (Retina) displays in WebGL: http://www.khronos.org /webgl/wiki/HandlingHighDPI

· think of devices capable of both touch and click events;)

- https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-notthe-how/


Differences between devices

· WebGL isn't like any other web technology, because capabilities in hardware differ, such as:

- amount of available VRAM and what happens when you overstep it

- available extensions

- limits of usable ESSL (GLSL for those coming from OpenGL)

- differences in capabilities

- see: http:/ I cod efl ow. o rg/ e ntri es/2 01 3/fe b/22/h ow-to-write-porta b I e-webgl/


Some last notes ...


· look at Gaia source code

· look at prominent frameworks (not the docs, the source code)

· I learned a lot looking at other ones source code

That's it ... There's a nice follow up by Shafiul Azam called "Kickstart Firefox OS App Development" that will get you your first app running: http://shafiul.github.io /slides/kickstart fxos.html.

German speaking Mozilla Community Newslist https:/ /I ists. mozi II a .org/1 isti nfo/ community-german


Doing mobile web Apps for Firefox OS - the right way

Technology

low end devices

ffos appsrunning

source code

ffos apps

build script

dom elements

packaged apps

run apps