Single-Page Applications: Challenges

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
September 12, 2015

Single-Page Applications: Challenges

Challenges in the front-end application development.

This slides discuss scalability and performance in the modern single-page applications.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

September 12, 2015
Tweet

Transcript

  1. Single-Page Applications: Challenges Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com

  2. Minko Gechev github.com/mgechev twitter.com/mgechev { "job": "Freelancer", "hobbies": [ "open

    source", "blogging", "teaching", "sports" ], "communityEvents": [ "SofiaJS", "BeerJS Sofia" ] }
  3. Challenges in the modern web

  4. Agenda • Title 1 • Subtitle 1 • Subtitle 2

    • Title 2 • Subtitle 1 Lets take a look back…
  5. When IE6 was bleeding edge…

  6. …and Justin Bieber wasn’t on the TV

  7. Everything was simple…

  8. Client Server

  9. Client Server

  10. Client Server GET /

  11. Client Server GET /

  12. Client Server GET / GET * loop

  13. Client Server GET / GET * loop

  14. Caption …the role of JavaScript was limited

  15. None
  16. JavaScript’s initial purpose document.body.style.backgroundImage = 'url(unicorn.gif)';

  17. None
  18. None
  19. None
  20. jQuery jQuery(function ($) { var popup = function () {

    if ($('.popup_close').length > 0) { $('.popup_close').on('click', function () { $(this).closest('.wrapper_outer_popup').addClass('hidden'); }); $('.popup_target').on('click', function () { $('.popup[data-popup="' + $(this).attr('data-target') + '"]').removeClass('hidden'); }); } }(popup); }(jQuery));
  21. None
  22. jQuery spaghetti jQuery(function ($) { var popup = function ()

    { if ($('.popup_close').length > 0) { $('.popup_close').on('click', function () { $(this).closest('.wrapper_outer_popup').addClass('hidden'); }); $('.popup_target').on('click', function () { $('.popup[data-popup="' + $(this).attr('data-target') + '"]').removeClass('hidden'); }); } }(popup); $(document).on('ready', function () { $('.sisea-results-list').each(function () { var elements = $(this).find('.sisea-result'), size = elements.size(), find = 10; for (var i = 0; i < find; i++) elements.eq(i).show(300); $(window).on('scroll', function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop, offset = $('#scroll').offset().top; if (scrollTop > offset - 800) { find < size ? find += 10 : find = size; for (var i = 0; i < find; i++) elements.eq(i).show(300); } }); }); }); }(jQuery));
  23. File.extension …you know nothing Jon Snow

  24. None
  25. jQuery spaghetti jQuery(function ($) { var popup = function ()

    { if ($('.popup_close').length > 0) { $('.popup_close').on('click', function () { $(this).closest('.wrapper_outer_popup').addClass('hidden'); }); $('.popup_target').on('click', function () { $('.popup[data-popup="' + $(this).attr('data-target') + '"]').removeClass('hidden'); }); } }(popup); $(document).on('ready', function () { $('.sisea-results-list').each(function () { var elements = $(this).find('.sisea-result'), size = elements.size(), find = 10; for (var i = 0; i < find; i++) elements.eq(i).show(300); $(window).on('scroll', function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop, offset = $('#scroll').offset().top; if (scrollTop > offset - 800) { find < size ? find += 10 : find = size; for (var i = 0; i < find; i++) elements.eq(i).show(300); } }); }); }); var popup_show_delay = 0.5; $('.in_basket').each(function(){ var $popup = $(this).find('.flyout'); var timeoutId = null; var showPopup = function() { $popup.removeClass('hidden'); }; var hidePopup = function() { $popup.addClass('hidden'); console.log('hide popup'); }; var $targets = $([ this, $popup.get(0) ]); $targets.on('mouseenter', function(){ console.log('show popup'); clearTimeout(timeoutId); showPopup(); }); $targets.on('mouseleave', function(){ clearTimeout(timeoutId); timeoutId = setTimeout(hidePopup, popup_show_delay * 1000); }); }); $(".doc_4").hover(function(){ $(".Kiril").css("display","block"); $(".beckzhan").css("display","none"); $(".Sergey").css("display","none"); $(".Asiya").css("display","none"); }); $(".doc_1").hover(function(){ $(".beckzhan").css("display","block"); $(".Kiril").css("display","none"); $(".Sergey").css("display","none"); $(".Asiya").css("display","none"); }); $(".doc_2").hover(function(){ $(".Sergey").css("display","block"); $(".beckzhan").css("display","none"); $(".Kiril").css("display","none"); $(".Asiya").css("display","none"); }); $(".doc_3").hover(function(){ $(".Asiya").css("display","block"); $(".beckzhan").css("display","none"); $(".Sergey").css("display","none"); $(".Kiril").css("display","none"); }); }(jQuery));
  26. None
  27. None
  28. “Scaling” this way simply doesn’t work…

  29. https://speakerdeck.com/jaffathecake/in-your-font-face

  30. architecture |ˈɑːkɪtɛktʃəә| noun [ mass noun ] 1 the art

    or practice of designing and constructing buildings. schools of architecture and design. • the style in which a building is designed and constructed, especially with regard to a specific period, place, or culture: Georgian architecture. 2 the complex or carefully designed structure of something: the chemical architecture of the human brain. • the conceptual structure and logical organization of a computer or computer-based system.
  31. None
  32. – Martin Fowler “…decisions that are hard to change…” Architecture

  33. Scalable JavaScript Application Architecture

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. Decoupled modules, which communicate through an event bus

  43. …a bit later

  44. None
  45. followed by the MV* fashion

  46. A few MV* frameworks Backbone.js Flight KnockoutJS Knockback.js AngularJS Ember.js

    React MarionetteJS CanJS Vue.js Ampersand Mithril Aurelia Kendo UI PureMVC
  47. A few MV* frameworks Backbone.js Flight KnockoutJS Knockback.js AngularJS Ember.js

    React MarionetteJS CanJS Vue.js Ampersand Mithril Aurelia Kendo UI PureMVC
  48. A few MV* frameworks Backbone.js Flight KnockoutJS Knockback.js AngularJS Ember.js

    React MarionetteJS CanJS Vue.js Ampersand Mithril Aurelia Kendo UI PureMVC
  49. A few MV* frameworks Backbone.js Flight KnockoutJS Knockback.js AngularJS Ember.js

    React MarionetteJS CanJS Vue.js Ampersand Mithril Aurelia Kendo UI PureMVC
  50. A few MV* frameworks Backbone.js Flight KnockoutJS Knockback.js AngularJS Ember.js

    React MarionetteJS CanJS Vue.js Ampersand Mithril Aurelia Kendo UI PureMVC
  51. A few MV* frameworks Backbone.js Flight KnockoutJS Knockback.js AngularJS Ember.js

    React MarionetteJS CanJS Vue.js Ampersand Mithril Aurelia Kendo UI PureMVC
  52. Most frameworks were following the same model

  53. – Wikipedia “Model–view–controller (MVC) is a software architectural pattern for

    implementing user interfaces.” Model–view–controller
  54. Controller Model View

  55. Controller Model View Creates

  56. Controller Model View Delegates

  57. Controller Model View Manipulates

  58. Controller Model View Notifies

  59. …and a bit later…

  60. Controller Model View

  61. Controller Model View

  62. However, they kept the same base…

  63. – Wikipedia “The observer pattern is a software design pattern

    in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their method.” Observer Pattern
  64. None
  65. this.name  =  name;

  66. Update the user badge!

  67. this.name  =  name;   $(‘#badge  .name’)      .html(name);

  68. Notify all other users!

  69. this.name  =  name;   $(‘#badge  .name’)      .html(name);  

    foreach  u  in  users  {      u.send({
        type:  ‘change’,
        name:  name      });   }
  70. Update the database!

  71. None
  72. this.name  =  name;   foreach  o  in  obs  {  

       o.update(name);
 }
  73. which has two big pitfalls…

  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. Tangled data-flow

  85. None
  86. None
  87. None
  88. Complex mutable state

  89. Flux came out!

  90. None
  91. Flux does: • Enforces the uni-directional data-flow • Keeps the

    UI as stateless as possible
  92. Flux does: • Enforces the uni-directional data-flow • No more

    cascading updates and hidden dependencies • Keeps the UI as stateless as possible • No more troubles to reason about the state
  93. But flux is not the silver bullet

  94. None
  95. JavaScript has some good parts…

  96. • Dynamic • Has unusual object-oriented model However, it is…

  97. What will make us be more productive less error-prone?

  98. Easy to learn

  99. Agenda • Title 1 • Subtitle 1 • Subtitle 2

    • Title 2 • Subtitle 1 Better IDE/text editors support
  100. Agenda • Title 1 • Subtitle 1 • Subtitle 2

    • Title 2 • Subtitle 1 Compiler to take care of us
  101. Requirements • Statically typed • More powerful syntax with similar

    semantics • Possibly superset of JavaScript
  102. Adding new language in the browser is impossible

  103. Our Awesome Language JavaScript

  104. Our Awesome Language JavaScript Transpiler

  105. Adding new language in the browser is impossible

  106. Languages aiming to “fix” JS TypeScript CoffeeScript ClojureScript Dart Elm

    ToffeeScript Coco Caffeine Jack LispyScript GorillaScript LiteScript asm.js JSX Typecast.js PureScript AtScript Flow Pyjamas
  107. Languages aiming to “fix” JS TypeScript CoffeeScript ClojureScript Dart Elm

    ToffeeScript Coco Caffeine Jack LispyScript GorillaScript LiteScript asm.js JSX Typecast.js PureScript AtScript Flow Pyjamas
  108. TypeScript is:

  109. TypeScript is: • Statically typed ✓ Has compiler ✓ Has

    better IDE/text editors support • Superset of ECMAScript 2015+ ✓ Is easier to learn ✓ Has syntax sugar
  110. TypeScript is: • Statically typed ✓ Has compiler ✓ Has

    better IDE/text editors support • Superset of ECMAScript 2015+ ✓ Is easier to learn ✓ Has syntax sugar
  111. TypeScript is: • Statically typed ✓ Has compiler ✓ Has

    better IDE/text editors support • Superset of ECMAScript ✓ Is easier to learn ✓ Has syntax sugar
  112. TypeScript is: • Statically typed ✓ Has compiler ✓ Has

    better IDE/text editors support • Superset of ECMAScript ✓ Is easier to learn ✓ Has syntax sugar
  113. TypeScript + Flux =

  114. Applications that scale

  115. In SPA we get all or nothing

  116. Client Server

  117. Client Server

  118. Client Server GET / GET * loop

  119. Client Server GET / GET * loop Running JavaScript

  120. Client Server GET / GET * loop GET * loop

  121. Client Server GET / GET * loop GET * loop

  122. None
  123. None
  124. None
  125. None
  126. None
  127. Performance

  128. Initial load performance

  129. In loading a SPA • DNS resolution • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  130. In loading a SPA • DNS lookup • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  131. In loading a SPA • DNS lookup • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  132. In loading a SPA • DNS lookup • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  133. In loading a SPA • DNS lookup • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  134. In loading a SPA • DNS lookup • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  135. In loading a SPA • DNS lookup • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  136. In loading a SPA • DNS lookup • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  137. Where we can do something?

  138. In loading a SPA • DNS resolution • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  139. In loading a SPA • DNS resolution • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  140. In loading a SPA • DNS resolution • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns • Minification • Concatenation • Sprites • HTTP 2.0
  141. In loading a SPA • DNS resolution • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns • Minification • Concatenation • Sprites • HTTP 2.0 • Deferred script parsing
  142. In loading a SPA • DNS resolution • Establishment of

    a TCP connection • Establishment of secure connection • Fetching all the resources • Blocking scripts • Parsing all the JavaScript files • Bootstrapping the application • Rendering the content Slowdowns
  143. None
  144. What if… • Make a request to the server with

    our SPA URL • Server: • Parses the URL • Invokes the JavaScript associated to it • Returns the markup generated by the JavaScript • Browser adds event listeners to the server generated DOM
  145. Client Server

  146. Client Server

  147. Client Server GET / GET * loop

  148. Client Server GET / GET * loop Running JavaScript

  149. Client Server GET / GET * loop

  150. Server-Side Rendering

  151. Server-side rendering • Render our single-page application on the server

    • SEO friendly applications • Improved user experience
  152. We can use server-side rendering today!

  153. None
  154. None
  155. Resources • Flux Overview • Flux in Depth. Overview and

    Components. • Flux in Depth. Store and Network Communication. • TypeScript • Angular 2 • React server-side rendering • Angular 2 server-side rendering
  156. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com