101
10 dicas de desempenho para apps mobile híbridas Loiane Groner http://loiane.com

10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

10 dicas de desempenho para apps mobile híbridas

Loiane Groner http://loiane.com

Page 2: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Me, Myself && I

!

•Gerente de Desenv Projetos

•8+ XP TI

•Java JUG Leader

•Sencha Community Leader

•http://loiane.com

•@loiane

Page 3: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

packpub.com ou amazon.com

Page 4: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

http://upgrade.ins-us.com/

Nov 2013

Page 5: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 6: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 7: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 8: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

I

Page 9: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 10: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 11: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#1

Page 12: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

<div data-role="page" id="tracks">!! <div data-role="header"><h1>Tracks</h1></div>!! <ul data-role="listview">!! <li><a href="getTrackInfo.php?id=1">Desempenho e Escalabilidade na Prática</a></li>!! <li><a href="getTrackInfo.php?id=2">Java na Crista da Onda</a></li>!! <li><a href="getTrackInfo.php?id=3">Arquiteturas que Você Sempre Quis Conhecer</a></li>!! <li><a href="getTrackInfo.php?id=4">Mobile: Portáteis e Furiosos</a></li>!! </ul>!</div>!

Page 13: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

<div data-role="page" id="tracks">!! <div data-role="header"><h1>Tracks</h1></div>!! <ul data-role="listview">!! <li><a href="getTrackInfo.php?id=1">Desempenho e Escalabilidade na Prática</a></li>!! <li><a href="getTrackInfo.php?id=2">Java na Crista da Onda</a></li>!! <li><a href="getTrackInfo.php?id=3">Arquiteturas que Você Sempre Quis Conhecer</a></li>!! <li><a href="getTrackInfo.php?id=4">Mobile: Portáteis e Furiosos</a></li>!! </ul>!</div>!

Page 14: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

NÃO gere páginas no servidor

Page 15: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Web Browser

Dispositivo

JavaScript

Arquivos Imagens/

Documentos

Banco de Dados caching

Page 16: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Web Browser

Dispositivo

Web Server

Java/PHP/Ruby/C#

Arquivos Imagens/

Documentos

Banco de Dados

Backend

http://

Lógica de negócio

JavaScript

Arquivos Imagens/

Documentos

Banco de Dados caching

Page 17: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

JSON

Page 18: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#2

Page 19: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

// Obtém dados!$.ajax({url: "getTrackInfo.php?id=1"}).done(function(track) {! // Mostra os detalhes - view! $.mobile.changePage($('#track-info'));!});!

Page 20: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

// Obtém dados!$.ajax({url: "getTrackInfo.php?id=1"}).done(function(track) {! // Mostra os detalhes - view! $.mobile.changePage($('#track-info'));!});!

Page 21: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

//mostra View!$.mobile.changePage($('#track-info'));!!//------------------------------------------------------------------------!!$(document).bind("pagechange", onPageChange);!!function onPageChange(event, data) {!! var toPageId = data.toPage.attr("id");!!! switch (toPageId) {! case 'track-info':! ! ! clearValues();!! ! // Obtém dados!! ! ! $.ajax({url: "getTrackInfo.php?id=1"}).done(function(track) {!! ! ! // Atualiza os detalhes - view!! ! ! $('#trackNome h1').html(track.name);!! ! ! ! $('#trackDesc').val(track.desc);!! ! ! ! $('#trackDia').val(track.dia);!! ! ! ! $('#trackLocal').val(track.local);!! ! ! ! $('#trackHost').val(track.host);!! ! ! });! ! ! ! break;! }!} !

Page 22: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

//mostra View!$.mobile.changePage($('#track-info'));!!//------------------------------------------------------------------------!!$(document).bind("pagechange", onPageChange);!!function onPageChange(event, data) {!! var toPageId = data.toPage.attr("id");!!! switch (toPageId) {! case 'track-info':! ! ! clearValues();!! ! // Obtém dados!! ! ! $.ajax({url: "getTrackInfo.php?id=1"}).done(function(track) {!! ! ! // Atualiza os detalhes - view!! ! ! $('#trackNome h1').html(track.name);!! ! ! ! $('#trackDesc').val(track.desc);!! ! ! ! $('#trackDia').val(track.dia);!! ! ! ! $('#trackLocal').val(track.local);!! ! ! ! $('#trackHost').val(track.host);!! ! ! });! ! ! ! break;! }!} !

Page 23: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Ext.define('MyContacts.store.Contacts', {! extend: 'Ext.data.Store',!! requires: [! 'MyContacts.model.Contact',! 'MyContacts.proxy.ContactsProxy'! ],!! config: {! autoLoad: true,! model: 'MyContacts.model.Contact',! storeId: 'Contacts',! proxy: {! type: 'contactstorage'! }! }!});!

