These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"

1. Yakov Fain, Farata Systems
7 Versions of One
Web Application

2. www.faratasystems.com

3. We’ll
Review
7
Versions
of
the
UI
of
this
Single
Page
Applica?on
SPA:
One
Web
page,
AJAX
calls
bring
the
data
as
needed,
CSS
hides/shows
HTML
elements

4. …
and
the
7
versions
are…
1. HTML/AJAX
2. HTML
+
Responsive
Web
Design
3. With
jQuery
library
4. With
Ext
JS
framework
5. Modularizing
HTML5
6. With
jQuery
Mobile
7. With
Sencha
Touch

5. Wireframing
with
Balsamiq
Mockups

6. V1:
HTML,
JS,
CSS,
AJAX,
JSON
//
Loading
data
with
AJAX
and
parsing
JSON
func9on
loadData(dataUrl)
{
var
xhr
=
new
XMLH+pRequest();
xhr.open('GET',
dataUrl,
true);
xhr.onreadystatechange
=
func9on()
{
if
(xhr.readyState
==
4)
{
if
(xhr.status
==
200)
{
var
jsonData
=
xhr.responseText;
//parse
json
data
var
campaignsData
=
JSON.parse(jsonData).campaigns;
showCampaignsInfo(campaignsData);
}
else
{
console.log(xhr.statusText);
}
}
}
xhr.send(null);
}

7. Demo:
Debugging
in
Chrome

8. Oops…A
Smaller
Screen

9. V2:
Responsive
Web
Design(RWD)
• Should
we
create
separate
versions
for
desktop
and
mobile?
• How
many
versions
of
the
UI
to
create?
• Can
we
have
a
single
HTML
version
for
all
devices?
• CSS
Media
Queries
–
layouts
based
on
screen
width
• Seing
CSS
Breakpoints
• Pros
and
Cons
of
RWD

10. Remember
the
wireframe
for
desktops?

11. Wireframing
for
a
table
in
portrait

12. Wireframing
for
large
phones

13. Wireframing
for
smaller
phones
These
are
the
wireframes
for
3
phone
screens

14. V2:
Demo
1. Basic
Media
Queries
2. Responsive
Header
3. Responsive
Dona?on
4. Responsive
Final

15. RWD
Pros
and
Cons
• RWD
is
good
for
publishing
info.
Mobile
frameworks
can
be
a
beker
choice
for
interac?ve
apps
• RWD
allows
to
have
a
single
app
code
base
• Mobile
versions
of
an
app
may
need
limited
func?onality
and
specific
naviga?on
• RWD
means
larger
traffic
(heavy
CSS)
–
no
good
for
slower
connec?ons
• Mobile
frameworks
offer
more
na?ve
look
and
feel
of
the
UI
Libraries
of
responsive
UI
components:
Bootstrap:
hkp://getbootstrap.com
Seman?c
UI:
hkp://seman?c-­‐ui.com

16. V3:
With
jQuery
Library
• Learning
jQuery
is
easy
for
designers
–
mostly
HTML.
• 40
–
50%
of
top
Web
sites
use
jQuery
(see
bultwith.com)
• It’s
a
light-­‐weight
addi?on
to
your
app
–
33Kb
gzipped,
minified
• Shorter
than
in
JS
syntax
for
DOM
Browsing
• $()
–
pass
it
a
String,
pass
it
a
func?on
• There
are
thousands
plugins
in
jQuery
Plugin
Registry

17. DOM
Querying
&
Func?on
Chaining

18. An
AJAX
call
in
jQuery
The
shortcut
methods:
$.get(),
$.post(),
$.getJSON()

19. V3:
Demo
with
jQuery

20. V4:
With
Sencha
Ext
JS
Framework
• Ext
JS
has
rich
library
of
enterprise-­‐grade
components,
e.g.
grids,
charts
• Cool
code
generator
Sencha
CMD
• Promotes
MVC
architecture
• Some
code
reuse
for
mobile
app
with
Sencha
Touch
• The
“weight”
of
the
app
substan?ally
increases
• If
you
decided
to
go
with
Ext
JS,
there
is
no
easy
way
out
• Doesn’t
support
Responsive
Web
Design
• Has
steep
learning
curve
–
has
no
HTML,
but
new
JS-­‐based
syntax

