Desenvolvimento híbrido de
apps mobile com HTML5

Loiane Groner
http://loiane.com
Me, Myself & I

•Gerente de Desenv Projetos e Sencha coach @Citibank
•8+ XP TI
•Java JUG Leader
•Sencha Community Leader
•...
packpub.com ou
amazon.com
Porque
Mobile?
2005
2013
#changeBrazil
Porque Multiplataforma?
App Nativa
App Nativa

Lógica

de negó
cio

Web Server
tp://
ht

Java/
PHP/
Ruby/C#

App Nativa
Arquivos Banco de
Imagens/
Dados
Docu...
$99 anuais
$25
$0

$19 - $99 anuais
Você precisa aprender…
Boa Sorte!
Acesso
Device

Nativo

Performance

Tempo
Desenvolvimento

App
Store

Cross
Platform

Sim

Sim

Caro

Sim

Não

Web

Parci...
Acesso
Device

Nativo

Performance

Tempo
Desenvolvimento

App
Store

Cross
Platform

Sim

Sim

Caro

Sim

Não

Web

Parci...
joApp
Wink Toolkit
joApp
Wink Toolkit
Web App
Server Side Web

Execut
a UI e
Lógica
de negó
cio

Web Server
tp://
ht

Java/
PHP/
Ruby/C#

Web Browser
Arquivos Banco de
...
•

Tem o JQuery como base
•

Tem o JQuery como base

•

Estrutura Multi-Page
•

Tem o JQuery como base

•

Estrutura Multi-Page

•

Sintaxe Simples
•

Tem o JQuery como base

•

Estrutura Multi-Page

•

Sintaxe Simples

•

Suporte a Temas
•

Tem o JQuery como base

•

Estrutura Multi-Page

•

Sintaxe Simples

•

Suporte a Temas

•

Web Page App
• JQuery

(jquery.com)

• JQuery

Mobile (jquerymobile.com)

• Editor

de texto (o de sua preferência!)

• WebServer
• Bro...
http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
•

Primeiro Framework HTML5 Mobile do Mercado!
•

Primeiro Framework HTML5 Mobile do Mercado!

•

Estrutura Single-Page app
•

Primeiro Framework HTML5 Mobile do Mercado!

•

Estrutura Single-Page app

•

Curva de aprendizado não tão simples
•

Primeiro Framework HTML5 Mobile do Mercado!

•

Estrutura Single-Page app

•

Curva de aprendizado não tão simples

•

...
•

Primeiro Framework HTML5 Mobile do Mercado!

•

Estrutura Single-Page app

•

Curva de aprendizado não tão simples

•

...
•

Primeiro Framework HTML5 Mobile do Mercado!

•

Estrutura Single-Page app

•

Curva de aprendizado não tão simples

•

...
• Sencha Touch
• Sencha
• Editor

SDK (sencha.com)

Cmd (sencha.com)

de texto (o de sua preferência!)

• WebServer
• Brow...
$ cd /path/to/sencha-touch-2-sdk
$ sencha generate app MyApp /path/to/www/myapp
App Client Side Nativa
sencha app package run
<configFile.json>
Client Side Web
Web Browser
JavaScript

Arquivos
Imagens/
Documentos

Lógica

de negó
cio

Web Server
ttp:/
h

/

Banco
de...
App Híbrida
Porque Híbrido?
E vos declaro
Apps Mobile Híbridas
PhoneGap
App Híbrida
App Nativa
Código Nativo

Interpretador

Lógica

de negó
cio

Web Server
/
ttp:/
h

Java/
PHP/
Ruby/C#

