O documento descreve duas histórias sobre desenvolvimento multiplataforma. A primeira história é sobre um empreendedor chamado João que precisa apresentar seu produto para investidores que falam japonês e mandarim. A segunda história é sobre uma cineasta chamada Maria que quer produzir um filme em inglês, português e espanhol.

1. Dirlei Dionísio & Valmir Santana | mqbc.com.br
Desenvolvimento
Multiplataforma NATIVO
com Appcelerator

2. HISTÓRIA DE JOÃO:
JOÃO É FUNDADOR DE UMA
STARTUP EM BUSCA DE
INVESTIMENTO.

3. ELE RECEBE UM CONVITE
INUSITADO:

4. APRESENTAR SEU PRODUTO E
MODELO DE NEGÓCIOS PARA 2
GRUPOS DE INVESTIDORES:
UM QUE SÓ FALA JAPONÊS E
OUTRO QUE SÓ FALA MANDARIM.

5. JOÃO NÃO FALA NENHUM
DESSES IDIOMAS.
MAS ELETEM UMA AMIGA QUE
FALA FLUENTEMENTE JAPONÊS
E MANDARIM.

6. JOÃO DEVE…
A. Recusar a oportunidade de conversar com os
investidores
B. Começar a aprender japonês e mandarim e
depois procurar os investidores
C. Usar sua amiga como intérprete

7. JOÃO DEVE…
A. Recusar a oportunidade de conversar com os
investidores
B. Começar a aprender japonês e mandarim e
depois procurar os investidores
C. Usar sua amiga como intérprete

8. FERRAMENTAS MULTIPLATAFORMA
SÃO COMO INTÉRPRETES
Habilitam programadores a desenvolver aplicativos
para iOS e Android sem conhecer as linguagens
nativas.

9. MAS EU CONHEÇO
OBJ-C, SWIFT E JAVA!

11. HISTÓRIA DE MARIA:
MARIA É PRODUTORA,
ROTEIRISTA E DIRETORA DE
CINEMA.

12. ELA QUER PRODUZIR UM FILME E
LANÇÁ-LO EM 3 IDIOMAS: INGLÊS,
PORTUGUÊS E ESPANHOL.
ELA FALA ESSES 3 IDIOMAS,TEM
DINHEIRO PRA INVESTIR, MASTEM
PRESSA.

13. MARIA DEVE…
A. Gravar todas as cenas do filme em cada um
dos 3 idiomas
B. Gravar o filme inteiro em um só idioma e
adicionar dublagem e legenda para os
demais idiomas depois

14. MARIA DEVE…
A. Gravar todas as cenas do filme em cada um
dos 3 idiomas
B. Gravar o filme inteiro em um só idioma e
adicionar dublagem e legenda para os
demais idiomas depois

15. DESENVOLVIMENTO MULTIPLATAFORMA
É COMO PRODUZIR UM FILME COM
DUBLAGEM
Você pode até ser capaz de gravar um filme inteiro em
vários idiomas, mas normalmente não irá fazê-lo porque
prefere otimizar o uso dos seus recursos.

16. HÁ 3 ABORDAGENS DE
DESENVOLVIMENTO MULTIPLATAFORMA
• Mobile Web
• Híbrida
• Nativa

17. MOBILE WEB
Consiste em criar sites otimizados para browsers de dispositivos
móveis (web apps).
Usando os recursos do HTML5, podem funcionar total ou
parcialmente offline.
Prós:
- Suporte a inúmeras
plataformas
- Updates instantâneos.
Contra:
- Acesso fraco ou
inexistente ao hardware dos
dispositivos.
- Não pode ser publicada
nas lojas oficiais