21. Ext
JS:
index.html
and
app.js

22. Ext
JS:
index.html
and
app.js

23. Ext
JS
MVC

24. Genera?ng
a
project
with
Sencha
CMD
sencha
-­‐sdk
/Library/ext-­‐4.2
generate
app
HelloWorld
/Users/yfain11/hello

25. The
View
Fragment:
DonateForm.js

26. V4:
Demo
with
Ext
JS

27. V5:
Modularizing
UI
• Large
apps
should
be
modularized
to
avoid
loading
all
code
at
once.
• Mul?ple
<script> tags
may
depend
on
each
other
and
have
to
be
loaded
in
certain
order.
• Need
to
be
able
to
specify
dependencies
between
the
modules.
Need
to
avoid
pollu?ng
global
scope
and
name
conflicts.
Manually
wri?ng
Modules
doesn’t
solve
these
issues.
• Today:
CommonJS
and
Async
Module
Defini?on
(AMD)
specs
• Tomorrow:
ECMAScript
6
spec
(a.k.a.
Harmony)
defines
modules.

28. One
way
of
implemen?ng
Module
Pakern
Passing
inside
the
module
a
reference
to
the
global
window
object

29. CommonJS
is
an
effort
to
standardize
JS
APIs.
CommonJS
Modules
defines
3
variables
for
modules:
-­‐
requires
-­‐
exports
-­‐
module
Node.js
framework
implements
CommonJS
Modules
spec
and
provides
these
global
variables.

30. Code
Sample
With
CommonJS

31. CommonJS
Pros
and
Cons
Pros:
• Simple
API
Cons:
• Mainly
for
the
server-­‐side
JavaScript.
Web
browsers
don’t
have
require,
export,
and
module
variables.
• The
require
method
is
synchronous.
• CommonJS
API
is
suitable
for
loading
JS
files,
but
can’t
load
CSS
and
HTML.

