mobile apps cross-platform

MOBILE APPSCROSS-PLATFORMMOBILE APPSCROSS-PLATFORM

[email protected]

/adrielcafe

@adrielcafe

/in/adrielcafe

Adriel Café

Plataformas

Precisamos fazer escolhas...

Tantas plataformasTantas linguagens

Tão pouco tempoTão pouco dinheiro

Sistema OperacionalParcela do Mercado

(2º Sem. 2012)

Android 68,1 %

iOS 16,9 %

BlackBerry 4,8 %

Symbian 4,4 %

Windows Phone 2,5 %

Outros 2,4 %

Fonte: IDC Worldwide Mobile Phone Tracker, 8 de Agosto de 2012

Como anda o mercado?

Mas ainda assim enfrentamos um grande desafio:

Criar aplicativosmulti-plataforma

Fonte: Developer Economics 2012 (developereconimics.com), Junho de 2012

O que os desenvolvedores querem?

• .NET Framework (C#, Visual Basic, F#, IronPython, IronRuby...)• Visual Studio

• Java, C/C++, HTML5, Adobe AIR• Android Runtime

• Objective-C• X Code• Mac OS

• Java, C++• Eclipse, NetBeans, MotoDev...• Open Source

Java

C#

Objective-C

Visual Basic

Visual Studio

C++

EclipseMotoDevNetBeans

Como criar um aplicativo multi-plataforma neste cenário?

Adobe AIR

Tecnologias Web

Tecnologias Web• Arquitetura Cliente-Servidor• Rodam em quase todas as plataformas existentes• Fáceis de aprender• Rápido desenvolvimento

Tecnologias Web

Disponível em: http://goo.gl/aX8yE

HTML5, CSS3 & JavaScript

CSS3• Novas propriedades• @font-face• Border-radius• Box-shadow• Opacity• Transform• Transition• Resize• ...

JavaScript• Linguagem client-side• Orientada a objetos• Tipagem fraca e dinâmica• Possui milhares de API’s• AJAX, JQuery, ExtJS, Node.js, GWT, MooTools, RaphaëlJS...

Estão pensando o mesmo que eu?

Que tal utilizar tecnologias webpara criar aplicativos móveis

multi-plataforma?

Mobile Apps Cross-Platform

Mobile Apps Cross-Platform• Write Once, Run Anywhere• Utiliza, na maioria das vezes, tecnologias web• Técnicas utilizadas• JavaScript Frameworks• jQuery Mobile, Wink, Zepto JS, LimeJS...

• App Factories• AppMkr, Tiggzi, Mobjectify...

• Web-to-native wrappers• Sencha Touch, PhoneGap, MoSync...

• Runtimes• Titanium Mobile, Unity, Adobe Air, AppMobi...

Mobile Apps Cross-Platform• Reduzem drasticamente o custo e tempo de

desenvolvimento• Permitem que os web developers possam reutilizar seus

conhecimentos em uma nova plataforma

Fonte: Cross-Platform Tools 2012 (crossplatformtools.com), Fevereiro de 2012

Frameworks mais utilizados

Nem tudo são flores...

Solução perfeita? Não.

Native App, Web App & Hybrid App

Native AppPrós•Melhor performance•UI nativa•Pode armazenar mais informações offline•Disponível nas App Stories•Acesso a todas as funcionalidades do aparelho•Instalado no aparelho

Contras•Mais demorado e custoso para desenvolver•Suporta apenas uma plataforma•Precisa ser aprovado para ser publicado na App Store

Web AppPrós•Utiliza tecnologias web (HTML5, CSS3 & JavaScript)•Suporta múltiplas plataformas•Não é preciso ser aprovado nas App Stories•Atualizações instantâneas

Contras•Linguagem interpretada•Não possui acesso a todas as funcionalidades do aparelho•Não pode ser encontrado nas App Stories

Hybrid AppPrós•Utiliza tecnologias web (HTML5, CSS3 & JavaScript)•Suporta múltiplas plataformas•UI nativa (suportado por alguns frameworks)•Pode armazenar mais informações offline•Disponível nas App Stories•Instalado no aparelho•Suporta muitas funcionalidades do aparelho

Contras•Linguagem interpretada•Precisa ser aprovado para ser publicado na App Store

Qual a melhor opção?• O aplicativo requer o uso de alguma funcionalidade

especial? (Câmera, acelerômetro, GPS, armazenamento...)• Qual o seu orçamento?• O aplicativo requer conexão com a internet?• Quantas plataformas você pretende suportar?• Quais linguagens de programação eu, ou minha equipe,

domina?• A performance é muito importante?• O tempo é curto?

Ferramentas Cross-Platform

• Baseado no jQuery e jQuery UI• Suporta as plataformas iOS, Android, Windows Phone,

BlackBerry, WebOS, Bada, MeeGo, Symbian• Possui o Download builder

<!DOCTYPE html><html lang="en"> <head> <title>Hello jQuery Mobile</title> <link rel="stylesheet“ href="http://code.jquery.com/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/jquery.mobile-1.0a4.min.js"></script> </head> <body> <div data-role="page"> Hello jQuery Mobile </div> </body></html>

• Suporta as plataformas Android, iOS e Blackberry• Baseado nas bibliotecas javascript ExtJS, jQTouch e Raphaël• Possui sua própria IDE: o Sencha Architect• Possui a extensão Sencha Animator• Roda apenas na engine webkit• Documentação perfeita

Ext.application({ launch: function () { Ext.create('Ext.Panel', { fullscreen: true, html: 'Hello World!' }); }});

• Suporta as plataformas iOS, Android, Blackberry, Symbian, Bada e Windows Phone• Possui suas próprias APIs javascript que possibilitam o uso

de recursos nativos que as plataformas oferecem

var showMessageBox = function() { navigator.notification.alert("Hello World!"); } function init(){ document.addEventListener("deviceready", showMessageBox, true); }

• Suporta as plataformas iOS, Android e Blackberry (beta)• Possui sua própria IDE: o Titanium Studio• Possui sua própria loja virtual: a Appcelerator Marketplace• Suporta as linguagens server-side PHP, Python e Ruby• Possui suas próprias APIs javascript que possibilitam o uso de

recursos nativos que as plataformas oferecem

var winHello = Titanium.UI.createWindow(); var lblHello = Titanium.UI.createLabel({ text: 'Hello World!',}); winHello.add(lblHello);winHello.open();

Conclusão

“Cada caso é um caso”(Autor desconhecido)

JOptionPane.showMessageDialog(null, "Muito Obrigado!“

);System.exit(0);

[email protected]

/adrielcafe

@adrielcafe

/in/adrielcafe

Adriel Café

mobile apps cross-platform

Technology