• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Doing mobile web Apps for Firefox OS - the right way

Doing mobile web Apps for Firefox OS - the right way






Total Views
Views on SlideShare
Embed Views



6 Embeds 80

http://lanyrd.com 33
https://twitter.com 25
http://firefoxosworld.net 12
http://eventifier.co 8
http://www.eventifier.co 1
https://drive.jolicloud.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Doing mobile web Apps for Firefox OS - the right way Doing mobile web Apps for Firefox OS - the right way Presentation Transcript

    • Doing mobile web Apps for Firefox OSthe right wayAndre Fiedlerwww.visualdrugs.netwww.bessa-app.com
    • Lets assume everyone knows Firefox OS (FFOS).If you dont, you can read about it here:https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OSThis presentation will give a very short overview about how to write apps forFFOS and some details on implementation specific topics like app design andperformance.Some parts are personal thoughts whats "good practice". Dont take them asgiven, there might be better choices. Some are experiences I had building BessaApp (www.bessa-app.com).#DoingFirefoxOSApps 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 mobileFirefox- Gaia - The front end of the OS build with HTML, CSS and javaScripthttps://github.com/mozilla-b2g/gaia#DoingFirefoxOSApps 3/41
    • Basics of FFOS Apps· like Gaia, FFOS Apps are build with HTML, CSS and javaScript· 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 runwithout inet connection. But its not very well implemented, sodont 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 WebAPIs#DoingFirefoxOSApps 4/41
    • Basics of FFOS Appsthe parts ofan 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#DoingFirefoxOSApps 5/41
    • Basics of FFOS Appshow to run apps?· there are three ways to run apps- in the browser- in the simulator- on real devices#DoingFirefoxOSApps 6/41
    • Basics of FFOS Appsrunning 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 designview: https://developer.moziIIa.org/en-US/docs/Tools/Responsive_Design_View· you can easily use all debugging tools#DoingFirefoxOSApps 7/41
    • Basics of FFOS Appsrunning 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· dont trust the Simulator, it has much more RAM than the FFOS devices!#DoingFirefoxOSApps 8/41
    • Basics of FFOS Appsrunning 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#DoingFirefoxOSApps 9/41
    • 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 ClosureCompiler, 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#DoingFirefoxOSApps 10/41
    • Organizing your app· use javaScript pseudo-classes to separate application logic· more aboutjavaScript pseudo-classes: http://stackoverflow.com/questions/1261 0394/javascript-classes· classes Im 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, ...#DoingFirefoxOSApps 11/41
    • Organizing your app· manifest files- dont call them- cache.manifest- webapp.manifest- package.manifest- better use- manifest.appcache- manifest.webapp- manifest.package· you will find them more easily· but mostly, its easier to define custom headers server side (different ext.)- webapp manifest- JSON header- cache manifest- plain text header#DoingFirefoxOSApps 12/41
    • Lets talk about frameworks.really?#DoingFirefoxOSApps 13/41
    • 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 ...#DoingFirefoxOSApps 14/41
    • Lets talk about frameworksPro 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"#DoingFirefoxOSApps 15/41
    • Lets talk about frameworksPro and Contra of "all inclusive" frameworks· 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 ofthe framework must be "debugged", too (understanding the programmingof the frameworks)- special cases usually more complicated to achieve than building fromscratch- simple example: ST- try to get native scrolling in a list ...#DoingFirefoxOSApps 16/41
    • Lets talk about frameworksPro and Contra of "all inclusive" frameworks· ST globally disables all "touchmove" 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"#DoingFirefoxOSApps 17/41
    • Programming Performance.#DoingFirefoxOSApps 18/41
    • Programming PerformanceLets build a datepicker!1 2 3 4 5 67 8 9 10 11 1213 14 15 16 17 1819 20 21 22 23 2425 26 27 28 29 30Source: http://jsfiddle.net/SunboX/KkY6H/#DoingFirefoxOSApps 20/41
    • Programming Performancecomparing the first and last datepicker script (higher is better)• first • lastAndroid 2.3.5 (1)Firefox 19.0 (1)0 1.250 2.500 3.750 5.000operations per second (higher is better)JSPerf: http://jsperf.com/simple-performance-test/4#DoingFirefoxOSApps 25/41
    • Programming Performance· if doing a lot style and DOM manipulation, remove the element from the DOMfirst- same for creating new elements, apply styles aso. before inserting intothe DOM· use DocumentFragment to insert many DOM elements at once#DoingFirefoxOSApps 26/41
    • Ul Performance.#DoingFirefoxOSApps 27/41
    • Ul Performance· enlarge touchable areas- thats why native iOS apps are feeling "snappier" when touchingsomething- 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#DoingFirefoxOSApps 28/41
    • Ul Performancecheck if you should use translate{x, y) instead of top I left· can be faster (thats not always the case!}, I would suggest you to readhttp://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.000operations per second {higher is better)JSPerf: http://jsperf.com/simple-positioning-test/2#DoingFirefoxOSApps 29/41
    • 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://buildingfirefoxos.com/building-blocks/- you have to copy them from the Gaia "shared" folder into your appdirectory#DoingFirefoxOSApps 30/41
    • Localization.#DoingFirefoxOSApps 31/41
    • Localization· thats it, youre 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);#DoingFirefoxOSApps 33/41
    • Packaging.#DoingFirefoxOSApps 34/41
    • 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#DoingFirefoxOSAppsJAVASCRIPT35/41
    • Differences between devices.#DoingFirefoxOSApps 36/41
    • Differences between devices· performance- test on low end devices first- if your app performs well on low end devices, it will run smooth on highend. 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-not-the-how/#DoingFirefoxOSApps 37/41
    • Differences between devices· WebGL isnt like any other web technology, because capabilities in hardwarediffer, 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:/Icodeflow.org/entries/201 3/feb/22/how-to-write-portabIe-webgl/#DoingFirefoxOSApps 38/41
    • Some last notes ...#DoingFirefoxOSApps 39/41
    • · look at Gaia source code· look at prominent frameworks (not the docs, the source code)· I learned a lot looking at other ones source codeThats it ...Theres a nice follow up by Shafiul Azam called "Kickstart Firefox OS AppDevelopment" that will get you your first app running: http://shafiul.github.io/slides/kickstart fxos.html.German speaking Mozilla Community Newslisthttps://Iists.moziIIa.org/1istinfo/community-german#DoingFirefoxOSApps 40/41