Page 24: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Ext.define('MyContacts.store.Contacts', {! extend: 'Ext.data.Store',!! requires: [! 'MyContacts.model.Contact',! 'MyContacts.proxy.ContactsProxy'! ],!! config: {! autoLoad: true,! model: 'MyContacts.model.Contact',! storeId: 'Contacts',! proxy: {! type: 'contactstorage'! }! }!});!

Page 25: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

control: {! "contactslist": {! show: 'onListItemPainted'! }!}!!//-------------------------------------!!onListItemPainted: function(view, options) { ! view.getStore().load();!}!

Page 26: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

control: {! "contactslist": {! show: 'onListItemPainted'! }!}!!//-------------------------------------!!onListItemPainted: function(view, options) { ! view.getStore().load();!}!

Page 27: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Mostre a view e depois carregue os

dados

Page 28: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#3

Page 29: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Ext.define('MyContacts.view.ContactsPanel', {! extend: 'Ext.Container',! alias: 'widget.contactspanel',!! requires: [! 'MyContacts.view.ContactsList',! 'MyContacts.view.ContactInfo',! 'MyContacts.view.ContactEdit'! ],!! config: {! layout: {! type: 'card'! },! items: [! {! xtype: 'contactslist'! },! {! xtype: 'contactinfo'! },! {! xtype: 'contactedit'! }! ]! }!!});!

Page 30: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Ext.define('MyContacts.view.ContactsPanel', {! extend: 'Ext.Container',! alias: 'widget.contactspanel',!! requires: [! 'MyContacts.view.ContactsList',! 'MyContacts.view.ContactInfo',! 'MyContacts.view.ContactEdit'! ],!! config: {! layout: {! type: 'card'! },! items: [! {! xtype: 'contactslist'! },! {! xtype: 'contactinfo'! },! {! xtype: 'contactedit'! }! ]! }!!});!

Page 31: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Be LAZY

Page 32: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#4

Page 33: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 34: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

App com lista dos participantes do QCON SP 2014

Page 35: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

select count(*) from ParticipantesQCONSP

App com lista dos participantes do QCON SP 2014

Page 36: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

select count(*) from ParticipantesQCONSP

== 1000

App com lista dos participantes do QCON SP 2014

Page 37: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

select count(*) from ParticipantesQCONSP

== 1000

App com lista dos participantes do QCON SP 2014

É muito dado?

Page 38: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Paging / Paginação

https://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin

http://dcarrith.github.io/jquery.mobile.lazyloader/

Page 39: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

$.ajax({url: "listaEstadosBr.php"}).done(function(data) {! estadosBr = data;!});!

Page 40: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

$.ajax({url: "listaEstadosBr.php"}).done(function(data) {! estadosBr = data;!});!

Page 41: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Dados Estáticos

LocalStorage SQLite - database Arquivo - JSON

Page 42: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

// do a SERVER load, passing a callback function!offlineSyncStore.loadServer(function(){!! // create a new Person record! var person = Ext.create('Person', {! FirstName: 'Joe',! LastName: 'Bloggs',! Email: '[email protected]'! });!! // add it to the store! offlineSyncStore.add(person);!! // sync the store LOCALLY. If autoServerSync is set to true then this will also sync using SERVER proxy! offlineSyncStore.sync();!! // if autoServerSync is false then call SERVER sync manually! offlineSyncStore.syncServer();!!});!

https://market.sencha.com/extensions/ext-ux-offlinesyncstore

Page 43: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

// do a SERVER load, passing a callback function!offlineSyncStore.loadServer(function(){!! // create a new Person record! var person = Ext.create('Person', {! FirstName: 'Joe',! LastName: 'Bloggs',! Email: '[email protected]'! });!! // add it to the store! offlineSyncStore.add(person);!! // sync the store LOCALLY. If autoServerSync is set to true then this will also sync using SERVER proxy! offlineSyncStore.sync();!! // if autoServerSync is false then call SERVER sync manually! offlineSyncStore.syncServer();!!});!

https://market.sencha.com/extensions/ext-ux-offlinesyncstore

Page 44: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Faça cache dos dados

Page 45: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#5

Page 46: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 47: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

var timeTouch;!!$("body").on("touchend", ".needsclick", function() {! timeTouch = new Date().getTime();!});!!$("body").on("click", ".needsclick", function() {! if (timeTouch) {! $("#log-slow").html("click: " + (new Date().getTime() - timeTouch) + "ms");! }! return false;!});!

Page 48: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

