Desenvolvimento Multiplataforma com Appcelerator Titanium

Sócio & Coordenador de desenvolvimento mobileMQBC.com.br

Dirlei Dionísio

Appcelerator Titanium

POR QUE DESENVOLVER MOBILE APPS?

‘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

‘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

‘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/

‘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

QUE PLATAFORMA ESCOLHER?

QUE PLATAFORMA ESCOLHER?

QUAISS

Market ShareTráfego de

internet

Fonte: IDC e NETMARKETSHARE (2T2015, Worlwide)

O DESAFIO PARA O DESENVOLVEDOR

xCodeCocoa Touch

Objective-C/Swift

Eclipse/Android StudioAndroid SDK/Google APIs

Java

Ferramentas, frameworks, bibliotecas e linguagens diferentes.Pouco reaproveitamento de conhecimento entre as plataformas.

0% de reaproveitamento de código.

REESCREVER A APP INTEIRA EM CADA PLATAFORMA OU…

…USAR UMA ABORDAGEM DE DESENVOLVIMENTO MULTIPLATAFORMA

O DESENVOLVIMENTO MULTIPLATAFORMA É COMO SE COMUNICAR COM

ESTRANGEIROS USANDO INTÉRPRETES.

OU COMO PRODUZIR UM FILME E ADICIONAR DUBLAGEM PARA VÁRIOS

IDIOMAS

HÁ 3 ABORDAGENS DE DESENVOLVIMENTO MULTIPLATAFORMA

• Mobile Web • Híbrida • Nativa

MOBILE WEBConsiste 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

ABORDAGEM HÍBRIDAWeb 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#)

App

híbrida

ABORDAGEM HÍBRIDAPró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

ABORDAGEM HÍBRIDAFacebook 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

ABORDAGEM HÍBRIDALinkedIn 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/

ABORDAGEM NATIVA

Código da APP (linguagem familiar)

Tradutor

Código nativo iOS(Objective-C/Swift)

Código nativo Android(Java)

xCode Android Development Tools

App iOS App Android

Código nativo WP(C#)

Visual Studio

App WP

ABORDAGEM NATIVA: GOOGLE INBOX

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

ABORDAGEM NATIVA:FACEBOOK GROUPS E ADS MANAGER

Fonte: https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile

ABORDAGEM NATIVA: DROPBOX MAILBOX E CAROUSEL

Fonte: http://oleb.net/blog/2014/05/how-dropbox-uses-cplusplus-cross-platform-development/

Appcelerator Titanium

PLATAFORMAS SUPORTADAS

COMO O TITANIUM 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)

RAIO-X DE UMA APP TITANIUM

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

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

ELEMENTOS DE UI NATIVOS

iOS6 iOS7+

ELEMENTOS DE UI NATIVOS

Android 4.x Android 5.xAndroid 2.3

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

ALLOY - O FRAMEWORK MVC DO TITANIUM

• Estrutura da UI em XML

• Estilo em TSS (equivale ao CSS)

• Controller em JavaScript

• Backbone.js para models e collections

View

Style

Controller

MILHARES DE WIDGETS, MÓDULOS E BIBLIOTECAS DISPONIBILIZADOS PELA COMUNIDADE

http://gitt.io

http://alloylove.com

https://marketplace.appcelerator.com

RESUMO DAS VANTAGENS• 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

DESVANTAGENS

• A API do Titanium 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

QUANTO CUSTA?

Titanium é free e open source,sem restrições de uso.

• Titanium CLI

• Titanium SDK

• Alloy MVC Framework

PLATAFORMA APPCELERATOR

PLATAFORMA APPCELERATOR

Titanium

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

ANALYTICS EM TEMPO REAL

MONITORAMENTO DE ERROS EM TEMPO 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

LIVE VIEW

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

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

TESTES AUTOMATIZADOS

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

CASES

GLOBO - RADIOBEAT

https://play.google.com/store/apps/details?id=com.aorta.radiobeat

https://itunes.apple.com/br/app/radiobeat/id598225415

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

APPNEWS DELIVERY

https://play.google.com/store/apps/details?id=com.appnewsdelivery.app

https://itunes.apple.com/us/app/appnews-delivery/id1038953191

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

'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

PERGUNTAS?

@DirleiDionisio | [email protected] | mqbc.com.br

Dirlei Dionísio