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
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
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
140
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
110
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
380
GoのIteratorに詳しくなってしまう
inatonix
1
200
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
260
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
410
開発を加速する共有Swift Package実践
elmetal
PRO
0
400
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
160
A New Era of Testing
mannodermaus
2
320
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
130
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
56k
A designer walks into a library…
pauljervisheath
201
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
The Pragmatic Product Professional
lauravandoore
31
6.2k
How to Ace a Technical Interview
jacobian
274
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
KATA
mclloyd
27
13k
Making Projects Easy
brettharned
113
5.8k
In The Pink: A Labor of Love
frogandcode
139
22k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Design by the Numbers
sachag
277
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
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