var timeTouch;!!$("body").on("touchend", ".needsclick", function() {! timeTouch = new Date().getTime();!});!!$("body").on("click", ".needsclick", function() {! if (timeTouch) {! $("#log-slow").html("click: " + (new Date().getTime() - timeTouch) + "ms");! }! return false;!});!

Page 49: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Evite CLICK use TOUCHEND

Page 50: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 51: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Fastclick

https://github.com/ftlabs/fastclick

Page 52: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

$("body").on("touchend", ".fastclick", function() {! timeTouch = new Date().getTime();!});!!$("body").on("click", ".fastclick", function() {! if (timeTouch) {! $("#log-fast").html("touchend: " + (new Date().getTime() - timeTouch) + "ms");! } else {! alert("Execute esse exemplo em um device touch");! }! return false;!});!

Page 53: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

$("body").on("touchend", ".fastclick", function() {! timeTouch = new Date().getTime();!});!!$("body").on("click", ".fastclick", function() {! if (timeTouch) {! $("#log-fast").html("touchend: " + (new Date().getTime() - timeTouch) + "ms");! } else {! alert("Execute esse exemplo em um device touch");! }! return false;!});!

Page 54: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#6

Page 55: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 56: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

$("#page").animate();!

Page 57: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

$("#page").animate();!

Page 58: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

.page {! position: absolute;! width: 200px;! height:200px;! top:20px;! left:50;!}!!.page-left {! left: 50px;!}!.page-center {! left: 275px;!}!.page-right {! left: 500px;!}!!.transition {! transition-duration: .25s;!}!

Page 59: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

.page {! position: absolute;! width: 200px;! height:200px;! top:20px;! left:50;!}!!.page-left {! left: 50px;!}!.page-center {! left: 275px;!}!.page-right {! left: 500px;!}!!.transition {! transition-duration: .25s;!}!

Page 60: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Use CSS 3 Transitions +

Hardware Acceleration

Page 61: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

.page {! position: absolute;! width: 200px;! height:200px;! top:20px;! left:50;! transform: translate3d(0,0,0);!}!!.page-left {! -webkit-transform: translate3d(30px, 0, 0);! transform: translate3d(31px, 0, 0);!}!.page-center {! -webkit-transform: translate3d(250px, 0, 0);! transform: translate3d(251px, 0, 0);!}!.page-right {! -webkit-transform: translate3d(470px, 0, 0);! transform: translate3d(471px, 0, 0);!}!!.transition {! -webkit-transition-duration: .25s;! transition-duration: .25s;!}!

Page 62: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

.page {! position: absolute;! width: 200px;! height:200px;! top:20px;! left:50;! transform: translate3d(0,0,0);!}!!.page-left {! -webkit-transform: translate3d(30px, 0, 0);! transform: translate3d(31px, 0, 0);!}!.page-center {! -webkit-transform: translate3d(250px, 0, 0);! transform: translate3d(251px, 0, 0);!}!.page-right {! -webkit-transform: translate3d(470px, 0, 0);! transform: translate3d(471px, 0, 0);!}!!.transition {! -webkit-transition-duration: .25s;! transition-duration: .25s;!}!

Page 63: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Page Slider

https://github.com/ccoenraets/PageSlider

Page 64: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#7

Page 65: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

• box-shadow • border-radius • gradients • text-align

Page 66: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

• box-shadow • border-radius • gradients • text-align

Page 67: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Evite sombras e gradientes

Page 68: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#8

Page 69: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

$("#contato-info a.back").on("touchend", clickHandler);!$("#contato-info a.back").attr("href", "#contato-info");!$("#contato-info a.back").css("color", "green");!$("#contato-info a.back").css("text-decoration", "none");!

Page 70: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

$("#contato-info a.back").on("touchend", clickHandler);!$("#contato-info a.back").attr("href", "#contato-info");!$("#contato-info a.back").css("color", "green");!$("#contato-info a.back").css("text-decoration", "none");!

Page 71: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Ext.ComponentQuery.query('contactinfo button#back')[0].on('tap', clickHandler);!Ext.ComponentQuery.query('contactinfo button#back')[0].setCls('backBtn');!Ext.ComponentQuery.query('contactinfo button#back')[0].setLabelCls('labelCls');!

Page 72: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Ext.ComponentQuery.query('contactinfo button#back')[0].on('tap', clickHandler);!Ext.ComponentQuery.query('contactinfo button#back')[0].setCls('backBtn');!Ext.ComponentQuery.query('contactinfo button#back')[0].setLabelCls('labelCls');!

Page 73: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