://
tp...
http://nodejs.org/
$ sudo npm install -g phonegap
$ phonegap create hello com.example.hello HelloWorld
$ phonegap build ios
    [phonegap] detecting iOS SDK environment...
    [phonegap] using the local environment
    [phone...
$ phonegap run android
    [phonegap] detecting Android SDK environment...
    [phonegap] using the local environment
    ...
Desenvolva

Desenvolva

Híbrido
Teste

Teste

Build

Build

{

Desenvolva

Build

Teste

Build
+
http://www.sencha.com/apps/
http://phonegap.com/app/
Build
Otimizado
Agrega Valor!
http://browserdiet.com/
Demo
Threads
#FAIL
<div id="jogador">
http://phonegap.com/app/fruit-salad/
http://loiane.com
facebook.com/loianegroner

@loiane
https://github.com/loiane
youtube.com/user/Loianeg
Obrigada!
http://loiane.com
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Upcoming SlideShare
Loading in...5
×

Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5

5,114

Published on

Palestra apresentada na UFG em 12 de novembro de 2013

Published in: Technology

Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5

  1. 1. Desenvolvimento híbrido de apps mobile com HTML5 Loiane Groner http://loiane.com
  2. 2. Me, Myself & I •Gerente de Desenv Projetos e Sencha coach @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  3. 3. packpub.com ou amazon.com
  4. 4. Porque Mobile?
  5. 5. 2005
  6. 6. 2013
  7. 7. #changeBrazil
  8. 8. Porque Multiplataforma?
  9. 9. App Nativa
  10. 10. App Nativa Lógica de negó cio Web Server tp:// ht Java/ PHP/ Ruby/C# App Nativa Arquivos Banco de Imagens/ Dados Documentos UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Backend
  11. 11. $99 anuais $25 $0 $19 - $99 anuais
  12. 12. Você precisa aprender…
  13. 13. Boa Sorte!
  14. 14. Acesso Device Nativo Performance Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Parcial Sim* Ótimo Não Sim Cliente Parcial Sim* Ótimo Não Sim Híbrido Sim Sim* Ótimo* Sim Sim*
  15. 15. Acesso Device Nativo Performance Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Parcial Sim* Ótimo Não Sim Cliente Parcial Sim* Ótimo Não Sim Híbrido Sim Sim* Ótimo* Sim Sim* Interpretado Não é o foco da palestra
  16. 16. joApp Wink Toolkit
  17. 17. joApp Wink Toolkit
  18. 18. Web App
  19. 19. Server Side Web Execut a UI e Lógica de negó cio Web Server tp:// ht Java/ PHP/ Ruby/C# Web Browser Arquivos Banco de Imagens/ Dados Documentos Dispositivo um nas dor Ape riza de ren Backend
  20. 20. • Tem o JQuery como base
  21. 21. • Tem o JQuery como base • Estrutura Multi-Page
  22. 22. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples
  23. 23. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples • Suporte a Temas
  24. 24. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples • Suporte a Temas • Web Page App
  25. 25. • JQuery (jquery.com) • JQuery Mobile (jquerymobile.com) • Editor de texto (o de sua preferência!) • WebServer • Browser (Apache/Xampp, IIS, etc) (o de sua preferência!) • Emuladores Phone 8) • Aparelhos (Android, iOS, Blackberry, Windows para testes!*
  26. 26. http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
  27. 27. • Primeiro Framework HTML5 Mobile do Mercado!
  28. 28. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app
  29. 29. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples
  30. 30. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC
  31. 31. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC • Suporte a Temas (Sass e Compass)
  32. 32. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC • Suporte a Temas (Sass e Compass) • Web Page App , Client Side App, Hybrid App
  33. 33. • Sencha Touch • Sencha • Editor SDK (sencha.com) Cmd (sencha.com) de texto (o de sua preferência!) • WebServer • Browser (Apache/Xampp, IIS, etc) (Safari, Chrome, IE 10) • Emuladores Phone 8) • Aparelhos (Android, iOS, Blackberry, Windows para testes!*
  34. 34. $ cd /path/to/sencha-touch-2-sdk $ sencha generate app MyApp /path/to/www/myapp
  35. 35. App Client Side Nativa
  36. 36. sencha app package run <configFile.json>
  37. 37. Client Side Web Web Browser JavaScript Arquivos Imagens/ Documentos Lógica de negó cio Web Server ttp:/ h / Banco de Dados caching UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Java/ PHP/ Ruby/C# Arquivos Banco de Imagens/ Dados Documentos Backend
  38. 38. App Híbrida
  39. 39. Porque Híbrido?
  40. 40. E vos declaro Apps Mobile Híbridas
  41. 41. PhoneGap
  42. 42. App Híbrida App Nativa Código Nativo Interpretador Lógica de negó cio Web Server / ttp:/ h Java/ PHP/ Ruby/C# :// tp ht Ponte JavaScript UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Arquivos Banco de Imagens/ Dados Documentos Backend
  43. 43. http://nodejs.org/
  44. 44. $ sudo npm install -g phonegap
  45. 45. $ phonegap create hello com.example.hello HelloWorld
  46. 46. $ phonegap build ios     [phonegap] detecting iOS SDK environment...     [phonegap] using the local environment     [phonegap] compiling iOS...     [phonegap] successfully compiled iOS app
  47. 47. $ phonegap run android     [phonegap] detecting Android SDK environment...     [phonegap] using the local environment     [phonegap] compiling Android...     [phonegap] successfully compiled Android app     [phonegap] trying to install app onto device     [phonegap] no device was found     [phonegap] trying to install app onto emulator     [phonegap] successfully installed onto emulator
  48. 48. Desenvolva Desenvolva Híbrido Teste Teste Build Build { Desenvolva Build Teste Build
  49. 49. +
  50. 50. http://www.sencha.com/apps/ http://phonegap.com/app/
  51. 51. Build Otimizado Agrega Valor!
  52. 52. http://browserdiet.com/
  53. 53. Demo
  54. 54. Threads
  55. 55. #FAIL
  56. 56. <div id="jogador">
  57. 57. http://phonegap.com/app/fruit-salad/
  58. 58. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  59. 59. Obrigada! http://loiane.com

×