Time.zip
Developing an Android-iOS, smartphone-tablet app in one
month
Ivano Malavolta and Alessio d'Arielli
Ivano Malavolta
Research fellow @University of L'Aquila

Alessio d'Arielli
Graphic Designer and Web developer
Roadmap
App overview
Organizational best practices
Technical best practices
App
Overview
The Customer

Who is Frascati Scienza
What kind of app they asked for
Stuff provided

A Storyboard (with many revisions)
Stuff provided

Photoshop Mockups (with many revisions too)
Stuff provided

Anxiety (with many emails and phone calls)
Technical constraints
Platforms to support: Android 4.x & iOS 6.x
Devices: Smartphone & tablet
Offline support
QR code sca...
Timeline

2 people, ~4 hours a day
Total working hours: ~320
(~1 month, 2 people full time)
The app

More than 5000 participants to the event
The treasure hunt carried on in the center of Rome
It involved 1000 peop...
Organizational
Best
Practices
1. Debug contract before the code

Ask about the operational flow, the UI / UX, the intention of
the app IMMEDIATELY.
Writ...
2. Web-based feasibility

If they ask to support multiple platforms, evaluate if webbased development (PhoneGap) is feasib...
3. Balance efforts

Equally divide the workload, responsibilities and testing.
Notify quickly to colleagues about bugs.
4. Use code repositories

Use repository for remote collaboration (SVN, git, etc.)
rather than email or other methods that...
5. Avoid micro-multitasking

Focus on and complete a task at time, otherwise probability
of injecting bugs is terribly hig...
6. Use MVC pattern

By structuring the app with the MVC pattern, you can work
in parallel on JS and frontend HTML5/CSS3
7. Modularity

Max simplification of navigation and extreme modularity so
any changes to the content or presentation are q...
8. Be reactive

Maximise reactivity and cooperation with colleagues.
Don't empower customer's anxiety
responding immediate...
9. Organize revisions with customers

Keep the customer in the loop, arrange periodical meetings
in order to update him an...
10. Get all testing tools