var $backBtn = $('#contato-info a.back');!$backBtn.on("touchend", clickHandler);!$backBtn.attr("href", "#contato-info");!$backBtn.css("color", "green");!$backBtn.css("text-decoration", "none");!

Page 74: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

var $backBtn = $('#contato-info a.back');!$backBtn.on("touchend", clickHandler);!$backBtn.attr("href", "#contato-info");!$backBtn.css("color", "green");!$backBtn.css("text-decoration", "none");!

Page 75: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

var backBtn = Ext.ComponentQuery.query('contactinfo button#back')[0];!backBtn.on('tap', clickHandler);!backBtn.setCls('backBtn');!backBtn.setLabelCls('labelCls');!

Page 76: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

var backBtn = Ext.ComponentQuery.query('contactinfo button#back')[0];!backBtn.on('tap', clickHandler);!backBtn.setCls('backBtn');!backBtn.setLabelCls('labelCls');!

Page 77: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Minimize Browser Reflows

Page 78: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#9

Page 79: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 80: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

XUI

Page 81: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 82: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

x$(document).on("deviceready", function () {!! headingDiv = x$("#heading");! navigator.compass.getCurrentHeading(onSuccess, onError);! navigator.compass.watchHeading(onSuccess, onError, {frequency: 100});!! function onSuccess(heading) {! headingDiv.html(! 'Heading: ' + heading.magneticHeading + '&#xb0; ' +! convertToText(heading.magneticHeading) + '<br />' +! 'True Heading: ' + heading.trueHeading + '<br />' +! 'Accuracy: ' + heading.headingAccuracy! );! ! // Alter the CSS properties to rotate the rose image! x$(".rose").css({! "-webkit-transform":! "rotate(-" + heading.magneticHeading + "deg)",! "transform":! "rotate(-" + heading.magneticHeading + "deg)"! });! }!! function onError() {! headingDiv.html(! 'There was an error trying to ' +! 'locate your current bearing.'! );! }!});!

Page 83: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Topcoat

Page 84: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Cuidado com framework / lib da

moda

Page 85: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 86: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

#10

Page 87: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

.icon-user {! background-image: url(../images/user.png) !important;!}!!.icon-user-add {! background-image: url(../images/user_add.gif) !important;!}!!.icon-save {! background-image: url(../images/save.gif) !important;!}!!.icon-reset {! background-image: url(../images/stop.png) !important;!}!!.icon-grid {! background-image: url(../images/grid.png) !important;!}!!.icon-add {! background-image: url(../images/add.png) !important;!}!!.icon-delete {! background-image: url(../images/delete.png) !important;!}!

Page 88: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

.icon-user {! background-image: url(../images/user.png) !important;!}!!.icon-user-add {! background-image: url(../images/user_add.gif) !important;!}!!.icon-save {! background-image: url(../images/save.gif) !important;!}!!.icon-reset {! background-image: url(../images/stop.png) !important;!}!!.icon-grid {! background-image: url(../images/grid.png) !important;!}!!.icon-add {! background-image: url(../images/add.png) !important;!}!!.icon-delete {! background-image: url(../images/delete.png) !important;!}!

Page 89: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 90: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

.icon {!! background-image:url(result.png);!}!!.icon-user {! background-position: 0px -156px;!}!!.icon-user-add {! background-position: 0px -130px;!}!!.icon-save {! background-position: 0px -78px;!}!!.icon-reset {! background-position: 0px -104px;!}!!.icon-grid {! background-position: 0px -52px;!}!!.icon-add {! background-position: 0px 0px;!}!!.icon-delete {! background-position: 0px -26px;!}!

Page 91: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

.icon {!! background-image:url(result.png);!}!!.icon-user {! background-position: 0px -156px;!}!!.icon-user-add {! background-position: 0px -130px;!}!!.icon-save {! background-position: 0px -78px;!}!!.icon-reset {! background-position: 0px -104px;!}!!.icon-grid {! background-position: 0px -52px;!}!!.icon-add {! background-position: 0px 0px;!}!!.icon-delete {! background-position: 0px -26px;!}!

Page 92: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Build Otimizado

Agrega Valor!

Page 93: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 94: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner
Page 95: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

http://jquerymobile.com/download-builder/

Page 96: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

http://jquerymobile.com/download-builder/

Page 97: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

OTIMIZE JS, CSS, HTML

Page 98: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

http://browserdiet.com/pt/

Page 99: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

https://github.com/loiane/mobile-hibrido-performance

Page 100: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

http://loiane.com

facebook.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Page 101: 10 dicas de desempenho para apps mobile h bridas · 2014. 8. 27. · 10 dicas de desempenho para apps mobile h bridas Loiane Groner

Obrigada!