ShoutEm je prilikom zadnje velike nadogradnje platforme objavio iPhone aplikaciju temeljenu na hibridnim tehnologijama. S obzirom na kvalitetnu postojeću aplikaciju razvijenu u native tehnologiji, najveći izazov bio je napraviti aplikaciju koja korisničkim doživljajem neće jako kaskati za prethodnom verzijom. Dapače, nova verzija morala je izgledati kao poboljšanje u odnosu na raniju. U ovom predavanju možete čuti s kojim problemima smo se susreli i kako smo realizirali različite komponente sučelja (pull down to refresh, slide-in menu...) te o mnogim drugim tehničkim izazovima i njihovim, ne nužno tehničkim, rješenjima.

1. Tips and tricks u razvoju
hibridne mobilne
aplikacije
Srđan Stanić
ShoutEm

5. ShoutEm v4
● novi dizajn App Buildera
● novi dizajn smartphone aplikacija
● prijelaz s native na hibridnu tehnologiju za
iPhone app

6. iPhone is the KING
http://www.goldgenie.com/gold-iphone5-edition.php

7. Izazovi
● novi dizajn
● postojeće UI komponente
● nove UI komponente

9. Tabovi za prikaz
sadržaja različitih
kategorija

10. Padajući izbornik za
prikaz sadržaja
različitih kategorija

11. <div class="arrow"></div>
http://getbootstrap.com/2.3.2/javascript.html#popovers

12. Takeaway
● usability je važniji od cool efekta
● treba cijeniti trenutke kad bolji usability
ujedno znači i manje posla prilikom
implementacije

13. Pull down to refresh

14. http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/

16. <div class="circle-wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>

17. <div class="infinite-progress-bar"></div>

18. Slide menu

20. Takeaway
● think outside the box
● ponekad tehnički problem možete riješiti
dizajnerskim rješenjem
● ne treba se bojati neuobičajenih rješenja

21. Umetnuta
galerija slika

22. var scroller = new iScroll(
'wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false
}
);

23. KAOS!

24. SWIPE
CONTROLLER!

25. http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html
http://bitovi.com/blog/2010/10/a-crash-course-in-how-dom-events-work.html

26. Swipe Controller
shm.swipeController = {
/**
* @param handler: reference to an object which handles the events
* @param event: touchstart event object (used as the regulation medium)
* @param aligning: horizontal ("h"), vertical ("v")
*/
registerHandler: function(handler, event, aligning) {
},
grantsPermissionTo: function(handler, event) {
}
}

28. Takeaway
UKP > P1 + P2 + P3

29. Kad se dizajner
razmaše

30. Kad se dizajner
razmaše

31. CSS može sve
element.style {
position: absolute;
border-width: 69px 469px 507px
17px;
}
.dimmed-background.has-visible-area {
background: rgba(0,0,0,0);
border-color: rgba(0,0,0,.7);
border-style: solid;
}
.dimmed-background {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: rgba(0,0,0,.7);
}
top
left
right
bottom

32. Optimizacija performansi
http://pocketnow.com/2012/05/20/frustrations-of-a-windows-phone-user

34. Sencha
prije:
<img
src='http://shoutem.com/files/u.jpg'
alt='My large image'
/>
poslije:
<img
src='http://src.sencha.io/http://shoutem.com/files/u.jpg'
alt='My smaller image'
/>
http://docs.sencha.io/current/index.html#!/guide/src

35. Zaključak
● web tehnologije su “spremne”
● native daje bolji UX
● web daje dovoljno dobar UX

36. Pitanja?
email: srdan@shoutem.com
twitter: @srstanic