FrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridas
7 likes1,557 views
The document provides ten performance tips for hybrid mobile applications, focusing on optimizing user experience and efficiency. Key recommendations include minimizing server interaction, utilizing caching techniques, and improving touch interactions to reduce latency. Additional suggestions highlight the importance of using CSS transitions, limiting the use of heavy graphics, and keeping JavaScript and CSS optimized.
![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'!
}!
}!
});!](https://image.slidesharecdn.com/frontinbahia2014-140913130549-phpapp02/85/FrontInBahia-2014-10-dicas-de-desempenho-para-apps-mobile-hibridas-20-320.jpg)
![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'!
}!
]!
}!
!
});!](https://image.slidesharecdn.com/frontinbahia2014-140913130549-phpapp02/85/FrontInBahia-2014-10-dicas-de-desempenho-para-apps-mobile-hibridas-25-320.jpg)
![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');!](https://image.slidesharecdn.com/frontinbahia2014-140913130549-phpapp02/85/FrontInBahia-2014-10-dicas-de-desempenho-para-apps-mobile-hibridas-53-320.jpg)
![var backBtn = Ext.ComponentQuery.query('contactinfo button#back')[0];!
backBtn.on('tap', clickHandler);!
backBtn.setCls('backBtn');!
backBtn.setLabelCls('labelCls');!](https://image.slidesharecdn.com/frontinbahia2014-140913130549-phpapp02/85/FrontInBahia-2014-10-dicas-de-desempenho-para-apps-mobile-hibridas-55-320.jpg)
FrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridas
- 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, Sencha, Phonegap •http://loiane.com •@loiane
- 4. Learning JavaScript Data Structures and Algorithms ! Out/Nov 2014 Ext JS 5 Avançado ! Fev 2015
- 10. I
- 12. #1
- 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
- 15. 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
- 16. JSON
- 17. #2
- 18. // Obtém dados! $.ajax({url: "getTrackInfo.php?id=1"}).done(function(track) {! // Mostra os detalhes - view! $.mobile.changePage($('#track-info'));! });!
- 19. //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;! }! } !
- 20. 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'! }! }! });!
- 21. control: {! "contactslist": {! show: 'onListItemPainted'! }! }! ! //-------------------------------------! ! onListItemPainted: function(view, options) { ! view.getStore().load();! }!
- 22. Show me the VIEW!
- 23. Mostre a view e depois carregue os dados
- 24. #3
- 25. 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'! }! ]! }! ! });!
- 27. #4
- 28. App com lista dos participantes do FrontInBahia select count(*) from Participantes == 1000 É muito dado?
- 29. Paging / Paginação https://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin http://dcarrith.github.io/jquery.mobile.lazyloader/
- 30. $.ajax({url: "listaEstadosBr.php"}).done(function(data) {! estadosBr = data;! });!
- 31. Dados Estáticos LocalStorage SQLite - database Arquivo - JSON
- 32. // 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
- 33. Faça cache dos dados
- 34. #5
- 36. 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;! });!
- 37. Evite CLICK use TOUCHEND
- 40. $("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;! });!
- 41. #6
- 44. .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;! }!
- 45. Use CSS 3 Transitions + Hardware Acceleration
- 46. .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;! }!
- 48. #7
- 49. • box-shadow • border-radius • gradients • text-align
- 50. Evite sombras e gradientes
- 51. #8
- 52. $("#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");!
- 53. 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');!
- 54. var $backBtn = $('#contato-info a.back');! $backBtn.on("touchend", clickHandler);! $backBtn.attr("href", "#contato-info");! $backBtn.css("color", "green");! $backBtn.css("text-decoration", "none");!
- 55. var backBtn = Ext.ComponentQuery.query('contactinfo button#back')[0];! backBtn.on('tap', clickHandler);! backBtn.setCls('backBtn');! backBtn.setLabelCls('labelCls');!
- 57. #9
- 58. XUI
- 60. 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.'! );! }! });!
- 61. Topcoat
- 62. Cuidado com framework / lib da moda
- 64. #10
- 65. .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;! }!
- 67. .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;! }!
- 68. Build Otimizado Agrega Valor!
- 72. OTIMIZE JS, CSS, HTML
- 76. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
- 77. Obrigada!