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
   

   View Slide

2. Minko Gechev
   github.com/mgechev
   twitter.com/mgechev
   {
   "job": "Freelancer",
   "hobbies": [
   "open source",
   "blogging",
   "teaching",
   "sports"
   ],
   "communityEvents": [
   "SofiaJS",
   "BeerJS Sofia"
   ]
   }
   

   View Slide

3. Challenges in the modern web
   

   View Slide

4. Agenda
   • Title 1
   • Subtitle 1
   • Subtitle 2
   • Title 2
   • Subtitle 1
   Lets take a look back…
   

   View Slide

5. When IE6 was bleeding edge…
   

   View Slide

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

   View Slide

7. Everything was simple…
   

   View Slide

8. Client Server
   

   View Slide

9. Client Server
   

   View Slide

10. Client Server
    GET /
    

    View Slide

11. Client Server
    GET /
    

    View Slide

12. Client Server
    GET /
    GET *
    loop
    

    View Slide

13. Client Server
    GET /
    GET *
    loop
    

    View Slide

14. Caption
    …the role of JavaScript was limited
    

    View Slide

15. View Slide

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

    View Slide

17. View Slide

18. View Slide

19. View Slide

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));
    

    View Slide

21. View Slide

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));
    

    View Slide

23. File.extension
    …you know nothing Jon Snow
    

    View Slide

24. View Slide

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));
    

    View Slide

26. View Slide

27. View Slide

28. “Scaling” this way simply
    doesn’t work…
    

    View Slide

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

    View Slide

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.
    

    View Slide

31. View Slide

32. – Martin Fowler
    “…decisions that are hard to change…”
    Architecture
    

    View Slide

33. Scalable JavaScript Application Architecture
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. Decoupled modules, which
    communicate through an
    event bus
    

    View Slide

43. …a bit later
    

    View Slide

44. View Slide

45. followed by the MV* fashion
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

52. Most frameworks were
    following the same model
    

    View Slide

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

    View Slide

54. Controller
    Model
    View
    

    View Slide

55. Controller
    Model
    View
    Creates
    

    View Slide

56. Controller
    Model
    View
    Delegates
    

    View Slide

57. Controller
    Model
    View
    Manipulates
    

    View Slide

58. Controller
    Model
    View
    Notifies
    

    View Slide

59. …and a bit later…
    

    View Slide

60. Controller
    Model
    View
    

    View Slide

61. Controller
    Model
    View
    

    View Slide

62. However, they kept the same
    base…
    

    View Slide

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
    

    View Slide

64. View Slide

65. this.name  =  name;
    

    View Slide

66. Update the user badge!
    

    View Slide

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

    View Slide

68. Notify all other users!
    

    View Slide

69. this.name  =  name;  
    $(‘#badge  .name’)  
       .html(name);  
    foreach  u  in  users  {  
       u.send({

           type:  ‘change’,

           name:  name  
       });  
    }
    

    View Slide

70. Update the database!
    

    View Slide

71. View Slide

72. this.name  =  name;  
    foreach  o  in  obs  {  
       o.update(name);

    }
    

    View Slide

73. which has two big pitfalls…
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. Tangled data-flow
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. Complex mutable state
    

    View Slide

89. Flux came out!
    

    View Slide

90. View Slide

91. Flux does:
    • Enforces the uni-directional data-flow
    • Keeps the UI as stateless as possible
    

    View Slide

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
    

    View Slide

93. But flux is not the
    silver bullet
    

    View Slide

94. View Slide

95. JavaScript has some good parts…
    

    View Slide

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

    View Slide

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

    View Slide

98. Easy to learn
    

    View Slide

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

    View Slide

100. Agenda
     • Title 1
     • Subtitle 1
     • Subtitle 2
     • Title 2
     • Subtitle 1
     Compiler to take care of us
     

     View Slide

101. Requirements
     • Statically typed
     • More powerful syntax with similar semantics
     • Possibly superset of JavaScript
     

     View Slide

102. Adding new language in the
     browser is impossible
     

     View Slide

103. Our Awesome
     Language
     JavaScript
     

     View Slide

104. Our Awesome
     Language
     JavaScript
     Transpiler
     

     View Slide

105. Adding new language in the
     browser is impossible
     

     View Slide

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
     

     View Slide

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
     

     View Slide

108. TypeScript is:
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

113. TypeScript + Flux =
     

     View Slide

114. Applications that scale
     

     View Slide

115. In SPA we get all or nothing
     

     View Slide

116. Client Server
     

     View Slide

117. Client Server
     

     View Slide

118. Client Server
     GET /
     GET *
     loop
     

     View Slide

119. Client Server
     GET /
     GET *
     loop
     Running JavaScript
     

     View Slide

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

     View Slide

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

     View Slide

122. View Slide

123. View Slide

124. View Slide

125. View Slide

126. View Slide

127. Performance
     

     View Slide

128. Initial load performance
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

137. Where we can do
     something?
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

143. View Slide

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
     

     View Slide

145. Client Server
     

     View Slide

146. Client Server
     

     View Slide

147. Client Server
     GET /
     GET *
     loop
     

     View Slide

148. Client Server
     GET /
     GET *
     loop
     Running JavaScript
     

     View Slide

149. Client Server
     GET /
     GET *
     loop
     

     View Slide

150. Server-Side Rendering
     

     View Slide

151. Server-side rendering
     • Render our single-page application on the server
     • SEO friendly applications
     • Improved user experience
     

     View Slide

152. We can use server-side
     rendering today!
     

     View Slide

153. View Slide

154. View Slide

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
     

     View Slide

156. Thank you!
     github.com/mgechev
     twitter.com/mgechev
     blog.mgechev.com
     

     View Slide