2. Outline
• Front
End
Development
Challenges
• JavaScript
Frameworks
• New
Languages
2
3. Frond
End
Development
Challenges
• JavaScript,
DOM
and
BOM
NaFve
API
• Web
App
Infrastructure
• Rich
ApplicaFon
Architecture
• UI
InteracFon
• Development
Toolchain
3
5. NaFve
API
Problems
(2/2)
• Early
Frameworks
(e.g.
jQuery)
all
focus
on
fixing
these
issues.
– DOM
tree
query
and
manipulaFon
– DOM
event
handling
– Ajax
• Simplify
XMLH[pRequest
API
• Enhance
it’s
semanFc
(Deferred
&
Promises)
– JavaScript
Language
Enhancements
• UFlity
Libraries.
e.g.
underscore.Js,
Lo-‐Dash
• HTML
5,
ECMAScript
5,
ECMAScript
Harmony
and
CSS3
– New
APIs
are
eliminaFng
the
necessity
of
these
frameworks,
e.g.
document.querySelector,
CSS3
animaFons
5
7. Web
App
Infrastructure
(2/4)
• Object-‐Oriented
Programming
– JavaScript
is
a
prototype-‐based
language
• simulate
many
class-‐based
features
– Frameworks
• YUI
extend
• MooTools
Class
• Dojo
• Prototype
• Backbone.Model.extend
• etc.
– Reference
• Douglas
Crockford
–
Classical
Inheritance
in
JavaScript
• John
Resig
–
Simple
JavaScript
Inheritance
• Nicholas
Zakas
–
Does
JavaScript
need
classes?
7
8. Web
App
Infrastructure
(3/4)
• Customized
Event
System
– Event
Driven
Architecture
– Design
Pa[erns
• Pub-‐Sub
• Observer
• Mediator
– Example
• Dojo
Pub-‐Sub
• Jquery
trigger
/
on
8
9. Web
App
Infrastructure
(4/4)
• Widget
– Widget
DefiniFon
– Inter-‐widget
CommunicaFon
• e.g.
Tuplespace
for
inter-‐widget
communicaFon
– Sheng
Tian
– Example
• Dojo
gadget
• jQuery
UI
widget
9
10. Rich
ApplicaFon
Architecture
(1/2)
• SeparaFon
of
UI,
Business
Logic,
and
Data
ManipulaFon
– MV*
Pa[erns
• MVC
Design
Pa[ern
• MVP
(Model-‐View-‐Presenter)
• MVVM
(Model-‐View-‐ViewModel)
• Reference
– Addy
Osmani
-‐
Journey
Through
The
JavaScript
MVC
Jungle
10
11. Rich
ApplicaFon
Architecture
(2/2)
• Data
Binding
– Bind
the
data
with
UI
• Data
SynchronizaFon
– e.g.
Backbone.Model.sync
• Template
Rendering
– Mustache
– Underscore
Template
– Dojo
Django
Template
• Router,
History
Management
– Single
Page
ApplicaFon,
e.g.
YouPost
• Backward
/
Forward
Bu[on,
e.g.
Backbone.Route
/
Backbone.History
11
12. UI
InteracFon
• Effects
and
AnimaFons
– e.g.
jQuery
effects
– CSS3
animaFons
• UI
Widgets
– e.g.
YUI,
Dojo,
ExtJs,
jQueryUI
• Drawing
– HTML5
Canvas
2D,
Canvas
WebGL
3D
– SVG
/
VML,
e.g.
Raphael,
D3.js
12
13. Development
Toolchain
(1/3)
• JavaScript
Build
and
OpFmizer
– Google
Closure
Library
– RequireJS
– Dojo,
YUI,
etc.
• Task
Manager
– Grunt.js
– Jake
13
15. Development
Toolchain
(3/3)
• JavaScript
Unit
Test
Tools
– QUnit
–
An
easy-‐to-‐use
JS
unit
tesFng
framework
– Jasmine
–
A
behavior-‐driven
development
framework
– Mocha
–
A
feature-‐rich
JS
test
framwork
running
on
node
and
the
browser
• Browser
AutomaFon
Test
– Selenium
IDE
&
WebDriver
– Dojo
ObjecFve
Harness
(DOH)
15
16. JavaScript
Frameworks
Summary
(1/3)
• API
Wrappers
Frameworks
– Example
• jQuery
• MooTools
– Pros
• Lighweight
• Easy
to
use
– Cos
• Have
to
spend
too
much
Fme
on
choosing
other
frameworks
• May
cause
bad
code
quality
16
17. JavaScript
Frameworks
Summary
(2/3)
• Full-‐Featured
Frameworks
– Examples
• Dojo
• YUI
• ExtJs
• Google
Closure
Library
– Pros
• Good
code
quality
• Well-‐documented
• All
covered,
usually
no
third
party
libraries
required
– Cons
• Heavyweight
• Steep
Learning
Curve
17
18. JavaScript
Frameworks
Summary
(3/3)
• Single
Page
ApplicaFon
– Example
• MVC:
Ember.js,
AngularJS
• MVP:
Backbone.js
• MVVM:
Knockout.js
• Event
Driven:
Twi[er
Flight
– Pros
• Less
server
requests
• Be[er
UI
experience
• Specially
suit
for
rich
/
complex
client
applicaFon
– Problems
• Architecture
style
– MVC,
MVP
or
MVVM
• Intrusive
and
exclusive
Frameworks
– Intrusive
and
exclusive:
Ember.js
and
AngularJS,
Twi[er
Flight
– Non-‐intrusive:
Backbone.js
and
Knockout.js
• View
– String
based
template
(Ember.js,
Backbone.js)
– DOM
enhancement
(AngularJS,
Knockout.js)
18
19. New
Languages
• TypeScript,
by
Microsoq
• CoffeeScript
• ClosureScript
• Dart,
by
Google
19
20. TypeScript
• A
Typed
Superset
of
JavaScript
that
compiles
to
plain
JavaScript
• Superset
of
ECMAScript
6
• Created
by
Anders
Hejlsberg,
father
of
Pascal
and
C#
20
TypeScript
JavaScript
21. CoffeeScript
• A
li[le
language
that
compiles
into
JavaScript
• An
a[empt
to
expose
the
good
parts
of
JavaScript
in
a
simple
way
• GitHub
languages
ranking
10
and
sFll
raising
• Simple
Syntax
(Combine
of
Python
and
Ruby)
• Fully
object-‐oriented
• Always
follows
the
best
pracFce
of
JavaScript
– e.g.
No
global
variables,
no
‘with’
keyword
• Editor:
Sublime
Text
• Debug:
Firebug
+
Source
map
21
CoffeeScript
JavaScript
23. Dart
• Dart
is
a
new
language
but
looks
similar
to
JavaScript
• It’s
targeFng
for
applicaFon
development
• Language
Features
– Classes
– OpFonal
types
– Lexical
scoping
– Libraries
– Isolates
• All
dart
code
runs
inside
of
isolates.
Each
isolate
has
its
own
memory
heap.
– Toolability
23
24. Trend
• Web
Apps
are
becoming
more
dynamic,
be[er
user
experience
• Logic
are
moving
from
server
side
to
client
side
• noBackend
in
Front-‐Trends
2013
– noBackend
is
an
approache
to
decouple
apps
from
backends,
by
abstracFng
backend
tasks
with
frontend
code.
This
allows
frontend
developers
to
focus
on
user
experience
and
gives
backend
developers
more
flexibility
on
the
implementaFon
side.
24
