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

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

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

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

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

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

Recommended

Recommended

More Related Content

More from Ivano Malavolta

More from Ivano Malavolta (20)

Recently uploaded

Recently uploaded (20)

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