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
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.6k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
720
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
Flutterと Vibe Coding で個人開発!
hyshu
0
120
TypeScriptでDXを上げろ! Hono編
yusukebe
3
890
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
310
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
Jakarta EE Meets AI
ivargrimstad
0
460
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
160
階層化自動テストで開発に機動力を
ickx
1
450
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
8
1.1k
Featured
See All Featured
Scaling GitHub
holman
461
140k
Docker and Python
trallard
45
3.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Rails Girls Zürich Keynote
gr2m
95
14k
The Cult of Friendly URLs
andyhume
79
6.5k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Code Reviewing Like a Champion
maltzj
524
40k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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