O documento resume as principais características do sistema operacional Firefox OS. Ele explica que o Firefox OS utiliza o kernel do Android e permite que desenvolvedores front-end aproveitem seu conhecimento em HTML, CSS e JavaScript para criar aplicativos nativos para dispositivos móveis. Também descreve como estruturar e publicar aplicativos para o Firefox OS.

1. !
FLÁVIO
ALMEIDA
flavio.almeida@caelum.com.br
@
flaviohalmeida
flaviohenriquealmeida/firefox-­‐os-­‐angularjs

2. FirefoxOS
!
Seu
talento
front-­‐end
direto
no
celular

3. FirefoxOS
Em
breve
também
no
tablet
h"p://goo.gl/KsJCSz

4. Firefox
OS
•NÃO
é
uma
RAPOSA
•hNps://github.com/mozilla-­‐b2g/B2G
B2G:
boot
to
gecko
•UTILIZA
o
KERNEL
do
AOSP
(Android
Open
Source
Project)
•BILLING
diferenciado
•APP`S
com
CRÉDITO
do
celular
•OPERADORAS
lucram
•PREÇO
acessível*

5. Flame
Mozilla/T2Mobile
!
Referência
para
desenvolvedores
!
4.5”
dual-­‐core
1
GB
M/8
GB

6. Camadas
do
SO

7. Gonk: sistema de baixo nível do B2G. Compatível
com ADB (Android Debug Bridge)
Gecko: ambiente de execução da aplicação
(HTML, CSS e JavaScript)
Gaia: interface do Usuário

8. Versão
1.3
(14/05)
hNp://www.mozilla.org/en-­‐US/firefox/os/notes/1.3/
WebGL
asm.js
WebAudio
WebNFC

9. Desenvolvedor
Front-­‐end
Firefox
OS

10. HTML5
Javascript
CSS3
NATIVOS
ESPERE UM POUCO…
KIMOSABE!

11. phonegap.com
www.appcelerator
(Titanium)
cordova.apache.org
Frameworks
Plataformas

12. Windows
Phone
8

13. Firefox
OS
REAPROVEITA*
SEU
WORKFLOW
!
!
!
FRONT-­‐END
*
com
pouquíssimas
mudanças

14. Entendeu agora
KIMOSABE?

15. ESTRUTURA
DA
APLICAÇÃO

17. {
"version":
"1.0",
"name":
"Exemplo",
"launch_path":
"/index.html",
"icons":
{
"128":
"/img/icon-­‐128.png"
}
}
manifest.webapp
Ícone
da app
Nome
abaixo do ícone
Chamar
quem?
JSON

18. Tipos
de
aplicauvo

19. Armazenado
mum
servidor
web.
Quando
uulizado
é
feito
um
acesso
ao
servidor
remoto
caso
o
aplicauvo
não
esteja
no
cache.
Hospedado

20. Distribuídos
através
de
um
zip
que
é
copiado
na
instalação
do
aplicauvo.
Empacotado

21. Permissionamento

22. Normal
{
"version":
"1.0",
"name":
"Exemplo",
"launch_path":
"/index.html",
"icons":
{
"128":
"/img/icon-­‐128.png"
}
}

23. Privilegiada
…
"type":
"privileged",
"permissions":
{
"contacts":
{
"descripuon":
"msg",
"access":
"readcreate"
}
}
…

24. Ceruficada
{
"version":
"1.0",
"name":
“Exemplo",
"type":"cerufied",
"launch_path":
"/index.html",
"icons":
{
"128":
"/img/icon-­‐128.png"
}
}

25. Como
começar?

26. Simulador

28. •Instalação
como
plugin
do
Firefox
!
!
•Inicia
em
aprox.
5
segundos
!
!
•Rápido,
mesmo
em
máquinas
modestas
hNps://|p.mozilla.org/pub/mozilla.org/labs/fxos-­‐simulator

30. Tudo
uma
maravilha
né?
Porém…

31. Firefox
OS
Aplicauvo
é
themeless

32. Firefox
OS
Não
é
responsivo
por
padrão

33. Firefox
OS
Manipulação
de
DOM

35. Firefox
OS
getbootstrap.com
angular.org
Bootstrap
mobile
first,
Media
Query,
Fluid
Grid,
Responsive
Images
…
Todas
boas
práucas
que
o
desenvolvedor
front-­‐end
deveria
saber

36. Firefox
OS
SHOW ME THE
SOURCE
YOU MUST