Criando Apps Multiplataforma com Tecnologias Web

MOBILE APPS
CROSS-PLATFORM
Adriel Café

ac@adrielcafe.com

/adrielcafe

@adrielcafe

/in/adrielcafe

Tantas plataformas
Tantas linguagens

Tão pouco tempo
Tão pouco dinheiro

Precisamos fazer escolhas...

Como anda o mercado?
Parcela do Mercado
Sistema Operacional
(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

Mas ainda assim enfrentamos um grande desafio:

Criar aplicativos
multi-plataforma

O que os desenvolvedores querem?

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

• .NET Framework (C#, • Java, C/C++, HTML5, Adobe
Visual Basic, F#, AIR
IronPython, IronRuby...) • Android Runtime
• Visual Studio

• Objective-C • Java, C++
• X Code • Eclipse, NetBeans, MotoDev...
• Mac OS • Open Source

Objective-C C++
Java
C# Adobe AIR Visual Basic

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

Visual Studio Eclipse
NetBeans MotoDev

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

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 web
para criar aplicativos móveis
multi-plataforma?

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

Frameworks mais utilizados

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

Solução perfeita? Não.

Nem tudo são flores...

Native App, Web App & Hybrid App

Native App
Pró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 App
Pró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 App
Pró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?

• 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);

Adriel Café

ac@adrielcafe.com

/adrielcafe

@adrielcafe

/in/adrielcafe

Criando Apps Multiplataforma com Tecnologias Web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Criando Apps Multiplataforma com Tecnologias Web

Semelhante a Criando Apps Multiplataforma com Tecnologias Web (20)

Mais de Adriel Café

Mais de Adriel Café (8)

Criando Apps Multiplataforma com Tecnologias Web