Building Blocks of a Web Application

deliriousattackInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

65 εμφανίσεις

Building Blocks of a Web Application

JAM848

Justin Lee @triplez82

September 26
-
27, 2013

2


Architecture of a
Web App

Internet

CRUD

1. Request Website

2. Serve Website

3. POST data

4. Update page

Web Pages

Data Store

Thick Server / Thin Client

Architecture of a
Web App

4

Internet

CRUD

1. Open/Load Web App

2. Update Data

3. Return Data

4. Load Data in App

Data Store

Interface to Data

(JSON, XML, etc)

Local Data Store

CRUD

Data Server
/
Rich
Client

Web Apps
FTW!

Identifying the Building Blocks

5

What is in a Web App


UI / App Framework

Device / Platform Framework

Data Management Framework

Performance / Testing / Debugging / Analytics

UI / App
Frameworks

And Data Management Frameworks

7

UI / App
Frameworks


Complement or Enhance or Redefine


Widgets, Controls, Components, Gestures


Data
Templating

/
binding and Data model


Full Dynamic or Partial Dynamic
UI


Separation of
Concerns / Patterns and Practices

8

* Everything you need to build a Web

Application

UI /
App Framework


JQuery

(Mobile)


Sencha

Touch 2


Dojo Toolkit


Enyo

/ Onyx


Hammer.js


LungoJS


bbUI.js

(specifically for BlackBerry
)


etc. etc. etc. (Anyone else knows more?)

9

Templating

/ Patterns


Knockout


Angular.js


Handlebars.js


Agility


Backbone.js

10

Data Management Frameworks


Manage Data Models


JSON / XML Data Transport


REST Query interface to DB


Sync between local and server DB


11

* It is important to minimize the
data communication

between app and server

Data Management Frameworks


Breeze


Miso







*
Most app frameworks come with Data Management


12

Handling

t
ou
c
h

even
t
s

ha
mm
e
r.
j
s

5

H
a
mm
er.js

A

JavaSc
r
i
p
t

libr
a
ry

for

mult
i
-
t
ouc
h

ges
t
u
r
es


Ful
l

Bla
ck
Be
rry

1
0 s
uppo
rt


Supe
r

ligh
t
weigh
t

(
2
k
b)


Ea
sy

t
o

i
m
ple
m
ent


S
t
and
-
alone
,

o
r
jQ
ue
ry

plugi
n

http:/
/
e
i
ghtmed
i
a.g
i
thub.
c
om/hamme
r
.
j
s/

