Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
unlucio
Senior Software Engineer - Namshi
Dive Master - PADI
Remote Nerd - WEBdeBS
Back to the future:
Isomorphic javascript
applications
An isomorphic javascript application:
What is an “isomorphic application”
Why did we need one
How did we build it @ Namshi...
Isomorphism
Isomorphism is a very general concept that appears in several areas
of mathematics. The word derives from the ...
Isomorphic application
It’s a dynamic website capable of generating its html on
both server and client side, virtually usi...
and a website
is a bunch of nicely presented html
with an interactive layer on top
to be isomorphic
we need to stop at the html
take a note for future self!
Why do we need one?
Why do we need one?
Robots: search engines don’t cope with SPAs
Why do we need one?
Robots: search engines don’t cope with SPAs
Loading speed
Why do we need one?
Robots: search engines don’t cope with SPAs
Loading speed
Javascript doesn’t “fail safe”
@ Namshi…
We had to turn
this…
in to
this
See the difference?
SPA Page Isomorphic Page
SPA Page Isomorphic Page
~190Kb js Target 100Kb js
SPA Page Isomorphic Page
~190Kb js Target 100Kb js
~ 40p page speed at least 90p page speed
SPA Page Isomorphic Page
~190Kb js Target 100Kb js
~ 40p page speed at least 90p page speed
Angular.js ?????????
?????????
?????????
yup, we had to make a choice
We’re already using it on our SPAs
We’re already using it on our SPAs
Well known dependency injection
We’re already using it on our SPAs
Well known dependency injection
Data bindings
We’re already using it on our SPAs
Well known dependency injection
Data bindings
Jade (and we like it)
It’s ok but…
Making it isomorphic needs
quite a bit of tooling around
New and fashionable…
New and fashionable…
…we’re eager to try it :)
New and fashionable…
…we’re eager to try it :)
The virtual DOM looks amazing
New and fashionable…
…we’re eager to try it :)
The virtual DOM looks amazing
Flux (once you get it) seems quite a good idea
New and fashionable…
…we’re eager to try it :)
The virtual DOM looks amazing
Flux (once you get it) seems quite a good ide...
New and fashionable…
…we’re eager to try it :)
The virtual DOM looks amazing
Flux (once you get it) seems quite a good ide...
New and fashionable…
…we’re eager to try it :)
The virtual DOM looks amazing
Flux (once you get it) seems quite a good ide...
Let’s try it! :D
Examples and suggested techniques seems been
quite complex, with lots of structure and quite
opinionated
expectations slightly not met :’(
Yup, we’re back to square one…
Yup, we’re back to square one…
ok… let’s try getting what we like…
ok… let’s try getting what we like…
data bindings
jade
flux
components
flux
capacitor
So, how does it work?
So, how does it work?
Step 1
Understand the view
Data Content
Template
Interaction
So, how does it work?
Step 2
Strip the interaction layer
Data Content
Template
Interaction
Remember our note: stop at the ...
So, how does it work?
What do we get form the api:
Data Content
{
data: [],
meta: {},
search: {}
}
{
data: “”,
meta: {},
s...
So, how does it work?
What do we get form the api:
{
data: “”,
meta: {},
search: {}
}
This guy is html!
So, how does it work?
Choose a template engine
Template
Jade:
our current angular ones
Nunjucks:
renders on client and ser...
let’s bring back
what we liked about React
Flux
Flux
Our data source: API
Flux
Our data source: API
State: the URL
Flux
Our data source: API
State: the URL
Add a little dispatcher to notify for data update
Show me the code!
Show me the code!
Server entry point
var app = require('express')();
var tpl = require(‘../shared/tpl');
var url = require...
Show me the code!
And it’s client counterpart
var page = require('page');
page('*', function (ctx) {
var path = url.parse(...
Components
Components
Activate on state update
Components
Activate on state update
Receive data
Components
Activate on state update
Receive data
Transform them if needed
Components
Activate on state update
Receive data
Transform them if needed
Delegate to templates for final html generation
Show me the code!
Show me the code!
Title Component
var tpl = require('../tpl');
var vpo = require('vpo');
module.exports = function(data) {...
Show me the code!
Title Template
<title data-iso-component="title">{{ text }}</title>
Hey but what about
my interaction?
Hey but what about my interaction?
well, according to legend: turns out that back in the 90s
humans were able to use websi...
Hey but what about my interaction?
Interaction We call them: widgets
they react to UI changes
they attach to iso-component...
Show me the code!
Show me the code!
var dispatcher = require(‘../../shared/dispatcher');
var menu = require('./menu');
var cart = require('....
Show me the code!
<div id="site_header" data-iso-component="header"
data-nm-class="navigation_open: menu.shiftContent">
<u...
did we meet our target?
did we meet our target?
Isomorphism: yes :)
did we meet our target?
Isomorphism: yes :)
Size: 162kb (including templates)
did we meet our target?
Isomorphism: yes :)
Size: 162kb (including templates)
Page speed…
Page speed…
node.js
Browserify
Gulp
Nunjucks
Vanilla JS
express.js
VUE.js
Docker
Thank you for listening
Thank you for listening
Back to the future:  Isomorphic javascript applications
Back to the future:  Isomorphic javascript applications
Back to the future:  Isomorphic javascript applications
Back to the future:  Isomorphic javascript applications
Back to the future:  Isomorphic javascript applications
Back to the future:  Isomorphic javascript applications
Back to the future:  Isomorphic javascript applications
Back to the future:  Isomorphic javascript applications
Upcoming SlideShare
Loading in …5
×

Back to the future: Isomorphic javascript applications

7,729 views

Published on

Remember when we use to “render” websites directly from the backend?Single page applications are cool and catchy, but some times they fall short, for example, when hit by a search engine, and that’s when you start turning to isomorphic javascript applications.in this talk I share our experience gained on the field while turning our frontends form angular SPAs to isomorphic vanillaJS javascript apps with node a a thin active layer on the client side, taking the best form famous frameworks such as angular and react, and making our own mix.

Published in: Technology
  • caro Luciano come faccio a contattarti mi chiami se ti perdi il mio clel puoi chiederlo ad Andrea Perini grazie
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Back to the future: Isomorphic javascript applications

  1. 1. unlucio Senior Software Engineer - Namshi Dive Master - PADI Remote Nerd - WEBdeBS
  2. 2. Back to the future: Isomorphic javascript applications
  3. 3. An isomorphic javascript application: What is an “isomorphic application” Why did we need one How did we build it @ Namshi: Requirements Choices What did we actually do
  4. 4. Isomorphism Isomorphism is a very general concept that appears in several areas of mathematics. The word derives from the Greek iso, meaning "equal," and morphosis, meaning "to form" or "to shape.” wolfram.com http://mathworld.wolfram.com/Isomorphism.html
  5. 5. Isomorphic application It’s a dynamic website capable of generating its html on both server and client side, virtually using the same exact code in both environments
  6. 6. and a website is a bunch of nicely presented html with an interactive layer on top
  7. 7. to be isomorphic we need to stop at the html take a note for future self!
  8. 8. Why do we need one?
  9. 9. Why do we need one? Robots: search engines don’t cope with SPAs
  10. 10. Why do we need one? Robots: search engines don’t cope with SPAs Loading speed
  11. 11. Why do we need one? Robots: search engines don’t cope with SPAs Loading speed Javascript doesn’t “fail safe”
  12. 12. @ Namshi…
  13. 13. We had to turn this…
  14. 14. in to this
  15. 15. See the difference?
  16. 16. SPA Page Isomorphic Page
  17. 17. SPA Page Isomorphic Page ~190Kb js Target 100Kb js
  18. 18. SPA Page Isomorphic Page ~190Kb js Target 100Kb js ~ 40p page speed at least 90p page speed
  19. 19. SPA Page Isomorphic Page ~190Kb js Target 100Kb js ~ 40p page speed at least 90p page speed Angular.js ?????????
  20. 20. ?????????
  21. 21. ????????? yup, we had to make a choice
  22. 22. We’re already using it on our SPAs
  23. 23. We’re already using it on our SPAs Well known dependency injection
  24. 24. We’re already using it on our SPAs Well known dependency injection Data bindings
  25. 25. We’re already using it on our SPAs Well known dependency injection Data bindings Jade (and we like it)
  26. 26. It’s ok but… Making it isomorphic needs quite a bit of tooling around
  27. 27. New and fashionable…
  28. 28. New and fashionable… …we’re eager to try it :)
  29. 29. New and fashionable… …we’re eager to try it :) The virtual DOM looks amazing
  30. 30. New and fashionable… …we’re eager to try it :) The virtual DOM looks amazing Flux (once you get it) seems quite a good idea
  31. 31. New and fashionable… …we’re eager to try it :) The virtual DOM looks amazing Flux (once you get it) seems quite a good idea JSX…
  32. 32. New and fashionable… …we’re eager to try it :) The virtual DOM looks amazing Flux (once you get it) seems quite a good idea JSX… … but components are a nice idea too!
  33. 33. New and fashionable… …we’re eager to try it :) The virtual DOM looks amazing Flux (once you get it) seems quite a good idea JSX… … but components are a nice idea too! and The Internet says it can be isomorphic too!
  34. 34. Let’s try it! :D
  35. 35. Examples and suggested techniques seems been quite complex, with lots of structure and quite opinionated
  36. 36. expectations slightly not met :’(
  37. 37. Yup, we’re back to square one…
  38. 38. Yup, we’re back to square one…
  39. 39. ok… let’s try getting what we like…
  40. 40. ok… let’s try getting what we like… data bindings jade flux components
  41. 41. flux capacitor
  42. 42. So, how does it work?
  43. 43. So, how does it work? Step 1 Understand the view Data Content Template Interaction
  44. 44. So, how does it work? Step 2 Strip the interaction layer Data Content Template Interaction Remember our note: stop at the html.
  45. 45. So, how does it work? What do we get form the api: Data Content { data: [], meta: {}, search: {} } { data: “”, meta: {}, search: {} }
  46. 46. So, how does it work? What do we get form the api: { data: “”, meta: {}, search: {} } This guy is html!
  47. 47. So, how does it work? Choose a template engine Template Jade: our current angular ones Nunjucks: renders on client and server
  48. 48. let’s bring back what we liked about React
  49. 49. Flux
  50. 50. Flux Our data source: API
  51. 51. Flux Our data source: API State: the URL
  52. 52. Flux Our data source: API State: the URL Add a little dispatcher to notify for data update
  53. 53. Show me the code!
  54. 54. Show me the code! Server entry point var app = require('express')(); var tpl = require(‘../shared/tpl'); var url = require('url'); app.get('*', function(req, res) { var path = url.parse(req.url).pathname; api.getData(path).then(function(data) { var html = tpl.render('main.html', data); res.end(html); }); });
  55. 55. Show me the code! And it’s client counterpart var page = require('page'); page('*', function (ctx) { var path = url.parse(ctx.path).pathname; dispatcher.broadcast('URL_CHANGE', {url: path}); api.getData(path).then(function (data) { dispatcher.broadcast('DATA_UPDATE', data); }); }); page.start();
  56. 56. Components
  57. 57. Components Activate on state update
  58. 58. Components Activate on state update Receive data
  59. 59. Components Activate on state update Receive data Transform them if needed
  60. 60. Components Activate on state update Receive data Transform them if needed Delegate to templates for final html generation
  61. 61. Show me the code!
  62. 62. Show me the code! Title Component var tpl = require('../tpl'); var vpo = require('vpo'); module.exports = function(data) { return tpl.render('title.html', { text: vpo.get(data, 'meta.seo.pageTitle') || vpo.get(data, 'title') || 'Namshi.com' }); };
  63. 63. Show me the code! Title Template <title data-iso-component="title">{{ text }}</title>
  64. 64. Hey but what about my interaction?
  65. 65. Hey but what about my interaction? well, according to legend: turns out that back in the 90s humans were able to use websites simply clicking on links and without fancy UI wow-effects
  66. 66. Hey but what about my interaction? Interaction We call them: widgets they react to UI changes they attach to iso-components interact with data-nm-* and use VUE.js
  67. 67. Show me the code!
  68. 68. Show me the code! var dispatcher = require(‘../../shared/dispatcher'); var menu = require('./menu'); var cart = require('../services/cart'); module.exports = function($dom) { $dom.on('click', '#site_menu .search_trigger', function(e) { dispatcher.broadcast(‘TOGGLE_SEARCH’); e.preventDefault(); }); this.bind($dom, {data: { menu: menu, cart: cart }}); };
  69. 69. Show me the code! <div id="site_header" data-iso-component="header" data-nm-class="navigation_open: menu.shiftContent"> <ul id="site_menu"> <li><a href="" class="search_trigger"> <i>{{ 'search' | translate }}</i></a> </li> <li><a href="/cart/" class="cart_overview"> <span data-nm-text="cart.itemsCount">0</span></a> </li> </ul> </div>
  70. 70. did we meet our target?
  71. 71. did we meet our target? Isomorphism: yes :)
  72. 72. did we meet our target? Isomorphism: yes :) Size: 162kb (including templates)
  73. 73. did we meet our target? Isomorphism: yes :) Size: 162kb (including templates) Page speed…
  74. 74. Page speed…
  75. 75. node.js Browserify Gulp Nunjucks Vanilla JS express.js VUE.js Docker
  76. 76. Thank you for listening
  77. 77. Thank you for listening

×