Book many hours for testing (and blasphemy),
get as soon as you can as much devices as possible...
Summary
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Debug contract before the code
Web-based feasibility
Balance efforts
Use code repo...
Technical
Best
Practices
1. First day: search and test already
developed components
r qi ec ni (
e ur . of g{
p ts {
ah:
j ur :' . lb ju r/ q ey 19 1m n, / '. l bj ur /e t' *
qe y ./ i/ q ey ju r- .. . i' *...
2. Establish the software architecture
from the beginning

It will guide the structure of your code
v rE tV e =B cb n. i we tn (
a n e iw
a k oe Ve .x e d{
m dl E t,
oe : n e
i ii lz : fn to ( {
nt ai e uc i n )
t i. i l =...
3. Clearly separate concerns

It makes the code more testable
More easy to extend and refine the app
It allowed us to foll...
from JS developer's perspective...

I commit this

after update I see this
Example (home view)

d fn (. . "e tt ml t sf ac ts in a hm ", / dp ne c t tm lt f l
e ie [ ., tx ! ep ae /r s ai ce z. tl ...
4. Keep performance in mind from the
beginning
Avoid to fall into the fancy-framework trap
Use pure JS as much as you can
...
5. Views first, then data
v rA po tr =B c bn .o tr e tn (
a p R ue
ak oe R ue .x ed {
/ *
* /
c ag Pg :f nt o (a e {
h ne ...
6. Let the user forget he is looking at a
browser
@ hr e "T -"
c as t UF 8 ;
/ SA D R F RM B L *
* T NA D O OI E /
*{
/ t ...
7. Minimize network access
/ W lu c te Ap
/ e a nh h p
r qi e[ ud rc r ' ' a ko e, 'p n , ' ot r, 'a a aa e' ,
e ur ('n es...
8. Take special care of images
Avoid to resize images (both via CSS and JS)
Be robust w.r.t. 404 errors
/ i te tm lt *
* n...
9. When it's simple, leave it simple
Don't overelaborate. Complexity will come by itself.
g Bc :f nt o (e f {
o ak uc in s...
10. Test, debug, test, debug
In this context, your desktop browser is the killer app!
Check console
Breakpoints
Update the...
Summary
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

First day: search and test already developed components
Establish the software arc...
Conclusions
We extracted a set of organizational and technical best
practices from a true story
In any case, step zero to ...
Bonus
An RSS reader in 20 lines of pure JavaScript ;)
d fn (" qe y," ne so e," ak oe ," oe s Rs]
e ie [ ju r" u dr c r" b ...
Ivano Malavolta
Research fellow
ivano.malavolta@univaq.it
www.ivanomalavolta.com
@IMalavolta
github.com/iivanoo
Alessio d'Arielli
Graphic Designer and Web developer
info@alessiodarielli.com
www.alessiodarielli.com
Upcoming SlideShare
Loading in...5
×

Time.zip - Developing an Android-iOS, smartphone-tablet app in one month

796

Published on

Slides of the talk I gave at the HTML5 Frontend Development @L'Aquila (Italy). 13th November 2013.

Abstract:
Last June a customer asked us to develop and publish a mobile application for both Android and iOS platforms which could run on both smartphones and tablets. Everything's fine you may say, there was only one small issue: we had only the equivalent of one month available to complete the project.
We accepted the challenge and decided to exploit web technologies and PhoneGap to build a mobile application with cross-platform, cross-device and high performance in mind right from the beginning.
To make the story short: we succeded!
This talk will take you through the process, decisions and technical solutions we took for achieving this strong result in such a short period of time.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
796
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Time.zip - Developing an Android-iOS, smartphone-tablet app in one month

  1. 1. Time.zip Developing an Android-iOS, smartphone-tablet app in one month Ivano Malavolta and Alessio d'Arielli
  2. 2. Ivano Malavolta Research fellow @University of L'Aquila Alessio d'Arielli Graphic Designer and Web developer
  3. 3. Roadmap App overview Organizational best practices Technical best practices
  4. 4. App Overview
  5. 5. The Customer Who is Frascati Scienza What kind of app they asked for
  6. 6. Stuff provided A Storyboard (with many revisions)
  7. 7. Stuff provided Photoshop Mockups (with many revisions too)
  8. 8. Stuff provided Anxiety (with many emails and phone calls)
  9. 9. Technical constraints Platforms to support: Android 4.x & iOS 6.x Devices: Smartphone & tablet Offline support QR code scanner Video streaming In-app browser News from RSS feeds
  10. 10. Timeline 2 people, ~4 hours a day Total working hours: ~320 (~1 month, 2 people full time)
  11. 11. The app More than 5000 participants to the event The treasure hunt carried on in the center of Rome It involved 1000 people, 150 participants
  12. 12. Organizational Best Practices
  13. 13. 1. Debug contract before the code Ask about the operational flow, the UI / UX, the intention of the app IMMEDIATELY. Write the whole thing in the contract. Why? If you rework parts already completed you are spending money from your own pocket
  14. 14. 2. Web-based feasibility If they ask to support multiple platforms, evaluate if webbased development (PhoneGap) is feasible Search and test any component for advanced features (in our case, QR-code scanning and child browser)
  15. 15. 3. Balance efforts Equally divide the workload, responsibilities and testing. Notify quickly to colleagues about bugs.
  16. 16. 4. Use code repositories Use repository for remote collaboration (SVN, git, etc.) rather than email or other methods that have no chance to undo.
  17. 17. 5. Avoid micro-multitasking Focus on and complete a task at time, otherwise probability of injecting bugs is terribly high. Optimize your schedules.
  18. 18. 6. Use MVC pattern By structuring the app with the MVC pattern, you can work in parallel on JS and frontend HTML5/CSS3
  19. 19. 7. Modularity Max simplification of navigation and extreme modularity so any changes to the content or presentation are quickly realizable without affecting the overall structure.
  20. 20. 8. Be reactive Maximise reactivity and cooperation with colleagues. Don't empower customer's anxiety responding immediately to every request
  21. 21. 9. Organize revisions with customers Keep the customer in the loop, arrange periodical meetings in order to update him and to collect a list of tasks or corrections to be made.
  22. 22. 10. Get all testing tools Book many hours for testing (and blasphemy), get as soon as you can as much devices as possible for testing.
  23. 23. Summary 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Debug contract before the code Web-based feasibility Balance efforts Use code repositories Avoid micro-multitasking Use MVC pattern Modularity Be reactive Organize revisions with customers Get all testing tools
  24. 24. Technical Best Practices
  25. 25. 1. First day: search and test already developed components
  26. 26. r qi ec ni ( e ur . of g{ p ts { ah: j ur :' . lb ju r/ q ey 19 1m n, / '. l bj ur /e t' * qe y ./ i/ q ey ju r- .. . i' * . /i /q ey z po , / u dr cr : '. lb ud r cr /n es oe m n, ne so e ./ i /n es oe ud r cr -i ' b cb n: " .l bb cb n /a ko e, ak oe . /i / ak oe bc bn " t x: '. l br qi et x -. .' et . /i /e u r/ et 10 6, a yc ' .l br q ie ay c, sn : . / i/ eu r/ s n' h nl br : '. lb hn l br /a de as , ad ea s ./ i /a de as hn l br ' t ml ts ' .t m lt s, ep ae : ./ ep ae ' l al t '. lb l al tl al t , ef e: . /i /e fe / ef e' d tm ng r 'a a aa e' aa aa e: d tm ng r , s i: '. l bs i/ pn pn . /i /p n si ' } , s i: { hm ' qe y: { ju r' e pr s '' xo t: $ } , ' ne so e:{ ud rc r' e pr s '' xo t: _ } , ' ak oe : { bc bn ' d p: [ ju r' ' ne so e] es ' qe y, u d rc r' , e pr s 'a k oe xo t: B cb n' } , ' ad ea s:{ hn lb r' e pr s 'a d ea s xo t: H nl br ' } , ' ef e' { la lt: e pr s '' xo t: L } } }; ) Once you are done, setup your boilerplate app
  27. 27. 2. Establish the software architecture from the beginning It will guide the structure of your code
  28. 28. v rE tV e =B cb n. i we tn ( a n e iw a k oe Ve .x e d{ m dl E t, oe : n e i ii lz : fn to ( { nt ai e uc i n ) t i. i l =t i. oe .e (t t l" ; hs tt e h sm d lg t" io o) } , v rE et Ve = Bc bn . iw et n( a v n oi w a ko eV e. x ed { m dl E et , oe : v n o /* */ i ii lz : fn to ( { nt ai e uc i n ) v r d t = n w D t ( h s m d l g t " i e t m " * 1 0) a ae e ae t i. oe .e (t m sa p) 00; v rg , m, aa ,h u s m n; a g m a a or , is g = dt .e D t( +"" g a eg ta e) /; m = dt .e M nh )+1+ "" m a eg to t ( /; a a =d t. e Fl Ya(; aa a e g t u l e r) h us = dt .e Hu s ) or ae g to r( ; m n =d t. e Mn ts) is ae gt iu e(; t i. i l = g +m + aa + "- " + h us +" "+ mn ; hs tt e g m aa or : is /* */ } , Define your own coding patterns* *more patterns will show up during the presentation
  29. 29. 3. Clearly separate concerns It makes the code more testable More easy to extend and refine the app It allowed us to follow a micro-process
  30. 30. from JS developer's perspective... I commit this after update I see this
  31. 31. Example (home view) d fn (. . "e tt ml t sf ac ts in a hm ", / dp ne c t tm lt f l e ie [ ., tx ! ep ae /r s ai ce z. tl ] * e ed ny o ep a e i e f nt o (, _ B c bn ,H nl b r, Et ,t ml t ){ / tm lt c na n as rn u ci n $ , ak oe ad ea s ne ep ae * ep ae o ti s ti vr Fa ct Si n ai w= Bc b n .i we t n( a r sa ic ez Ve a ko e V e. xe d{ md l Et , oe : ne ca sa e " ea l _r pe " ls N m: df ut wa p r, ee t: { vn s " o cs at #n i:" ni , tu ht r e t" e t" " o cs at #e et " "v n i, tu ht r _ vn i: e et " " o cs at #a te " "a t e" tu ht r p rn r: p rn r , " o cs at #r sa i:" ot na tu ht r f ac t" c n iu " } , tm lt :H nl b r .o p l( ep ae ,/ t ml t cm i ai n i i a fn ep a e ad ea s c mi et m lt ) * ep ae o pl to , t s u rn e: fn to ( { ed r u ci n ) / g si n nv br * * et oe a a / t i.p ae ab r ) hsud tN v a ( ; $ t i. l. tl ti . ep ae ti .o e .o SN )) / t ml t ee ui ( h se )h m(h st ml t(h sm dl tJ O () ; * e pa e xc t / * * / r t r t i; eu n hs } }; ) r tr F ac tS i na iw eu n rs ai ce zV e ; }; )
  32. 32. 4. Keep performance in mind from the beginning Avoid to fall into the fancy-framework trap Use pure JS as much as you can No JS animation, just switch classes + CSS3 transitions/transforms Use native touch events, not onClick (300ms delay) Minimize browser reflows Avoid complex CSS selectors Try to use id-only selectors ...
  33. 33. 5. Views first, then data v rA po tr =B c bn .o tr e tn ( a p R ue ak oe R ue .x ed { / * * / c ag Pg :f nt o (a e { h ne a e uc in p g) i ( hs cr et iw { f t i. ur n Ve) t i. ur n Ve.r ge ( rm vd) hs cr et iwt ig r" eo e"; t i. ur n Ve.e oe ) hs cr et iwr mv (; } t i. ur nV e =p g ; h s cr et iw ae t i. tu tr V e. ur nV e =p g; h s sr cu ei wc r et iw ae p g. ed r) a e rn e( ; t i. tu tr V e. e. id " cn et )a pn ( (a ee ); h s sr cu ei w$ l fn (# ot n" . pe d$ pg . l) t i. tu tr V e. rg e(u dt Tt e , pg ) h s sr cu ei wt i gr "p ae il " a e; t i. ur nV e .r ge (i T eo "; / hr t en wv e cn ft hd t h s cr et iwti g r" nh Dm ) / ee h e iw a e c aa r tr t u; eun re } / * * / Valid especially when data is coming from the network
  34. 34. 6. Let the user forget he is looking at a browser @ hr e "T -" c as t UF 8 ; / SA D R F RM B L * * T NA D O OI E / *{ / t as ae tl n sl c in * * r n pr n ik e et o / - ek tt ph g lg tc lr r b( ,,,) w b i- a- ih ih - oo : ga 0 00 0; } bd { oy - ek tt uh c lo t nn ;/ n cl o t d r n t p ad hl * w b i- oc -a lu : oe * o a lu s ui g a n od / - ek tt x- i ea js :n n ;/ n fn sa t if a in * w b i- et sz -d u t oe * o o t uo n lt o / - ek tu e- e et n n; / n c p ad ps e ec * w b i- sr sl c: o e * o oy n a t, t . / b cg on -t a he t fx d a k ru da tc mn : ie ; f n- ai y 'e vt c Nu -i h' ' ev tc N u' H le ia A il s n- ei ; o t fm l: H le ia ee L gt , H l ei ae e, e vt c, r a, a ss r f h i h : 1 0; e g t 0% m ri : 0x a g n p; p di g 0x a d n: p; w dh 1 0; it: 0% } # an ot ie {/ gt te wo e ds ly * m iC n an r * e h h l ip a / p st o:as l t; o i in b ou e h i h : 1 0; e g t 0% w dh 1 0; it: 0% m ri : 0x a g n p; p di g 0x a d n: p; l f: 0 et ; tp 0 o: ;
  35. 35. 7. Minimize network access / W lu c te Ap / e a nh h p r qi e[ ud rc r ' ' a ko e, 'p n , ' ot r, 'a a aa e' , e ur ('n es oe , bc bn ' s i' r ue ' d tm ng r ] f nt o (, Bc bn , Si nr A po tr D t) { u c in _ a ko e pn e , p Ru e , a a S rn .r t tp .n si h =f nt o (u fx { ti gp oo ye e dW t u ci n sf i ) r tr t i. n eO (u fx t i. eg h -s fi .e gh ! =- ; eu n hs id xf s fi , h s ln t u f xl nt ) = 1 } ; S rn .r t tp .t i =f nt o ( { ti gp oo ye s rp uc in ) r t r t i . e l c (( ( ^ ] ) ) i , " ) r p a e/ < [ > + > / g " ) eu n hs rp ae / <[ >+ >/ g " .e lc (( (^ ] )) i, " ; } ; d cm n. d Ee ti tn r"e ie ed " rn f le; ou et ad vn L se e(dv cr a y , u , a s) f nt o rn ){ uc in u ( D t. n ta ie ) aa ii il z (; / * * / } Try to prefetch data as much as possible If some data is always the same, bundle it into the app }; )
  36. 36. 8. Take special care of images Avoid to resize images (both via CSS and JS) Be robust w.r.t. 404 errors / i te tm lt * * n h e pa e / < m s c"{ im gn } "o er r"m Er rt i) " i g r={ ma i e } nr o=Ig ro ( hs ; > / i yu J * * n or S / f nt o Ig ro (o re { u ci n mE rr s uc ) ep yx pg =" V Ow Kg AA N UE gA AA AB A AA 1A CA A0 E VI 2g AA A AS V mt 1 1n iB R0 G oA AS hU AA E AA CQ AC H wA AC lQ Q1 N YA AM AD su c. r =" aa ia e pg bs 6, + ep yx p g or e sc d t :m g/ n; a e4 " m t1 1n ; su c. nr o ="; or e oe rr " rt r tu ; eu n re } Show a spinner in place of an image while it is loading . ev Ig { h ay m b cg o n: ul '. rs l ae .i ' n- ee t ak ru d r( . /e /o dr g f) or p a; b cg o n- oi in c ne ; ak ru dp st o: e t r m nh i h:2 % i- eg t 0 ; w dh 1 0; it: 0 % }
  37. 37. 9. When it's simple, leave it simple Don't overelaborate. Complexity will come by itself. g Bc :f nt o (e f { o ak uc in s l) v rt a =( efis a co S rc ue iw ? sl : ti ; a ht s l n tn ef t ut rV e ) ef hs i ( ta .u rn Ve ) { f ! ht cr e ti w r tr f le eu n a s; } i ( ht cr et iwi sa co I to ap Ve ) { f t a . ur n Ve n tn e f n rT p ai w r tr f le eu n a s; } i ( ht cr et iwi sa co D mn aa ca i w { f t a . ur n Ve n tn e f o ad C ci Ve ) r tr f le eu n a s; } i ( ht cr et iwi sa co R sl ao ac a iw { f t a . ur n Ve n tn e f i ut t Cc iV e) B cb n. i tr.a ia e "n rc ci " {r ge :tu }; ak oe hs oyn vg t(it oa c a , t ig r re ) r tr f le eu n a s; } i ( ht cr et iwi sa co F nC ci Ve ) { f t a . ur n Ve n tn e f i ea c ai w B cb n. i tr.a ia e "a ca ,{ rg e :t u} ; ak oe hs oyn vg t(cc i" ti gr r e ) r tr f le eu n a s; } w no .i tr . ak ) i d wh so yb c ( ; } ANTIPATTERN ABOVE
  38. 38. 10. Test, debug, test, debug In this context, your desktop browser is the killer app! Check console Breakpoints Update the DOM at run-time Access to all local DBs Network profiling CPU and memory profiling Monitor event listeners Monitor elements’ rendering time
  39. 39. Summary 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. First day: search and test already developed components Establish the software architecture from the beginning Clearly separate concerns Keep performance in mind from the beginning Views first, then data Let the user forget he is looking at a browser Minimize network access Take special care of images When it's simple, leave it simple Test, debug, test, debug
  40. 40. Conclusions We extracted a set of organizational and technical best practices from a true story In any case, step zero to success is to be technologically ready for example, many people tend to underestimate JavaScript, don't!
  41. 41. Bonus An RSS reader in 20 lines of pure JavaScript ;) d fn (" qe y," ne so e," ak oe ," oe s Rs] e ie [ ju r" u dr c r" b cb n" md l/ s", f nt o (, _ Bc bn ,R s { u c in $ , ak o e s) v rR si t =B cb n. o lc in et n( a sL s a k oe Cl et o. x ed { m dl R s oe : s, p pl t :f nt o (e dr ,v e ){ ou ae u c in f eU l iw v r xl tp =n w XL tp eu s( ; a mh t e MH tR q et ) v r sl = ti ; a ef hs x l tp or ay t tc ag = fn to ( { mh t. n ed sa eh ne uc i n ) i ( m ht.e dS ae = 4& x lt p sa u = 2 0 { f xl tpr ay tt = & mh t. tt s = 0) vr fe = xl tp r so sX L a ed m ht .e pn e M; vr nw = fe .e E ee tB Tg a e" tm ) a es e dg tl mn s ya Nm (i e" ; vr tt e ds rp i n l n ; a i l, e ci to , ik fr (a i = 0 i nw .e g h i + { o vr ; e sl nt ; +) tt e =n w[ ]g tl m ns ya Nm (t t e) 0. et o tn. il e si . eE ee tB T ga e" il "[ ] tx Cn et ds r pi n= nw [] g tl mn sy aN m (d sr pi n )0 . e ci to e si .e Ee e tB Tg ae "e c it o" [ ] ln = nw [] g tl mn sy a Nm (l n" [ ]t xC ne ts ik e si .e Ee e tB Tg ae "i k ) 0.e to t n . t i (i l & d s rp in & ln ){ f t te & ec it o & i k s l. ra e{ e fc et ( t te t te i l: i l, d sr pi n ds rp i n e ci t o: e ci to , l n: ln ik ik }; ) }
  42. 42. Ivano Malavolta Research fellow ivano.malavolta@univaq.it www.ivanomalavolta.com @IMalavolta github.com/iivanoo
  43. 43. Alessio d'Arielli Graphic Designer and Web developer info@alessiodarielli.com www.alessiodarielli.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×