Ti.conf titanium on firefoxos

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

@alessioricco 
http://www.slideshare.net/alessioricco 
Titanium Certiﬁed 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

About me

About me
… I’m a Cross Platform Curious….

Cross Platform ?

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

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).

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.

Gaia 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

FirefoxOS - API

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://buildingﬁrefoxos.com/building-blocks/action-menu.html

FirefoxOS - Native Apps
!
• Native apps are web apps! 
- HTML5 
- Javascript 
- CSS3
• Titanium MobileWeb Apps 
are able to run on FFOS 
(with some limits…)

FirefoxOS 1.1- Simulator
Simulator and Debugger as Firefox Add-On

FirefoxOS - Deployment
• Packaged Apps 
A 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 ﬁle, instead of having its resources on a Web
server
• Hosted Apps 
A 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

FirefoxOS - Open Web App
Open 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 ofﬂine, 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.

FirefoxOS - Marketplace

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

FirefoxOS 1.1 - install

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/

FirefoxOS 1.1 - dashboard

FirefoxOS 1.1 - Simulator

FirefoxOS 1.1 - app install

FirefoxOS 1.1 - The Manifest
An 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.

The manifest ﬁle should be called manifest.webapp, and be
placed in the root of your web app directory alongside your
index.html ﬁle.
https://developer.mozilla.org/en-US/Apps/Build/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"
}

FirefoxOS 1.1 - Kitchen Sink

FirefoxOS 1.1 - Debugging

FirefoxOS 1.1 - Device connected….
remove empty lines
at the end of the ﬁle
Many aspects of Firefox OS development require installation of adb, the Android Debug Bridge.

FirefoxOS 1.1 - ADB
Android 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

FirefoxOS - Titanium
Simulator is not working with
Titanium Apps 
because  
 
Most touch events do not work
in Firefox OS Simulator  
 
We need some workarounds…

FirefoxOS - Titanium DEMO Time!

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…

• FirefoxOS 
http://www.mozilla.org/en-US/ﬁrefox/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/ﬁrefox/releases/
• Publishing Apps 
https://developer.mozilla.org/en-US/Marketplace/Options/Self_publishing
• Submitting Apps 
https://developer.mozilla.org/it/docs/Web/Apps/Publishing/Submitting_an_app
Links

• Mobile Web overview 
http://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

Thank you
• Nois3 
http://www.nois3.it/
• Etnatraining 
http://www.etnatraining.it/
• Davide Cassenti, Luca Greco

Contacts
• https://www.linkedin.com/in/alessioricco
• @alessioricco
• http://www.slideshare.net/alessioricco
• http://alessioricco.com

Ti.conf titanium on firefoxos

More Related Content

Ti.conf titanium on firefoxos