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

Isomorphic javascript in real

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
CDK Deployのための ”反響定位”
Avatar for watany watany
4
730
Rethinking API Platform Filters
Avatar for Vincent Amstoutz vinceamstoutz
0
11k
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
190
PHP でエミュレータを自作して Ubuntu を動かそう
Avatar for memory m3m0r7
PRO
2
180
メッセージングを利用して時間的結合を分離しよう #phperkaigi
Avatar for Takuma Kajikawa kajitack
3
590
AI時代のPhpStorm最新事情 #phpcon_odawara
Avatar for yusuke yusuke
0
170
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
5
870
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
780
Swift Concurrency Type System
Avatar for Yasuhiro Inami inamiy
0
490
GNU Makeの使い方 / How to use GNU Make
Avatar for kaityo256 kaityo256
PRO
16
5.6k
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
Avatar for Sota Makino sotamaki0421
3
490
10 Tips of AWS ～Gen AI on AWS～
Avatar for matsukada licux
5
350

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
27
3.4k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
69
38k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
440
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k

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