Javascript leverage: Isomorphic Applications by Luciano Colosio at Codemotion Dubai
1 like264 views
The document discusses the development of an isomorphic JavaScript application at Namshi, explaining the need for such applications to improve SEO and loading speed by generating HTML on both the server and client sides. It outlines the choices made in adopting technologies like Angular.js, template engines, and Vue.js, along with the implementation steps taken to achieve isomorphism. The final outcome highlighted a reduced JavaScript size and improved page speed, ultimately meeting their project targets.
![So, how does it work?
What do we get form the api:
Data Content
{
data: [],
meta: {},
search: {}
}
{
data: “”,
meta: {},
search: {}
}](https://image.slidesharecdn.com/jsday2015-150528061443-lva1-app6891-160406123341/85/Javascript-leverage-Isomorphic-Applications-by-Luciano-Colosio-at-Codemotion-Dubai-53-320.jpg)
Javascript leverage: Isomorphic Applications by Luciano Colosio at Codemotion Dubai
- 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
- 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
- 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…
- 84. Thank you for listening
- 85. Thank you for listening