This is the first 2 parts of a series of presentations demonstrating the usage of Backbone and Backbone.Marionette towards building "large scale" JS apps. Presented on 02/02/2013 for #GreeceJS.
BackboneJS • Created by Jeremy Ashkenas • Originally extracted from a Rails app • Most popular member of the larger family of MV(C) Javascript Frameworks • Large ecosystem of extensions and plugins • Not AMD compatible itself but there are AMD compatible forks Created
By
BackboneJS Classic
JS
development
relied
on
DOM
manipulaDon
…well
and
a
bunch
of
plugins
• No real structure in place • Domain objects or business logic state in the DOM • Globals to share state • Deep nested piles of jQuery callbacks Created
for
Help you get your truth out of the DOM!
BackboneJS Defined
As
“Backbone.js
is
a
lightweight
JavaScript
framework
for
adding
structure
to
your
client-‐ side
code.”
Addy
Osmani
“Backbone
is
a
JavaScript
library
with
a
RESTful
JSON
interface,
and
is
based
on
the
model– view–presenter
(MVP)
applicaDon
design
paradigm.”
Wikipedia
“Backbone
is
a
library
that
provides
a
set
of
structures
to
help
you
organize
your
JavaScript
code”
Thoughtbot
Backbone.js
gives
“structure
to
web
applicaDons
by
providing
models
with
key-‐value
binding
and
custom
events,
collecDons
with
a
rich
API
of
enumerable
funcDons,views
with
declaraDve
event
handling,
and
connects
it
all
to
your
exisDng
API
over
a
RESTful
JSON
interface”
Jeremy
Ashkenas
Models that
wrap
JSON
data
• Hold
business
logic
• Sync
Layer
(CRUD
via
Ajax)
• Inheritance
via
prototype
chaining
About
the
word
Model
now...
• No
schema!
• No
built-‐in
relaDonal
associaDons.
• No
built-‐in
traversing
of
nested
properDes
support.
Views • A
view
renders
the
display
of
a
logical
element
on
the
page
• Defines
the
logic*
for
how
a
model
should
be
presented
to
the
user
OpDons
directly
a/ached
to
the
view
• model
• collecDon
• el
• id
• className
• tagName
• a/ributes
Views el
can:
• Be
already
aRached
to
the
DOM
upon
creaDon
of
the
view
instance
• ARached
manually
later
• $el
=
$(el)
• el
isn’t
on
the
page
unDl
placed
there
by
you.
Views • DeclaraDvely
a/ach
DOM
event
listeners
to
el
or
its
contents
Under
the
hood:
• jQuery's
on
/
delegate
is
used
to
provide
instant
support
for
event
delegaDon.
• this
inside
all
DOM
event
handlers
always
refers
to
the
view
instance!
• Manually
a/ach
all
other
listeners
as
event
listeners
"
":
""
Routers • Can
have
>
1
Routers
• URL
=>
1
route
triggered
across
Routers
• Backbone.history.start();
• PushState,
hashChange,
polling
• PushState
=
URLs
should
be
bookmarkable
(no
404!)
=
Backbone.history
Handlers
Parameter,
splat
&
opDonal
parts
Create
routes
manually
with
#route(route,
name,
[callback])
Routers • No
page
state
support
out
of
the
box
• but
you
can
roll
out
your
own
1st
class
route
=>
components
state
mapper.
• or
use
a
subrouDng
extension
• or
override
so
that
1
route
triggered
per
Router
/dashboard/todos/2/news/5
and
Page
State
MVC • Model2
• Servlets
(Dispatcher
Servlet)
• Struts,
Spring
MVC,
RAILS
As
we
know
it
on
the
WEB
Request
Front
Controller
Controller
View
Model
Response
DB
MVC • Before
MVC
=
void?
• Smalltalk
• N
widgets
=
N
controllers
• Domain
vs
PresentaDon
objects
• Observer
pa/ern
origin
• TradiDonal
=
Event
Based
Back
in
the
late
70s
View
Controller
Model
Updated
through
observaDon
Backbone MVC • Could
be
actual
MVC
• Model
fits
model
• View
subscribes
to
Model
• …BUT
• View
handles
events
• View
handles
templaDng
• Controller
split
between
Router
&
View
• What
about
MVP?
• Model
fits
model
• Backbone.View
?=
Presenter
• Template
=
View
• …BUT
Using Backbone and
going
large
scale
Façade
/
Sandbox
Mediator
Module
Module
Module
Module
Submodule
Submodule
Publish
noDficaDon
Publish
noDficaDon
Start
module
Publish
noDficaDon
broadcast
call
method
• AbstracDon
of
the
core
• Consistent
Interface
• Sole
Survivor
for
modules
• Security
Guard
• Exposes
event
bus
• Core
• Event
Bus
• Independent
• Can
depend
on
DOM
• Do
not
access
DOM
outside
their
boxes
• Do
not
create
globals
• Do
not
tell,
but
ask
the
facade
Mail
Chat
Contacts
News
Addy
Osmani
Nicholas
Zakas
pavlakis
javiergs
chalasr
kin29
mitchan
chatii
mrstsgk
niftycorp
codehex
mackee
coa00
yuhei_fujita
manfredsteyer
wjessup
thekraken
destraynor
garrettdimon
eileencodes
lara
carmenintech
danielanewman
jlugia
malarkey
zenorocha
bluesmoon