Isomorphic javascript in real

Isomorphic Javascript in the real world Cause symmetry is
cool

Agenda An implementa6on that worked Why is it
useful What is “isomorhpism”

“In mathema6cs, an isomorphism (from the Ancient Greek: ἴσος
isos "equal", and μορφή morphe "shape") is a homomorphism that admits an inverse.” Isomorphic deﬁni6on

“In mathema6cs, an isomorphism (from the Ancient Greek: ἴσος
isos "equal", and μορφή morphe "shape") is a homomorphism that admits an inverse.” Isomorphic what?

An example CAR proper6es! I need an engine
I need a steering wheel I want to go to holiday!

This object sa6sfy my proper6es

This object sa6sfy my proper6es too!

river context An isomorphic car! road
context Proper6es always sa6sﬁed!

Equal Shape Equal Behavior

Do we need this?

Yes we do

I want to build some isomorphic stuﬀ New front
end architecture Single Page Applica6on

A B C D E SPA
managing diﬀerent states ﬂow

A B C D E What
if need direct access to every state?

JSON SEO must work!

✔ ✔ What if I want to share
business logic? Shared valida<on logic Shared sor<ng algorithm

I need an isomorphic app Template rendering Business
logic Template rendering Business logic

Diﬀerent Shapes Always a tomato

BL 10000 b view Ask for a page
Ask for BL data HTML builder data engine client JS app Make an interac<on ✔ Ask for BL data

<HTML> {JSON} {JSON} === How to
render data?

Where the data comes from? BE service BE
service BE service BE service Javascript Mashup orchestrator {JSON} {JSON} {JSON} {JSON} {JSON} Data engine

ExpressJS app How do we build HTML server side?
HTTP RS {JSON} Javascript Mashup orchestrator HTTP RQ HTTP RQ HTTP RS <HTML/> HTML builder

MV* JS app How do we manage interac6ons?
AJAX RS {JSON} Javascript Mashup orchestrator Catch interac<on AJAX RQ View render client JS app

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<on

Leb over from today New way to solve
old problems No need of math PhD You can build your own

@eriol_ricca

grunQile.json bower.json A Generic Module External library
(like backbone) Venere library Venere library A Venere module

A Venere app

Isomorphic javascript in real

Isomorphic javascript in real

Riccardo Maggi

Other Decks in Programming

Featured

Transcript

Isomorphic Javascript in the real world Cause symmetry is

Agenda An implementa6on that worked Why is it

“In mathema6cs, an isomorphism (from the Ancient Greek: ἴσος

“In mathema6cs, an isomorphism (from the Ancient Greek: ἴσος

An example CAR proper6es! I need an engine

This object sa6sfy my proper6es

This object sa6sfy my proper6es too!

river context An isomorphic car! road

Equal Shape Equal Behavior

Do we need this?

Yes we do

I want to build some isomorphic stuﬀ New front

A B C D E SPA

A B C D E What

JSON SEO must work!

✔ ✔ What if I want to share

I need an isomorphic app Template rendering Business

Diﬀerent Shapes Always a tomato

BL 10000 b view Ask for a page

<HTML> {JSON} {JSON} === How to

Where the data comes from? BE service BE

ExpressJS app How do we build HTML server side?

MV* JS app How do we manage interac6ons?

Javascript Mashup orchestrator How it works

Leb over from today New way to solve

@eriol_ricca

grunQile.json bower.json A Generic Module External library

A Venere app