Isomorphic
Javascript
in
the
real
world
Cause
symmetry
is
cool
Slide 2
Slide 2 text
Agenda
An
implementa6on
that
worked
Why
is
it
useful
What
is
“isomorhpism”
Slide 3
Slide 3 text
“In
mathema6cs,
an
isomorphism
(from
the
Ancient
Greek:
ἴσος
isos
"equal",
and
μορφή
morphe
"shape")
is
a
homomorphism
that
admits
an
inverse.”
Isomorphic
defini6on
Slide 4
Slide 4 text
“In
mathema6cs,
an
isomorphism
(from
the
Ancient
Greek:
ἴσος
isos
"equal",
and
μορφή
morphe
"shape")
is
a
homomorphism
that
admits
an
inverse.”
Isomorphic
what?
Slide 5
Slide 5 text
An
example
CAR
proper6es!
I
need
an
engine
I
need
a
steering
wheel
I
want
to
go
to
holiday!
Slide 6
Slide 6 text
This
object
sa6sfy
my
proper6es
Slide 7
Slide 7 text
This
object
sa6sfy
my
proper6es
too!
Slide 8
Slide 8 text
river
context
An
isomorphic
car!
road
context
Proper6es
always
sa6sfied!
Slide 9
Slide 9 text
Equal
Shape
Equal
Behavior
Slide 10
Slide 10 text
Do
we
need
this?
Slide 11
Slide 11 text
Yes
we
do
Slide 12
Slide 12 text
I
want
to
build
some
isomorphic
stuff
New
front
end
architecture
Single
Page
Applica6on
Slide 13
Slide 13 text
A
B
C
D
E
SPA
managing
different
states
flow
Slide 14
Slide 14 text
A
B
C
D
E
What
if
need
direct
access
to
every
state?
Slide 15
Slide 15 text
JSON
SEO
must
work!
Slide 16
Slide 16 text
✔
✔
What
if
I
want
to
share
business
logic?
Shared
valida
Slide 17
Slide 17 text
I
need
an
isomorphic
app
Template
rendering
Business
logic
Template
rendering
Business
logic
Slide 18
Slide 18 text
Different
Shapes
Always
a
tomato
Slide 19
Slide 19 text
BL
10000
b
view
Ask
for
a
page
Ask
for
BL
data
HTML
builder
data
engine
client
JS
app
Make
an
interac
Slide 20
Slide 20 text
{JSON}
{JSON}
===
How
to
render
data?
Slide 21
Slide 21 text
Where
the
data
comes
from?
BE
service
BE
service
BE
service
BE
service
Javascript
Mashup
orchestrator
{JSON}
{JSON}
{JSON}
{JSON}
{JSON}
Data
engine
Slide 22
Slide 22 text
ExpressJS
app
How
do
we
build
HTML
server
side?
HTTP
RS
{JSON}
Javascript
Mashup
orchestrator
HTTP
RQ
HTTP
RQ
HTTP
RS
HTML
builder
Slide 23
Slide 23 text
MV*
JS
app
How
do
we
manage
interac6ons?
AJAX
RS
{JSON}
Javascript
Mashup
orchestrator
Catch
interac
Slide 24
Slide 24 text
Javascript
Mashup
orchestrator
How
it
works
all
together
Express
app
MV*
Ask
for
a
page
Ask
for
BL
data
{JSON}
{JSON}
Ask
for
BL
data
Make
an
interac
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Leb
over
from
today
New
way
to
solve
old
problems
No
need
of
math
PhD
You
can
build
your
own
Slide 27
Slide 27 text
@eriol_ricca
Slide 28
Slide 28 text
grunQile.json
bower.json
A
Generic
Module
External
library
(like
backbone)
Venere
library
Venere
library
A
Venere
module