Slide 1

Slide 1 text

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  

Slide 29

Slide 29 text

A  Venere  app