Titanium Mobile Web & Firefox OS

alessio ricco

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

Firefox OS is a new mobile operating system, developed by Mozilla,which lets users install and run open web applications created using HTML5, CSS3,

and JavaScript.

We'll explain the best practices for a cross platform porting to MobileWeb and the guidelines for the

deployment on this new cool platform.

Abstract

@alessioriccohttp://www.slideshare.net/alessioricco

Titanium Certified App Developer/Titan Ti.Roma - Roma Titanium Mobile Meetup http://www.meetup.com/Titanium-Appcelerator-Roma/ Titanium Mobile Developers Italy (fb) https://www.facebook.com/groups/TitaniumMobileItaly/?fref=ts

Apps •TwinsMatcher •CrowdFuture •Bitcoin Markets •Wallive •World Medicine Park

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

About me

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

About me

… I’m a Cross Platform Curious….

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

Cross Platform ?

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOSA new OS for mobile devices - Developed by Mozilla - Based on Linux - Gecko engine

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Architecture

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Architecture

Gonk is the lower level operating system of the

Firefox OS platform, consisting of a Linux kernel based on the

Android Open Source Project (AOSP) and userspace hardware

abstraction layer (HAL).

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Architecture

Gecko is the name of the layout engine developed by the

Mozilla Project. Gecko's function is to read web content, such as HTML, CSS, XUL, JavaScript,

and render it on the user's screen or print it.

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - ArchitectureGaia is the user

interface level of Firefox OS. Everything that

appears on the screen after Firefox OS starts up is drawn by Gaia,

including the lock screen, home screen,

dialer, and other

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - API

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - SDK

Available SDK

• Firefox Web API (mainly device/hardware/sensors) https://wiki.mozilla.org/WebAPI

• Gaia building blocks(Ready to use UI snippets and code blocks) http://buildingfirefoxos.com/building-blocks/action-menu.html

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Native Apps!

• Native apps are web apps!- HTML5 - Javascript- CSS3

• Titanium MobileWeb Appsare able to run on FFOS (with some limits…)

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1- Simulator

Simulator and Debugger as Firefox Add-On

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Deployment

• Packaged AppsA packaged app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest, and so on) contained in a zip file, instead of having its resources on a Web server

• Hosted AppsA hosted app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest and so on) stored on a Web server

https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_or_hosted_

https://developer.mozilla.org/en-US/Apps/Build/App_permissions

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Open Web AppOpen Web Apps are essentially no different than standard

websites or Web pages. They are built using standard open Web technologies HTML, CSS, JavaScript, etc. and can be accessed using a Web browser. The main differences lie in their ability to be installed on a device and work offline, and access to advanced APIs that allow interaction with device features such as the camera, address book, and other such things. In addition, they are built on open technologies as

much as is possible.

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Marketplace

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1-Requirements

!

• A simple text editor

• Firefox Browser(Firefox 24 or Firefox 25)

https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - install

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - install

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.2-Requirements!

• A simple text editor

• Firefox Browser(Latest version)

• App manager

• WebIDE

The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator,

directly from your browser.

https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - dashboard

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - Simulator

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - app install

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - app install

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - The ManifestAn open web app manifest

contains information that a web browser needs to interact with an app. !

A manifest is one of the key things that distinguishes an open web app from a website.

!It is a JSON file with a name and description for the app,

and it can also contain the origin of the app, icons, and the permissions required by the app, among other things.

The manifest file should be called manifest.webapp, and be placed in the root of your web app directory alongside your

index.html file.

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - The Manifest

The manifest file should be called manifest.webapp, and be placed in the root of your web app directory alongside your

index.html file.

https://developer.mozilla.org/en-US/Apps/Build/Manifest

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - The Manifest

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - The Manifest{ "name": "Kitchen Sink", "description": "Titanium demo", "launch_path": "/index.html", "icons": { "128": "/appicon.png" }, "developer": { "name": "appcelerator", "url": "http://www.appcelerator.com" }, "default_locale": "en"}

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - Kitchen Sink

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - Debugging

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - Device connected….

remove empty lines at the end of the file

Many aspects of Firefox OS development require installation of adb, the Android Debug Bridge.

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - ADBAndroid Debug Bridge (adb) is a versatile command line tool

that lets you communicate with an emulator instance or connected Android-powered device. It is a client-server

program that includes three components: !

A client, which runs on your development machine. You can invoke a client from a shell by issuing an adb command. Other

Android tools such as the ADT plugin and DDMS also create adb clients.

!A server, which runs as a background process on your

development machine. The server manages communication between the client and the adb daemon running on an emulator

or device. !

A daemon, which runs as a background process on each emulator or device instance.

http://developer.android.com/tools/help/adb.html

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Titanium

Simulator is not working with Titanium Apps

because

Most touch events do not work in Firefox OS Simulator

We need some workarounds…

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Titanium DEMO Time!

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Titanium• Touch Events doesn’t work on simulator

• Touch Events works on device

• Different tools between 1.1. and 2.1

• Back navigation button doesn’t work (Titanium.UI.MobileWeb.NavigationGroup)

• Some UI elements doesn’t work

• but…

• FirefoxOShttp://www.mozilla.org/en-US/firefox/os/

• FirefoxOS 1.1 Simulator https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator

• Developers Page https://developer.mozilla.org/en-US/Firefox_OS

• Firefox Browser (all the releases)ftp.mozilla.org/pub/mozilla.org/firefox/releases/

• Publishing Apps https://developer.mozilla.org/en-US/Marketplace/Options/Self_publishing

• Submitting Appshttps://developer.mozilla.org/it/docs/Web/Apps/Publishing/Submitting_an_app

Links

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

• Mobile Web overviewhttp://docs.appcelerator.com/titanium/3.0/#!/guide/Mobile_Web_Platform_Overview

• Mobile Web best practices (codestrong 2012) http://www.slideshare.net/appcelerator/codestrong-2012

• Mobile Web deployment http://docs.appcelerator.com/titanium/3.0/#!/guide/Deploying_and_Distributing_Mobile_Web_Apps

Links

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

Thank you

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

• Nois3http://www.nois3.it/

• Etnatraininghttp://www.etnatraining.it/

• Davide Cassenti, Luca Greco

Contacts

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

• https://www.linkedin.com/in/alessioricco

• @alessioricco

• http://www.slideshare.net/alessioricco

• http://alessioricco.com