Ha
m
me
r
(
e
l
)
.o
n
(
"s
wi
p
el
e
f
t
",

f
u
n
ct
io
n
()

{ al
e
r
t
(
'
you

sw
ip
e
d
l
e
f
t
!
');

});

I
m
age

Sour
c
e:

© 2013,

J
orik

Tangelder,

http://eight
m
ed
i
a.g
i
th
u
b.i
o
/h
a
mm
e
r.j
s
/

T
ouc
h
w
he
re

eve
r

y
o
u

w
an
t
,

a
s

m
uc
h

a
s

y
o
u

w
an
t
!



Tap


Double Tap


Hold


Drag


Swipe


Transform (Pinch
)

H
a
mm
er.js

Image Source: © 2013, Jake Lauer,

http://
alltheragefaces.com
/face/surprised
-
reaction
-
guy

H
a
mm
er.js

S
t
an
d
-
a
l
on
e

li
b
r
a
ry

usage

va
r

ta
r
ge
t

=
d
ocumen
t
.ge
t
El
e
mentBy
I
d
(
'
s
om
e
Elemen
t
');

va
r

ha
m
mer
O
b
j

=

ne
w

H
amm
e
r(
t
arget
,

{
hold
_
tim
e
ou
t
:

1
//
s
ec
o
nds}
)
;


hammer
O
bj.
o
nd
r
a
g

=

f
u
nct
i
on
(
ev
)

{


$
('#
g
rum
p
yM
o
uth
').
a
ddC
l
as
s
('
mout
h
Ope
n
');
head
S
oun
d
.p
l
ay
();

}
;


hammer
O
bj.
o
nr
e
leas
e

=

fu
n
ct
i
on(
ev
)

{


$
('#
g
rum
p
yM
o
uth
').
r
emo
v
eC
l
ass
('
m
o
uth
O
pen
');

}
;

Drawing

graphs

and char
t
s

Flo
t
r
2
.
j
s

11

F
l
o
t
r
2
.js



C
hart
s

o
n

C
anvas

A

Ja
v
a
S
cr
i
pt
li
brary

for

dr
a
w
i
ng

H
TML5

charts

& graphics

h
tt
p
:
/
/
ww
w
.
hu
m
b
l
e
s
oft
w
a
r
e
.
c
o
m
/f
l
ot
r
2
/

I
m
age

Sour
c
e:

© 2013,

H
u
m
ble

Soft
w
are

D
e
v
elop
m
ent,

htt
p
://
www
.hu
m
ble
s
oft
w
are.
c
o
m
/flo
t
r2

F
l
o
t
r
2
.js



C
hart
s

o
n

C
anvas


Most straightforward charting/graphing library


Free and Open Source


Drawing is fast enough to be animated


F
l
o
t
r
2
.js

var
d1

= [[
0
,

3],
[
4, 8
]
, [8,
5
],

[
9
, 13]]
,

//

First

data

series

//

G
e
nera
t
e
for

(
i =
0
;

first

data

set

i

<
1
4; i

+= 0.5)

{

d2
.
push
(
[
i
, Ma
t
h.si
n
(i)]);

}



//

D
r
aw G
r
aph

para
m
s

= {

xaxis:

{ m
i
norTic
k
Freq:

4 },

grid :

{ m
i
norVer
t
ical
L
ines:
t
rue }

};



graph

= F
l
otr.dr
a
w(co
n
tainer,

[
d
1
,
d2
],

par
a
ms);

d2

= [],

//

Second

data

series

i
,

grap
h
,

para
m
s;

Templa
t
es

Made Ea
s
y

handleba
rs
.j
s

16

H
and
lebars.js

A JavaScript library for managing
templates



Cross browser support


Semantic templates


Great for localizing content


h
tt
p
://
hand
l
eba
rs
j
s
.
c
o
m/

I
m
age

Sour
c
e:

© 2013,

Yehuda

Kat
z
,

htt
p
://hand
l
eb
a
r
s
j
s
.
c
o
m
/

H
and
lebars.js


Handlebars templates look like regular
HTML


But
they have embedded {{ handlebars expressions }}


<script

id=
"
sample
-
temp
l
ate"

t
y
pe="
t
ext/x
-
h
andl
e
bars
-
t
e
mpla
t
e"
>

<div

cla
s
s="sam
p
le">

<
h1>
{
{
title}
}
</h1>

<
div
c
lass="
b
ody">

{{
b
ody}}

<
/div>

</d
i
v>



</scri
p
t>

H
and
lebars.js

//Compile the template:

var source

= $("#sample
-
template").html();
var template = Handlebars.compile(source);

//

Evaluate

var

context

var

html

the template

= {title: "My New Post", body:

= template(context);

"This

is my first

post!"}

<div class="sample">

<h1>
{{title}}
</h1>

<div class="body">

{{body}}

</div>

</div>

<div class="sample">

<h1>
My New Post
</h1>

<div class="body">

This is my first post!

</div>

</div>

MVC Pattern

21

ba
ck
bone
.j
s

B
ackbone.js

A Model
-
View
-
Controller (MVC) JavaScript
library


Encourages code re
-
use



Flexible
routing
system


Single
-
page HTML5 Apps remain state
-
aware


Maintains
state history (back, forward, bookmark, etc.
)



M
anage

upda
t
es

t
o
U
I

w
hen

da
t
a

c
hanges



h
tt
p
:
/
/
b
a
ck
bo
n
e
j
s
.o
rg

//
V
i
ew
=

v
i
s
ual

r
ep
r
e
s
entat
i
on

of

the

model


//1.

Update

ent
i
r
e
v
i
ew
w
hen

any

pa
r
t

of

the data

c
hanges






//2.

(
bette
r
)

Update

on
l
y

UI that

needs

to

be updated



Model.
b
ind
(
"c
h
ange"
,

upd
a
te
V
iew
,

t
h
is);

Model.
b
ind
(
"c
h
ange:c
u
rre
n
t
",

updat
e
Wea
t
he
r
V
,
thi
s
);
Model.
b
ind
(
"c
h
ange:w
e
ek
",

u
p
dateWe
e
kV
,

th
i
s);

B
ackbone.js

//Model

curren
t

{


hig
h
:

"
1
4",


low
:

"5
"
,


con
d
iti
o
ns
:
"
sunn
y


}
,


week
:

{


Mon
d
ay
:

{


h
igh
:

"
1
2",

l
ow
:

"4
"
,

c
ond
i
ti
o
ns
: "
c
l
oud
y"


}


Tue
s
day
:

{
}




}


B
ackbone.js

Web Apps that use
Backbone.js

heavily
today



USA Today (http://
usatoday.com
)


Rdio

(http://
rdio.com
/new)


Foursquare (http://
foursquare.com
)


Soundcloud

mobile (http://
m.soundcloud.com
)


Trello

(http://
trello.com
)


Pandora (http://
www.pandora.com
/
newpandora
)


Group Now! (http://
www.groupon.com
/now)


CloudApp

(http://
getcloudapp.com
/)


Device / Platform Frameworks

To squeeze every last ounce of usage out of
the device

32

Device / Platform Frameworks


Access platform specific UI controls


Access device specific hardware


Integrate and Invoke native apps / services


Hardware Acceleration


33

Device / Platform Frameworks


Cordova /
PhoneGap


WebWorks

(BlackBerry)


bbUI.js


34

Performance / Testing / Debugging /
Analytics

Now, let’s make it fast, and find out more
about our app!

35

Performance / Testing / Debugging /
Analytics


No more alert(“Crash”); Do
console.debug
();


Breakpoints and step through JavaScript


Fix UI (HTML/CSS) glitches on the spot


Network audits and Performance Profiling


Automated / Unit / BDD Testing

36

* Automated / Unit / BDD testing is slowly improving for the web

require.js

Performance

25

R
equ
ire.js

-

h
tt
p
://
requ
i
re
j
s
.
o
r
g


A

J
a
v
aS
cr
ip
t

f
il
e

an
d m
odul
e

loader




On
-
de
m
a
n
d

re
s
our
c
e

l
oad
i
ng






I
m
p
r
o
ve

t
h
e

s
pee
d

an
d

quali
t
y

o
f y
ou
r

c
ode




S
epara
t
e

y
our

J
a
v
a
S
c
r
i
pt

c
ode

i
n
t
o
m
odu
l
es



F
il
es are

l
oaded

only

w
hen

needed






U
se
R
.j
s

op
t
i
m
i
z
e
r

t
o

r
edu
ce

bandwid
t
h




C
o
m
b
i
nes

re
s
our
c
e

fil
es

i
n
t
o a

mi
n
ifi
ed
J
a
v
a
S
c
r
i
pt

d
i
s
t
r
i
bu
t
ab
l
e

U
si
n
g

R
equ
ire.js

//Defi
n
e

a
n

u
n
name
d

m
odu
l
e
define
(
fun
c
ti
o
n(){

vi
e
w
1

=

f
u
nction
(
){
co
n
so
l
e.log(
"
hel
l
o

}

});

i
n

fil
e

mai
n
.js

w
orld
"
);

//Incl
u
d
e

m
od
u
l
e

whe
n

it

s
define
([

'j
q
uer
y
',
'm
o
dul
e
s/
v
iew1/m
a
in'

]
,

fun
c
ti
o
n(){

n
eede
d

a
nd

c
re
a
te

a
n

i
nst
a
nc
e
:

//rela
t
iv
e

pa
t
h

(wit
h
ou
t

.j
s
)

t
o

t
h
e

a
b
ov
e

module

//crea
t
e

a
n

i
n
stanc
e

o
f

t
h
e

module

va
r

vi
e
w

=

ne
w

view1
(
)
;

/
/
"
hell
o

wor
l
d
"

});

});

R
esourc
e

Load
i
n
g

B
ench
m
ark

R
e
m
o
t
e

W
eb

I
n
s
pe
c
t
or

ne
t
w
or
k
i
ng

panel


Re
s
pon
s
i
ve

loading






Fa
st
pag
e

t
r
an
s
i
t
ions






h
ttp:/
/
bi
t.
l
y
/
14u
W
7nX






U
S
A

T
o
d
a
y

D
e
m
o

Testing / Debugging

Remote Web Inspector

42

Testing / Debugging


QUnit


Adobe Edge Inspect


Remote Web Inspector (BlackBerry
)


43

Bringing everything together

Demo

44

Considerations

Tips and considerations when developing a
Web App

66

Considerations for Mobile Apps


Minimize data
transfers


Maintaining app
responsiveness


Fail gracefully when offline / no
network


Web App resides on mobile device, no
SEO required but
Analytics


Isolate device / platform specific
features


Standards, Standards,
Standards


CSS3 to invoke hardware
acceleration


Think about performance from the start, but do not
optimize prematurely

For More Information…


Sessions
:


JAM843


Pratik on Gaming (HTML5)



Resources:


BlackBerry 10 community frameworks:
http://
bit.ly
/
VMvMhd


https
://
github.com
/blackberry


68

THANK YOU

JAM848

Justin Lee @triplez82

September 26
-
27, 2013