Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Isomorphic javascript in real
Search
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
Riccardo Maggi
May 13, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
170
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.1k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
ふつうの技術スタックでアート作品を作ってみる
akira888
1
900
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
93
31k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
440
型で語るカタ
irof
0
200
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
技術同人誌をMCP Serverにしてみた
74th
1
660
PipeCDのプラグイン化で目指すところ
warashi
1
280
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Typedesign – Prime Four
hannesfritz
42
2.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Being A Developer After 40
akosma
90
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Docker and Python
trallard
44
3.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Producing Creativity
orderedlist
PRO
346
40k
How GitHub (no longer) Works
holman
314
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Transcript
Isomorphic Javascript in the real world Cause symmetry is
cool
Agenda An implementa6on that worked Why is it
useful What is “isomorhpism”
“In mathema6cs, an isomorphism (from the Ancient Greek: ἴσος
isos "equal", and μορφή morphe "shape") is a homomorphism that admits an inverse.” Isomorphic defini6on
“In mathema6cs, an isomorphism (from the Ancient Greek: ἴσος
isos "equal", and μορφή morphe "shape") is a homomorphism that admits an inverse.” Isomorphic what?
An example CAR proper6es! I need an engine
I need a steering wheel I want to go to holiday!
This object sa6sfy my proper6es
This object sa6sfy my proper6es too!
river context An isomorphic car! road
context Proper6es always sa6sfied!
Equal Shape Equal Behavior
Do we need this?
Yes we do
I want to build some isomorphic stuff New front
end architecture Single Page Applica6on
A B C D E SPA
managing different states flow
A B C D E What
if need direct access to every state?
JSON SEO must work!
✔ ✔ What if I want to share
business logic? Shared valida<on logic Shared sor<ng algorithm
I need an isomorphic app Template rendering Business
logic Template rendering Business logic
Different Shapes Always a tomato
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
<HTML> {JSON} {JSON} === How to
render data?
Where the data comes from? BE service BE
service BE service BE service Javascript Mashup orchestrator {JSON} {JSON} {JSON} {JSON} {JSON} Data engine
ExpressJS app How do we build HTML server side?
HTTP RS {JSON} Javascript Mashup orchestrator HTTP RQ HTTP RQ HTTP RS <HTML/> HTML builder
MV* JS app How do we manage interac6ons?
AJAX RS {JSON} Javascript Mashup orchestrator Catch interac<on AJAX RQ View render client JS app
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
None
Leb over from today New way to solve
old problems No need of math PhD You can build your own
@eriol_ricca
grunQile.json bower.json A Generic Module External library
(like backbone) Venere library Venere library A Venere module
A Venere app