Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Isomorphic javascript in real

Avatar for Riccardo Maggi Riccardo Maggi
May 13, 2015
Programming
1
1.1k

Isomorphic javascript in real

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

Avatar for Riccardo Maggi

Riccardo Maggi

May 13, 2015
Tweet

Other Decks in Programming

See All in Programming
Microservices rules: What good looks like
Avatar for Chris Richardson cer
PRO
0
1.4k
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
390
20 years of Symfony, what's next?

Avatar for Fabien Potencier fabpot
2
360
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
Avatar for Shoma Okamoto shmokmt
5
2.3k
從冷知識到漏洞，你不懂的 Web，駭客懂 - Huli @ WebConf Taiwan 2025
Avatar for Huli aszx87410
2
2.6k
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
160
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
150
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
120
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
420
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
Avatar for Yuya Matsumura yuya4
6
3.6k
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
230
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
130

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
It's Worth the Effort
Avatar for 3n 3n
187
29k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Side Projects
Avatar for Sacha Greif sachag
455
43k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.3k

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  
  25. None

  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