Titanium Mobile Web
& Firefox OS
alessio ricco
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
Firefox OS is a new mobile operating system,
developed by Mo...
@alessioricco

http://www.slideshare.net/alessioricco

Titanium Certified App Developer/Titan	



Ti.Roma - Roma Titanium M...
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
FirefoxOS
A new OS for mobile devices

- Developed by Mozill...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Architecture
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Architecture
Gonk is the lower level
operating s...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Architecture
Gecko is the name of
the layout eng...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Architecture
Gaia is the user
interface level of...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - API
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - SDK
Available SDK
• Firefox Web API 

(mainly de...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Native Apps
!
• Native apps are web apps!

- HTM...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1- Simulator
Simulator and Debugger as Firefox A...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Deployment
• Packaged Apps

A packaged app is an...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Open Web App
Open Web Apps are essentially no di...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Marketplace
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1-Requirements
!
• A simple text editor
• Firefo...
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
• Firefo...
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 Manifest
An open web app manifest 

cont...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - The Manifest
The manifest file should be call...
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",	
"de...
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...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS 1.1 - ADB
Android Debug Bridge (adb) is a versatil...
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
FirefoxOS - Titanium
Simulator is not working with
Titanium ...
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 simulato...
• FirefoxOS

http://www.mozilla.org/en-US/firefox/os/
• FirefoxOS 1.1 Simulator

https://developer.mozilla.org/en-US/docs/T...
• Mobile Web overview

http://docs.appcelerator.com/titanium/3.0/#!/guide/Mobile_Web_Platform_Overview
• Mobile Web best p...
Thank you
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
• Nois3

http://www.nois3.it/
• Etnatraining

http...
Contacts
Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
• https://www.linkedin.com/in/alessioricco
• @aless...
Upcoming SlideShare
Loading in …5
×

Ti.conf titanium on firefoxos

2,673 views

Published on

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.

Published in: Mobile, Technology

Ti.conf titanium on firefoxos

  1. 1. Titanium Mobile Web & Firefox OS alessio ricco
  2. 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. 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. 4. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco About me … I’m a Cross Platform Curious….
  5. 5. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco Cross Platform ?
  6. 6. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS A new OS for mobile devices
 - Developed by Mozilla
 - Based on Linux
 - Gecko engine
  7. 7. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS - Architecture
  8. 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. 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. 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. 11. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS - API
  12. 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. 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. 14. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1- Simulator Simulator and Debugger as Firefox Add-On
  15. 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. 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. 17. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS - Marketplace
  18. 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. 19. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - install
  20. 20. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - install
  21. 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. 22. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - dashboard
  23. 23. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - Simulator
  24. 24. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - app install
  25. 25. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - app install
  26. 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. 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. 28. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - The Manifest
  29. 29. 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" }
  30. 30. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - Kitchen Sink
  31. 31. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS 1.1 - Debugging
  32. 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. 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. 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. 35. Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco FirefoxOS - Titanium DEMO Time!
  36. 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…
  37. 37. • FirefoxOS
 http://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 Apps
 https://developer.mozilla.org/it/docs/Web/Apps/Publishing/Submitting_an_app Links Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco
  38. 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. 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. 40. Contacts Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco • https://www.linkedin.com/in/alessioricco • @alessioricco • http://www.slideshare.net/alessioricco • http://alessioricco.com

×