Firefox OS is a new mobile operating system, developed by Mozilla,which lets users install and run open web applications created using HTML, CSS, and JavaScript.We'll explain the best practices for a cross platform porting to Titanium Mobile Web and the guidelines for the deployment on this new cool platform.
2. 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
3. @alessioricco
http://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
4. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
About me
… I’m a Cross Platform Curious….
5. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
Cross Platform ?
6. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS
A new OS for mobile devices
- Developed by Mozilla
- Based on Linux
- Gecko engine
7. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Architecture
8. 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).
9. 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.
10. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Architecture
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
11. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - API
12. 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
13. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Native Apps
!
• Native apps are web apps!
- HTML5
- Javascript
- CSS3
• Titanium MobileWeb Apps
are able to run on FFOS
(with some limits…)
14. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1- Simulator
Simulator and Debugger as Firefox Add-On
15. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
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 file, 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
16. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
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 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.
17. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Marketplace
18. 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
19. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - install
20. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - install
21. 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/
22. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - dashboard
23. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - Simulator
24. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - app install
25. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - app install
26. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
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.
27. 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
28. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - The Manifest
30. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - Kitchen Sink
31. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - Debugging
32. 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.
33. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
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
34. 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…
35. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Titanium DEMO Time!
36. 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…
38. • 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
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
39. Thank you
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
• Nois3
http://www.nois3.it/
• Etnatraining
http://www.etnatraining.it/
• Davide Cassenti, Luca Greco
40. Contacts
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
• https://www.linkedin.com/in/alessioricco
• @alessioricco
• http://www.slideshare.net/alessioricco
• http://alessioricco.com