Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Isomorphic javascript in real

Isomorphic javascript in real

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

Riccardo Maggi

May 13, 2015
Tweet

Other Decks in Programming

Transcript

  1. Isomorphic  Javascript  in  the  real  world  
    Cause  symmetry  is  cool  

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. This  object  sa6sfy  my  proper6es  

    View Slide

  7. This  object  sa6sfy  my  proper6es  too!  

    View Slide

  8. river  
    context  
    An  isomorphic  car!  
    road  
    context  
    Proper6es  always  sa6sfied!  

    View Slide

  9. Equal  
    Shape  
    Equal  
    Behavior  

    View Slide

  10. Do  we  need  this?  

    View Slide

  11. Yes  we  do  

    View Slide

  12. I  want  to  build  some  isomorphic  stuff  
    New  front  end  architecture  
    Single  Page  Applica6on  

    View Slide

  13. A  
    B  
    C  
    D
    E  
    SPA  managing  different  states  flow  

    View Slide

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

    View Slide

  15. JSON  
    SEO  must  work!  

    View Slide

  16. ✔   ✔  
    What  if  I  want  to  share  business  logic?  
    Shared  validaShared  sor

    View Slide

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

    View Slide

  18. Different  Shapes    
    Always  a  tomato  

    View Slide

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

    View Slide

  20.  
    {JSON}   {JSON}  
    ===  
    How  to  render  data?  

    View Slide

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

    View Slide

  22. ExpressJS  app  
    How  do  we  build  HTML  server  side?  
    HTTP  RS    
    {JSON}  
    Javascript    
    Mashup  
    orchestrator  
    HTTP  RQ   HTTP  RQ  
    HTTP  RS  

    View Slide

  23. MV*  JS  app  
    How  do  we  manage  interac6ons?  
    AJAX  RS  
    {JSON}  
    Javascript    
    Mashup  
    orchestrator  
    Catch  interacView  render  
    client  JS  app  

    View Slide

  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

    View Slide

  25. View Slide

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

    View Slide

  27. @eriol_ricca  

    View Slide

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

    View Slide

  29. A  Venere  app  

    View Slide