Time.zip - Developing an Android-iOS, smartphone-tablet app in one month
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 907 views

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

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.

Statistics

Views

Total Views
907
Views on SlideShare
907
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 scanner Video streaming In-app browser News from RSS feeds
  • 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 people, 150 participants
  • Organizational Best Practices
  • 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
  • 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)
  • 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 have no chance to undo.
  • 5. Avoid micro-multitasking Focus on and complete a task at time, otherwise probability of injecting bugs is terribly high. Optimize your schedules.
  • 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 quickly realizable without affecting the overall structure.
  • 8. Be reactive Maximise reactivity and cooperation with colleagues. Don't empower customer's anxiety responding immediately to every request
  • 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.
  • 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.
  • 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
  • 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' * . /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
  • 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 =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
  • 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
  • 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 ] * 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 ; }; )
  • 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 ...
  • 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
  • 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: ;
  • 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 }; )
  • 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 % }
  • 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
  • 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
  • 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
  • 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!
  • 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 }; ) }
  • 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