32. Asynchronous
Module
Defini?on
(AMD)
AMD
is
a
proposal
for
async
loading
of
both
the
module
and
its
dependencies
in
Web
browsers.
You
provide
define
and
require
func?ons:
define(!
module_id, // optional!
[dependencies],!
function (){!
// This function runs once when the module and its dependencies are loaded!
}!
);!
!
!
require(["main"], function() {!
console.log(”The module main is loaded");!
});!
!
!
!
!
The
func?on
define
defines
the
module
and
returns
it
once
it’s
needed.
The
require
executes
the
given
func?on
checking
that
the
dependencies
were
loaded.

33. Save
The
Child
Modularized
With
RequireJS
Lis?ng
modules
in
config.js

34. V5
Demo:
With
RequireJS

35. main.js
(fragment)

36. “Way
To
Give”
Module
Defini?on

37. V6:
With
jQuery
Mobile
• Easy
to
learn.
Built
on
top
of
jQuery
Core
library
• HTML5
allows
crea?ng
custom
non-­‐visible
akributes.
They
have
to
start
with
data-:
<div data-role="page" id="Stats">
• The
UI
shows
one
page
at
a
?me
• Light-­‐weight
(90Kb
gZipped)

38. Mul?-­‐Page
Template
<body>
<!-- Page 1 -->
<div data-role="page"
id="Donate” >
...
</div>
<!-- Page 2 -->
<div data-role="page"
id="Stats” >
...
</div>
</body>
The
content
of
mul?ple
pages
is
located
in
one
file.
When
the
app
starts,
only
the
first
page
is
displayed

39. Mul?-­‐Page
Template
(cont.)
<body>
<!-- Page 1 -->
<div data-role="page" id="Donate">
<div data-role="header" >...</div>
<div data-role="content" >...</div>
<div data-role="footer" >...</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="Stats">
...
</div>
</body>

40. Naviga?on
Bar
<div data-role="navbar">
<ul>
<li>
<a href="#Who-We-Are">Who We Are</a>
</li>
<li>
<a href="#What-We-Do">What We Do</a>
</li>
<li>
<a href="#Where-We-Work">Where We Work</a>
</li>
<li>
<a href="#Way-To-Give">Way To Give</a>
</li>
</ul>
</div>

41. Ripple
Emulator

42. The
Back
Bukon
<div data-role="page" id="Stats" data-add-back-btn="true">
<div data-role="header" >
<h1>Statistics</h1>
</div>
Statistics will go here
</div>

43. Single-­‐Page
Template
An
HTML
file
contains
the
content
of
a
single
page.
<div data-role="navbar">
<ul>
<li>
<a href="page-1.html"
data-transition="slideup">Page #1</a>
</li>
<li>
<a href="#" class="ui-state-persist">Page #2</a>
</li>
<li>
<a href="page-3.html"
data-transition="slideup">Page #3</a>
</li>
<li>
<a href="page-4.html"
data-transition="slideup">Page #4</a>
</li>
</ul>
</div>

44. V6:
Demo
With
jQuery
Mobile

45. V7:
With
Sencha
Touch
• Sencha
Touch
is
a
smaller
brother
of
Ext
JS
• It
comes
with
mobile
versions
of
lists,
forms,
toolbars,
bukons,
charts,
audio,
video,
carousel
etc.
• Jumpstart
development
with
genera?ng
the
app
with
Sencha
CMD.
• Package
the
Sencha
Touch
app
as
na?ve

46. The
app.JS
Ext.applica?on({
name:
'SSC',
requires:
[
'Ext.MessageBox'
],
views:
[
'About',
'CampaignsMap',
'DonateForm',
'DonorsChart',
'LoginForm',
'LoginToolbar',
'Main',
'Media',
'Share',
'ShareTile'
],
stores:
[
'Campaigns',
'Countries',
'Donors',
'States',
'Videos'
],x
controllers:
[
'Login'
],
launch:
func?on()
{
//
Destroy
the
#appLoadingIndicator
element
Ext.fly('appLoadingIndicator').destroy();
//
Ini?alize
the
main
view
Ext.Viewport.add(Ext.create('SSC.view.Main'));
},
onUpdated:
func?on()
{
Ext.Msg.confirm(
"Applica?on
Update",
"This
applica?on
has
just
successfully
been
updated
to
the
latest
version.
Reload
now?",
func?on(bukonId)
{
if
(bukonId
===
'yes')
{
window.loca?on.reload();
}
}
);
}
});

47. The
Landing
Page

48. Login
Controller

49. Donors
Store

50. jQuery
Mobile
or
Sencha
Touch?
Use
jQuery
Mobile
if:
• You
are
afraid
of
being
locked
up
with
any
one
vendor.
• You
need
your
applica?on
to
work
on
most
of
the
mobile
pla€orms.
• You
prefer
declara?ve
UI
and
hate
debugging
JavaScript.

51. jQuery
Mobile
or
Sencha
Touch?
Use
Sencha
Touch
if:
• You
like
to
have
a
rich
library
of
pre-­‐created
UI
• Your
applica?on
needs
smooth
anima?on
• You
are
into
MVC
• You
want
to
package
your
applica?on
as
a
na?ve
one
• You
want
your
applica?on
to
look
as
close
to
the
na?ve
ones
as
possible

52. V7:
Demo
With
Sencha
Touch

53. Where
to
go
next?
Google
Dart
Language:
hkps://www.dartlang.org
Google
Angular
Dart
Framework:
hkps://github.com/angular/angular.dart

54. Links
• 7
versions
of
the
Save
The
Child
app:
hkp://savesickchild.org
• Enterprise
Web
Dev
book:
hkp://oreil.ly/1hxK5hl
• My
employer:
hkp://faratasystems.com
• My
Twiker:
@yfain