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

Isomorphic javascript in real

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Riccardo Maggi Riccardo Maggi
May 13, 2015
Programming
1.1k
1

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

Other Decks in Programming

See All in Programming
為什麼你並不需要ViewModel / No, you don't need a ViewModel
Avatar for Elvis Shi lovee
1
480
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
160
OpenSpecのproposalにbrainstormingを持たせてみた
Avatar for Toranosuke Minamikawa tigertora7571
1
200
Prismを使った型安全な暗号化_関数型まつり2026
Avatar for _fhhmm _fhhmm
0
170
Detecting Compromised CI with eBPF and Cilium Tetragon
Avatar for Liz Rice lizrice
0
130
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
210
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
120
Android CLI
Avatar for Sungyong An fornewid
0
210
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
4
360
言葉の格闘技のススメ～紙とペンと言葉から始める、キャリアの描き方～
Avatar for 進捗ゼミ progresscicada
1
120
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
860
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
130

Featured

See All Featured
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
66
57k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
200
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
240
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
240
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.7k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
760
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
420
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
510

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