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
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
190
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
590
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
770
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
CSC305 Lecture 02
javiergs
PRO
1
260
私はどうやって技術力を上げたのか
yusukebe
43
17k
開発生産性を上げるための生成AI活用術
starfish719
1
170
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Balancing Empowerment & Direction
lara
4
680
Speed Design
sergeychernyshev
32
1.1k
Producing Creativity
orderedlist
PRO
347
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Why Our Code Smells
bkeepers
PRO
339
57k
Code Review Best Practice
trishagee
72
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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