Single-Page Applications: Challenges

Challenges in the front-end application development.

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

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
16. JavaScript’s initial purpose document.body.style.backgroundImage = 'url(unicorn.gif)';
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));
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
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));
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.
32. – Martin Fowler “…decisions that are hard to change…” Architecture
33. Scalable JavaScript Application Architecture
42. Decoupled modules, which communicate through an event bus
43. …a bit later
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
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!
72. this.name  =  name;   foreach  o  in  obs  {      o.update(name);
 }
73. which has two big pitfalls…
84. Tangled data-flow
88. Complex mutable state
89. Flux came out!
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
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
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
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!
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