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  
   

   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