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.

1. unlucio
Senior Software Engineer - Namshi
Dive Master - PADI
Remote Nerd - WEBdeBS

2. Back to the future:
Isomorphic javascript
applications

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. 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. 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. and a website
is a bunch of nicely presented html
with an interactive layer on top

7. to be isomorphic
we need to stop at the html
take a note for future self!

8. Why do we need one?

9. Why do we need one?
Robots: search engines don’t cope with SPAs

10. Why do we need one?
Robots: search engines don’t cope with SPAs
Loading speed

11. Why do we need one?
Robots: search engines don’t cope with SPAs
Loading speed
Javascript doesn’t “fail safe”

12. @ Namshi…

13. We had to turn
this…

15. in to
this

16. See the difference?

18. SPA Page Isomorphic Page

19. SPA Page Isomorphic Page
~190Kb js Target 100Kb js

20. SPA Page Isomorphic Page
~190Kb js Target 100Kb js
~ 40p page speed at least 90p page speed

21. SPA Page Isomorphic Page
~190Kb js Target 100Kb js
~ 40p page speed at least 90p page speed
Angular.js ?????????

22. ?????????

23. ?????????
yup, we had to make a choice

26. We’re already using it on our SPAs

27. We’re already using it on our SPAs
Well known dependency injection

28. We’re already using it on our SPAs
Well known dependency injection
Data bindings

29. We’re already using it on our SPAs
Well known dependency injection
Data bindings
Jade (and we like it)

30. It’s ok but…
Making it isomorphic needs
quite a bit of tooling around

33. New and fashionable…

34. New and fashionable…
…we’re eager to try it :)

35. New and fashionable…
…we’re eager to try it :)
The virtual DOM looks amazing

36. New and fashionable…
…we’re eager to try it :)
The virtual DOM looks amazing
Flux (once you get it) seems quite a good idea

37. 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…

38. 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!

39. 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!

41. Let’s try it! :D

42. Examples and suggested techniques seems been
quite complex, with lots of structure and quite
opinionated

43. expectations slightly not met :’(

44. Yup, we’re back to square one…

45. Yup, we’re back to square one…

47. ok… let’s try getting what we like…

48. ok… let’s try getting what we like…
data bindings
jade
flux
components

49. flux
capacitor

50. So, how does it work?

51. So, how does it work?
Step 1
Understand the view
Data Content
Template
Interaction

52. So, how does it work?
Step 2
Strip the interaction layer
Data Content
Template
Interaction
Remember our note: stop at the html.

53. So, how does it work?
What do we get form the api:
Data Content
{
data: [],
meta: {},
search: {}
}
{
data: “”,
meta: {},
search: {}
}

54. So, how does it work?
What do we get form the api:
{
data: “”,
meta: {},
search: {}
}
This guy is html!

55. So, how does it work?
Choose a template engine
Template
Jade:
our current angular ones
Nunjucks:
renders on client and server

56. let’s bring back
what we liked about React

57. Flux

58. Flux
Our data source: API

59. Flux
Our data source: API
State: the URL

60. Flux
Our data source: API
State: the URL
Add a little dispatcher to notify for data update

61. Show me the code!

62. 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);
});
});

63. 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();

64. Components

65. Components
Activate on state update

66. Components
Activate on state update
Receive data

67. Components
Activate on state update
Receive data
Transform them if needed

68. Components
Activate on state update
Receive data
Transform them if needed
Delegate to templates for final html generation

69. Show me the code!

70. 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'
});
};

71. Show me the code!
Title Template
<title data-iso-component="title">{{ text }}</title>

72. Hey but what about
my interaction?

73. 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

74. 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

75. Show me the code!

76. 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 }});
};

77. 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>

78. did we meet our target?

79. did we meet our target?
Isomorphism: yes :)

80. did we meet our target?
Isomorphism: yes :)
Size: 162kb (including templates)

81. did we meet our target?
Isomorphism: yes :)
Size: 162kb (including templates)
Page speed…

82. Page speed…

83. node.js
Browserify
Gulp
Nunjucks
Vanilla JS
express.js
VUE.js
Docker

84. Thank you for listening

85. Thank you for listening