Isomorphic Apps

A brief about how isomorphic apps should work

Transcript

2. Isomorphic Apps or how we share our code between the server and the client npm install nescalante
3. Goals • UI should load fast • Once loaded, the interaction should be even faster • All the above should be easy to maintain
4. But how can we achieve such wonderful thing?
5. Isomorphic apps!
6. 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
8. But how can we achieve such marvelous thing?
9. Lets start from the beginning
11. To recap URL Model HTML
12. To recap Action State View
13. In some kind of pseudo code onActionTriggered(action) { // http req // model var state = getState(action) // HTML var view = getView(state) render(view) } a function!
16. We can’t wait for Javascript to load • We don’t need it at all • We can live without it • We save considerable time
18. You don’t need it, right? So why are we using it?
20. 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
22. 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
23. :> ÷˚˛zFSD S/.ßxxqml///////////////VVsxs
24. But, where is my isomorphic app?
25. 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) }
26. Isomorphic world • Isomorphic data fetch • Isomorphic routing • Isomorphic views
27. Isomorphic means that everything that runs both on the server and on the client
28. Isomorphic warnings • Use polyfills to support what browsers don’t • Be careful about the libs that you pick • Test everything everywhere
29. And should be easy to maintain
30. Isomorphic setup • Your code should be interpreted by the server • Your code should be interpreted by browsers • All that code should be the same
31. How can we achieve that? • Using module bundlers • Using transpilers
33. UI should load fast • Serving the content without waiting for JS • Doing the render on the server
34. Once loaded, should interact fast • Fetching only the data thats needed • The views are already in JS
35. Should be easy to maintain • Transpiling everything • Sharing the code between server and client
36. DEEEMOOOO
37. ENOUGH GUYS