QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
•
14 j'aime•2,169 vues
Palestra apresentada no dia 11 de abril de 2014 no QCON SP 2014
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
- 1. 10 dicas de desempenho para apps mobile híbridas Loiane Groner http://loiane.com
- 2. Me,Myself && I ! •Gerente de Desenv Projetos •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
- 8. I
- 11. #1
- 12. <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>!
- 13. <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>!
- 14. NÃO gere páginas no servidor
- 16. 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
- 17. JSON
- 18. #2
- 19. // Obtém dados! $.ajax({url: "getTrackInfo.php?id=1"}).done(function(track) {! // Mostra os detalhes - view! $.mobile.changePage($('#track-info'));! });!
- 20. // Obtém dados! $.ajax({url: "getTrackInfo.php?id=1"}).done(function(track) {! // Mostra os detalhes - view! $.mobile.changePage($('#track-info'));! });!
- 21. //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;! }! } !
- 22. //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;! }! } !
- 23. 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'! }! }! });!
- 24. 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'! }! }! });!
- 25. control: {! "contactslist": {! show: 'onListItemPainted'! }! }! ! //-------------------------------------! ! onListItemPainted: function(view, options) { ! view.getStore().load();! }!
- 26. control: {! "contactslist": {! show: 'onListItemPainted'! }! }! ! //-------------------------------------! ! onListItemPainted: function(view, options) { ! view.getStore().load();! }!
- 27. Mostre a view e depois carregue os dados
- 28. #3
- 29. 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'! }! ]! }! ! });!
- 30. 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'! }! ]! }! ! });!
- 31. Be LAZY
- 32. #4
- 34. App com lista dos participantes do QCON SP 2014
- 35. select count(*) from ParticipantesQCONSP App com lista dos participantes do QCON SP 2014
- 36. select count(*) from ParticipantesQCONSP == 1000 App com lista dos participantes do QCON SP 2014
- 37. select count(*) from ParticipantesQCONSP == 1000 App com lista dos participantes do QCON SP 2014 É muito dado?
- 39. $.ajax({url: "listaEstadosBr.php"}).done(function(data) {! estadosBr = data;! });!
- 40. $.ajax({url: "listaEstadosBr.php"}).done(function(data) {! estadosBr = data;! });!
- 41. Dados Estáticos LocalStorage SQLite - database Arquivo - JSON
- 42. // 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: 'joe@swarmonline.com'! });! ! // 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
- 43. // 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: 'joe@swarmonline.com'! });! ! // 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
- 45. #5
- 47. 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;! });!
- 48. 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;! });!
- 52. $("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;! });!
- 53. $("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;! });!
- 54. #6
- 58. .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;! }!
- 59. .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;! }!
- 60. Use CSS 3 Transitions + Hardware Acceleration
- 61. .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;! }!
- 62. .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;! }!
- 64. #7
- 65. • box-shadow • border-radius • gradients • text-align
- 66. • box-shadow • border-radius • gradients • text-align
- 68. #8
- 69. $("#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");!
- 70. $("#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");!
- 71. 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');!
- 72. 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');!
- 73. var $backBtn = $('#contato-info a.back');! $backBtn.on("touchend", clickHandler);! $backBtn.attr("href", "#contato-info");! $backBtn.css("color", "green");! $backBtn.css("text-decoration", "none");!
- 74. var $backBtn = $('#contato-info a.back');! $backBtn.on("touchend", clickHandler);! $backBtn.attr("href", "#contato-info");! $backBtn.css("color", "green");! $backBtn.css("text-decoration", "none");!
- 75. var backBtn = Ext.ComponentQuery.query('contactinfo button#back')[0];! backBtn.on('tap', clickHandler);! backBtn.setCls('backBtn');! backBtn.setLabelCls('labelCls');!
- 76. var backBtn = Ext.ComponentQuery.query('contactinfo button#back')[0];! backBtn.on('tap', clickHandler);! backBtn.setCls('backBtn');! backBtn.setLabelCls('labelCls');!
- 78. #9
- 80. XUI
- 82. 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 + '° ' +! 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.'! );! }! });!
- 83. Topcoat
- 84. Cuidado com framework / lib da moda
- 86. #10
- 87. .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;! }!
- 88. .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;! }!
- 90. .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;! }!
- 91. .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;! }!
- 101. Obrigada!