Nessa palestra online ministrada através da MobGeek, foram abordadas questões como: - Por que desenvolver mobile apps? - Por que desenvolvimento multiplataforma? - Diferença entre multiplataforma híbrido e multiplataforma nativo - Como o Titanium funciona? - Vantagens e desvantagens do Titanium - Recursos da Plataforma Appcelerator

1. Sócio & Coordenador de desenvolvimento mobile
MQBC.com.br
Dirlei Dionísio
Appcelerator Titanium

2. POR QUE DESENVOLVER
MOBILE APPS?

3. ‘Há mais dispositivos móveis ativos
que pessoas no mundo’ (CNet)
Fonte: http://www.cnet.com/news/there-are-now-more-gadgets-on-earth-than-people

4. ‘Há mais pessoas que usam apenas
seus telefones para acessar a internet
que pessoas que usam apenas
desktops’ (Business Insider)
Fonte: http://www.businessinsider.com/mobile-internet-users-pass-desktop-users-2015-4

5. ‘Usuários gastam 89% do tempo
consumindo conteúdo em apps; e
apenas 11%, no browser’ (Nielsen)
Fonte: http://www.smartinsights.com/marketplace-analysis/customer-analysis/consumer-media-device-use/

6. ‘Visando otimizar o uso
dos dispositivos móveis,
os usuários abrem mão
do navegador de uso
geral. Eles usam a
Internet, mas não a web’
(Chris Anderson,Wired)
Fonte: http://www.wired.com/2010/08/
ff_webrip/all/1

7. QUE PLATAFORMA
ESCOLHER?

8. QUE PLATAFORMA
ESCOLHER?
QUAIS
S

9. Market Share
Tráfego de
internet
Fonte: IDC e NETMARKETSHARE (2T2015,Worlwide)

10. O DESAFIO PARA O DESENVOLVEDOR
xCode
CocoaTouch
Objective-C/Swift
Eclipse/Android Studio
Android SDK/Google APIs
Java
Ferramentas, frameworks, bibliotecas e linguagens diferentes.
Pouco reaproveitamento de conhecimento entre as plataformas.
0% de reaproveitamento de código.

11. REESCREVER A APP INTEIRA EM
CADA PLATAFORMA OU…

12. …USAR UMA ABORDAGEM DE
DESENVOLVIMENTO
MULTIPLATAFORMA

13. O DESENVOLVIMENTO MULTIPLATAFORMA
É COMO SE COMUNICAR COM
ESTRANGEIROS USANDO INTÉRPRETES.

14. OU COMO PRODUZIR UM FILME E
ADICIONAR DUBLAGEM PARAVÁRIOS
IDIOMAS

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

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

17. ABORDAGEM HÍBRIDA
Web Apps embutidas numa app nativa. São fortemente apoiadas
no elemento WebView de cada plataforma.
UI e Regras de negócio
(HTML/CSS, JavaScript)
API do framework
(JavaScript)
WebView
Código Nativo (Obj-C/Java/C#)
A
pp
híbrida

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

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

20. 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/

21. ABORDAGEM NATIVA
Código da APP (linguagem familiar)
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

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

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

24. ABORDAGEM NATIVA:
DROPBOX MAILBOX E CAROUSEL
Fonte: http://oleb.net/blog/2014/05/how-dropbox-uses-cplusplus-cross-platform-development/

25. Appcelerator Titanium

26. PLATAFORMAS SUPORTADAS

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

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

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

30. ELEMENTOS DE UI NATIVOS
iOS6 iOS7+

31. ELEMENTOS DE UI NATIVOS
Android 4.x Android 5.xAndroid 2.3

33. BENEFÍCIOS DA APP NATIVA
'Queremos proporcionar aos usuários a experiência nativa, no
iPhone, iPad e dispositivos Android. Nossa aplicação nesses
dispositivos deve se comportar assim como os usuários esperam
que elas se comportem. Os usuários querem uma experiência
que se integre perfeitamente com a plataforma em que estão
usando no momento. Eles querem alta performance, o que
normalmente só é obtido través das bibliotecas nativas do
dispositivo ou do sistema operacional.’
- Karen White, CEO do Syncplicity
Fonte: http://readwrite.com/2011/09/06/syncplicity-makes-the-case-for

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

35. View
Style
Controller

36. MILHARES DE WIDGETS, MÓDULOS E BIBLIOTECAS
DISPONIBILIZADOS PELA COMUNIDADE
http://gitt.io
http://alloylove.com
https://marketplace.appcelerator.com

37. 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 a 90%
• Produção de apps verdadeiramente nativas (não web-based),
aproveitando ao máximo os elementos de UI nativos
• Extensibilidade garantida com módulos nativos
• Possibilidade de criar web apps, apps híbridas e nativas

38. DESVANTAGENS
• A API doTitanium não cobre 100% das APIs nativas
• Tamanho maior da app no Android e WP (pelo menos +5mb)
• Builds mais lentos que os feitos apenas com ferramentas
nativas
• Uma camada extra de bugs

39. QUANTO CUSTA?
Titanium é free e open source,
sem restrições de uso.
• Titanium CLI
• Titanium SDK
• Alloy MVC Framework

40. PLATAFORMA APPCELERATOR

41. PLATAFORMA APPCELERATOR
Titanium

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

43. ANALYTICS EMTEMPO REAL

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

45. LIVEVIEW
https://www.youtube.com/watch?v=m5M4qrjT6DI
https://www.youtube.com/watch?v=nbbcj12_bgQ

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

47. CASES

48. GLOBO - RADIOBEAT
https://play.google.com/store/apps/
details?id=com.aorta.radiobeat
https://itunes.apple.com/br/app/
radiobeat/id598225415

49. SENAC - MINIDICIONÁRIO DE
ENOLOGIA EM 6 IDIOMAS
https://play.google.com/store/apps/details?
id=br.senac.rj.minidicenologia
https://itunes.apple.com/br/app/
minidicionario-de-enologia/id1028917554

50. APPNEWS DELIVERY
https://play.google.com/store/apps/details?
id=com.appnewsdelivery.app
https://itunes.apple.com/us/app/appnews-delivery/id1038953191

52. POR ONDE COMEÇAR?
Plataforma Appcelerator:
http://appcelerator.com
Titanium SDK + CLI + Atom
https://github.com/m1ga/titanium_with_atom
Comunidades brasileiras:
https://www.facebook.com/groups/timobilebr
https://groups.google.com/group/titanium-mobile-br

53. 'Não existe ferramenta, framework ou técnica que alcance
todos os dispositivos e plataformas sem abrir mão de
algumas funcionalidades ou sem a necessidade de portar
alguns trechos de código. E essa é a realidade não apenas do
desenvolvimento mobile, mas também da maior parte de
todo desenvolvimento de software.'
(Mobile Learning Environment)
http://www.amazon.com/Mobile-Learning-Environment-MoLE-Project/dp/1482558181

54. PERGUNTAS?
@DirleiDionisio | dirlei@mqbc.com.br | mqbc.com.br
Dirlei Dionísio