Transcript
Page 1: Appcelerator Titanium – B2W Digital

Dirlei Dionísio & Valmir Santana | mqbc.com.br

Desenvolvimento Multiplataforma NATIVO

com Appcelerator

Page 2: Appcelerator Titanium – B2W Digital

HISTÓRIA DE JOÃO:

JOÃO É FUNDADOR DE UMA STARTUP EM BUSCA DE

INVESTIMENTO.

Page 3: Appcelerator Titanium – B2W Digital

ELE RECEBE UM CONVITE INUSITADO:

Page 4: Appcelerator Titanium – B2W Digital

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.

Page 5: Appcelerator Titanium – B2W Digital

JOÃO NÃO FALA NENHUM DESSES IDIOMAS.

MAS ELE TEM UMA AMIGA QUE FALA FLUENTEMENTE JAPONÊS

E MANDARIM.

Page 6: Appcelerator Titanium – B2W Digital

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

Page 7: Appcelerator Titanium – B2W Digital

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

Page 8: Appcelerator Titanium – B2W Digital

FERRAMENTAS MULTIPLATAFORMA SÃO COMO INTÉRPRETES

Habilitam programadores a desenvolver aplicativos para iOS e Android sem conhecer as linguagens

nativas.

Page 9: Appcelerator Titanium – B2W Digital

MAS EU CONHEÇOOBJ-C, SWIFT E JAVA!

Page 10: Appcelerator Titanium – B2W Digital
Page 11: Appcelerator Titanium – B2W Digital

HISTÓRIA DE MARIA:

MARIA É PRODUTORA, ROTEIRISTA E DIRETORA DE

CINEMA.

Page 12: Appcelerator Titanium – B2W Digital

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, MAS TEM

PRESSA.

Page 13: Appcelerator Titanium – B2W Digital

MARIA DEVE…

A. Gravar todas as cenas do filme em cada umdos 3 idiomas

B. Gravar o filme inteiro em um só idioma e adicionar dublagem e legenda para osdemais idiomas depois

Page 14: Appcelerator Titanium – B2W Digital

MARIA DEVE…

A. Gravar todas as cenas do filme em cada umdos 3 idiomas

B. Gravar o filme inteiro em um só idioma e adicionar dublagem e legenda para os demais idiomas depois

Page 15: Appcelerator Titanium – B2W Digital

DESENVOLVIMENTO MULTIPLATAFORMA É COMO PRODUZIR UM FILME COM

DUBLAGEMVocê 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.

Page 16: Appcelerator Titanium – B2W Digital

HÁ 3 ABORDAGENS DE DESENVOLVIMENTO MULTIPLATAFORMA

• Mobile Web • Híbrida • Nativa

Page 17: Appcelerator Titanium – B2W Digital

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

Page 18: Appcelerator Titanium – B2W Digital

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

Page 19: Appcelerator Titanium – B2W Digital

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

Page 20: Appcelerator Titanium – B2W Digital

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

Page 21: Appcelerator Titanium – B2W Digital

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/

Page 22: Appcelerator Titanium – B2W Digital

ABORDAGEMMULTIPLATAFORMA

NATIVA

Page 23: Appcelerator Titanium – B2W Digital

ABORDAGEMMULTIPLATAFORMA NATIVA

Código da aplicação

"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

Page 24: Appcelerator Titanium – B2W Digital

GOOGLE INBOX

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

Page 25: Appcelerator Titanium – B2W Digital

FACEBOOK GROUPS E ADS MANAGER

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

Page 26: Appcelerator Titanium – B2W Digital

ABORDAGEMMULTIPLATAFORMA NATIVA

2015

2009

2009

2015

Page 27: Appcelerator Titanium – B2W Digital

Appcelerator Titanium

Page 28: Appcelerator Titanium – B2W Digital

PLATAFORMAS SUPORTADAS

Page 29: Appcelerator Titanium – B2W Digital

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)

Page 30: Appcelerator Titanium – B2W Digital

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

Page 31: Appcelerator Titanium – B2W Digital

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

Page 32: Appcelerator Titanium – B2W Digital

APIS ESPECÍFICAS

NewsKit

iOS

Touch ID

SafariDialog

SplitWindow (iPad)

Android

ActionBar

Intent

Services

BroadcastReceiver

ActivityToolbar, TabbedBar

Page 33: Appcelerator Titanium – B2W Digital

ELEMENTOS DE UI NATIVOS

Page 34: Appcelerator Titanium – B2W Digital
Page 35: Appcelerator Titanium – B2W Digital

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

Page 36: Appcelerator Titanium – B2W Digital

View

Style

Controller

Page 37: Appcelerator Titanium – B2W Digital
Page 38: Appcelerator Titanium – B2W Digital

HYPERLOOP – MOTIVAÇÃO• Ter acesso a novidades nas API's nativas sem precisar aguardar novas

versões do Titanium

• 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 do Titanium (e.g. Foreground Services do Android)

• Poder de escrever módulos nativos sem conhecer as linguagens nativas (basta conhecer a API)

Page 39: Appcelerator Titanium – B2W Digital

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

Page 40: Appcelerator Titanium – B2W Digital

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

gitt.io

alloylove.com

marketplace.appcelerator.com

loopmodules.com

Page 41: Appcelerator Titanium – B2W Digital

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 à 95%

• UI verdadeiramente nativa (não web-based)

• Acesso a 100% da API nativa com módulos e/ou Hyperloop

Page 42: Appcelerator Titanium – B2W Digital

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

Page 43: Appcelerator Titanium – B2W Digital

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

Page 44: Appcelerator Titanium – B2W Digital

ANALYTICS EM TEMPO REAL

Page 45: Appcelerator Titanium – B2W Digital

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

Page 46: Appcelerator Titanium – B2W Digital

TESTES AUTOMATIZADOS

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

Page 47: Appcelerator Titanium – B2W Digital

CASES DA MQBC

Page 53: Appcelerator Titanium – B2W Digital

CREA-RJ – FISCAL

Page 54: Appcelerator Titanium – B2W Digital

CASES GLOBAIS

Page 55: Appcelerator Titanium – B2W Digital

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


Top Related