Isomorphic Apps
or how we share our code between the server and the client
npm install nescalante
Slide 3
Slide 3 text
Goals
• UI should load fast
• Once loaded, the interaction
should be even faster
• All the above should be easy
to maintain
Slide 4
Slide 4 text
But how can we achieve such
wonderful thing?
Slide 5
Slide 5 text
Isomorphic apps!
Slide 6
Slide 6 text
UI should load fast
• We can’t wait for Javascript to load
• The content should come on the first request
• The content should come from the server
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
But how can we achieve such
marvelous thing?
Slide 9
Slide 9 text
Lets start from the beginning
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
To recap
URL Model HTML
Slide 12
Slide 12 text
To recap
Action State View
Slide 13
Slide 13 text
In some kind of pseudo code
onActionTriggered(action) { // http req
// model
var state = getState(action)
// HTML
var view = getView(state)
render(view)
}
a function!
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
We can’t wait for Javascript to load
• We don’t need it at all
• We can live without it
• We save considerable time
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
You don’t need it, right?
So why are we using it?
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Once loaded, interactions should
be even faster
• From now on, only data is needed
• The view functions should be already there
• No more calls to the UI server
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
In some kind of pseudo code
onSearchChange(term) {
url.change(‘?search=‘ + term)
action = newSearch(term)
triggerAction(action)
}
onActionTriggered(action) {
var state = getState(action)
var view = getView(state)
render(view)
}
history change
Slide 23
Slide 23 text
:> ÷˚˛zFSD S/.ßxxqml///////////////VVsxs
Slide 24
Slide 24 text
But, where is my isomorphic app?
Slide 25
Slide 25 text
Isomorphic code
// Action is triggered by url changes
// or Http requests
onActionTriggered(action) {
// State is generated by
// calls to the API
var state = getState(action)
// A function that returns HTML
var view = getView(state)
render(view)
}
Slide 26
Slide 26 text
Isomorphic world
• Isomorphic data fetch
• Isomorphic routing
• Isomorphic views
Slide 27
Slide 27 text
Isomorphic means that everything
that runs both on the server and on
the client
Slide 28
Slide 28 text
Isomorphic warnings
• Use polyfills to support what browsers don’t
• Be careful about the libs that you pick
• Test everything everywhere
Slide 29
Slide 29 text
And should be easy to maintain
Slide 30
Slide 30 text
Isomorphic setup
• Your code should be interpreted by the server
• Your code should be interpreted by browsers
• All that code should be the same
Slide 31
Slide 31 text
How can we achieve that?
• Using module bundlers
• Using transpilers
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
UI should load fast
• Serving the content without waiting for JS
• Doing the render on the server
Slide 34
Slide 34 text
Once loaded, should interact fast
• Fetching only the data thats needed
• The views are already in JS
Slide 35
Slide 35 text
Should be easy to maintain
• Transpiling everything
• Sharing the code between server and client