18. ABORDAGEM HÍBRIDA
Web Apps embutidas numa app nativa. São fortemente apoiadas
no elemento WebView de cada plataforma.
API Nativa
(Obj-C/Swift/Java/C#)
UI e Regras de negócio
(HTML/CSS, JavaScript)
API do framework
(JavaScript)
WebView Nativa
Window Nativa

19. ABORDAGEM HÍBRIDA
Prós Contras
• Suporte a um bom
número de plataformas
• Familiar para
desenvolvedores web
• UX prejudicada; elementos
de UI, transições e
animações são simulações
do equivalente nativo (no
melhor caso)
• Sujeitas às diferenças nas
engines de renderização
HTML/CSS

20. ABORDAGEM HÍBRIDA
Facebook deixou de usar a
abordagem híbrida em 2012.
'Quando se trata de plataformas como
iOS, as pessoas esperam uma
experiência ágil e confiável e nossa app
estava aquém disso.'
'O desenvolvimento nativo nos dá
maiores oportunidades de manter a app
mais rápida, estável e rica em recursos.'
Jonathan Dann, Software Engineer,
Facebook
Fonte: https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/
10151036091753920

21. ABORDAGEM HÍBRIDA
LinkedIn deixou de usar a
abordagem híbrida em 2013.
'Mudamos para o nativo para obter
algumas das animações, os "spinners" e o
jeito como eles funcionam, aquela
suavidade; nós concluímos que
precisávamos do nativo para fazer isso
bem feito.’
Kiran Prasad, Senior Director for Mobile
Engineering, LinkedIn
Fonte: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/

22. ABORDAGEM
MULTIPLATAFORMA
NATIVA

23. ABORDAGEM
MULTIPLATAFORMA NATIVA
Código da aplicação
"Tradutor"
Código nativo iOS
(Objective-C/Swift)
Código nativo Android
(Java)
xCode Android DevelopmentTools
App iOS App Android
Código nativo WP
(C#)
Visual Studio
App WP

24. GOOGLE INBOX
Fonte: http://gmailblog.blogspot.com.br/2014/11/going-under-hood-of-inbox.html

25. FACEBOOK GROUPS E ADS MANAGER
Fonte: https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile

26. ABORDAGEM
MULTIPLATAFORMA NATIVA
2015
2009
2009
2015

27. Appcelerator Titanium

28. PLATAFORMAS SUPORTADAS

29. COMO OTITANIUM FUNCIONA
Código da APP (JavaScript)
API
Titanium
iOS
(JavaScript)
API
Titanium
Android
(JavaScript)
API
Titanium
multiplataforma
(JavaScript)
API iOS Nativa
(Objective-C)
API Android Nativa
(Java)

30. RAIO-X DE UMA APPTITANIUM
Código Objective-C
compilado
Arquivo .IPA (iOS)
Bytecode Java
Código
JavaScript
otimizado e
minificado
Imagens,
strings, arquivos
de configuração
etc.
Arquivo .APK (Android)
V8 JavaScript
Engine
Imagens, strings,
arquivos de
configuração
etc.
Código
JavaScript
otimizado e
minificado

31. A API MUTIPLATAFORMA
Calendário
Contatos
Database
Facebook
Filesystem
Geolocalização
Gestos
Áudio
Vídeo
HTTP
Socket
XML
Internacionalização
Interface com
o Usuário
Acelerômetro
Mapas

32. APIS ESPECÍFICAS
NewsKit
iOS
Touch ID
SafariDialog
SplitWindow (iPad)
Android
ActionBar
Intent
Services
BroadcastReceiver
ActivityToolbar,TabbedBar

33. ELEMENTOS DE UI NATIVOS

35. ALLOY - O FRAMEWORK MVC DO
TITANIUM
• Estrutura da UI em XML
• Estilo emTSS (equivale ao CSS)
• Controller em JavaScript
• Backbone.js para models e collections

36. View
Style
Controller

38. HYPERLOOP – MOTIVAÇÃO
• Ter acesso a novidades nas API's nativas sem precisar aguardar novas
versões doTitanium
• Utilizar API’s de terceiros que não sejam JavaScript sem precisar de
módulos nativos (e.g. periféricos)
• Ter acesso a recursos não disponibilizados pela API doTitanium (e.g.
Foreground Services do Android)
• Poder de escrever módulos nativos sem conhecer as linguagens nativas
(basta conhecer a API)

39. HYPERLOOP – VANTAGENS
• Acesso a 100% da API nativa de cada plataforma
• Possibilidade de estender classes escritas em código nativo (Obj-C/
Swift/Java) usando JavaScript
• Acesso a NSBundle via require do JavaScript (e.g. XIB)
• Acesso a bibliotecas nativas de terceiros (.jar, .dylib, .a)
• Possibilidade de escrever partes do código em linguagem nativa
Exemplos em http://github.com/appcelerator/hyperloop-examples

40. MILHARES DE WIDGETS, MÓDULOS E BIBLIOTECAS
DISPONIBILIZADOS PELA COMUNIDADE
gitt.io
alloylove.com
marketplace.appcelerator.com
loopmodules.com

41. RESUMO DASVANTAGENS
• Desenvolvimento multiplataforma em uma linguagem popular, fácil de
aprender e manter - JavaScript
• Utilização do padrão MVC, facilitando a organização e manutenção
• Reaproveitamento de código de 50 à 95%
• UI verdadeiramente nativa (não web-based)
• Acesso a 100% da API nativa com módulos e/ou Hyperloop

42. DESVANTAGENS
• Tamanho maior da app no Android (~4mb)
• Builds completos mais lentos que os feitos apenas com
ferramentas nativas (minimizado com LiveView)
• Uma camada extra de bugs

43. Arrow é um Mobile Backend as a Service (MBaaS) que oferece
um jeito fácil e rápido de desenvolver apps conectadas.
Chat Checkin
E-mail
Events Files
Friends Messages
Objects PhotoCollection
Photos
Push Notifications
Reviews
Social Integrations
Users SMS
ARROW

44. ANALYTICS EMTEMPO REAL

45. MONITORAMENTO DE ERROS
EMTEMPO REAL
Mensagem de
erro
Arquivo e
linha que
causou o
erro
Número de
ocorrências
Usuários
afetados
Dados do
ambiente
Integração ao
Jira

46. TESTES AUTOMATIZADOS
https://www.youtube.com/watch?v=SJVe56mT8KM

47. CASES DA MQBC

48. CAIXA SEGURADORA
Google Play
App Store

49. AXWAY - ROADTO DIGITAL
Google Play
App Store

50. GLOBO - RADIOBEAT
Google Play
App Store

51. SENAC - MINIDICIONÁRIO DE
ENOLOGIA EM 6 IDIOMAS
Google Play
App Store

52. APPNEWS DELIVERY
Google Play
App Store

53. CREA-RJ – FISCAL

54. CASES GLOBAIS

55. POR ONDE COMEÇAR?
Plataforma Appcelerator:
http://appcelerator.com
Titanium SDK + CLI + Atom (OSS)
https://github.com/m1ga/titanium_with_atom
Comunidades:
tislack.org
facebook.com/groups/timobilebr

56. PERGUNTAS?
@DirleiDionisio | dirlei@mqbc.com.br
vsantana@mqbc.com.br