Isomorphic javascript in real

architectural overview of a working isomorphic solution plus some funny images of course

Transcript

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