Client vs Server Templating: Speed up initial load for SPA with Angular as an example

9,707 views

Published on

Speed up initial load for SPA with Angular as an example.
Server vs Client Templating View Rendering, David Amend

Published in: Software, Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,707
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
53
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Client vs Server Templating: Speed up initial load for SPA with Angular as an example

  1. 1. Warp-Beam-speed at initial load Speeding up your JavaScript application
  2. 2. DavidAmend ● JavaScript & Java Frontend Developer &Architect ● @Dab-Bank: Angular.js, BPMN, OSGi David.Amend@it-amend.de That’s me
  3. 3. Client- Server- VS http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/ Better User-Experience? View-Rendering
  4. 4. Topics 1. History of Web-Rendering Techniques 2. The Application Workflow 3. Decision to the best architecture
  5. 5. Process of Rendering-Technologies Static HTML CGI Scripts Web-specific 19951989 C,Shell,CGI-Scripts, Phyton VB-Scripts, Perl ASP, PHP, Ruby, ColdFusion
  6. 6. Process of Rendering-Technologies Web-plugins Web-Frameworks Server-Driven ~20101998 Applet/Flash, ActiveX, XAML Ruby on Rails, . Net, Wicket, GWT Node.js based “JS Everywhere” Express, Derby, Meteor, OPA, ...
  7. 7. Process of Rendering-Technologies Today Future ? ?... ● Before Framework Comparison matters → Richness & stability of Frameworks ● Now Technique & Architecture matters → Surpass limitations ● Future Webtechnologies get more important, HTML-5, ECMA-Script 7 → Optimized & Fast Development
  8. 8. “MVC”-Code Architectures
  9. 9. Server or Client rendering ?
  10. 10. Client-Centric Business- Logic Client Server Render- Engine DB Request Response
  11. 11. Shared Definition http://onehungrymind.com/angularjs-dynamic-templates/ Business- Logic Client Server Render- Engine Shared- Definition DB DefinesDefines I18n, View-Templates
  12. 12. UI Session-State on Server View-State Definitions Client Server Browser Clicked On Button Return HTML & pass JavaScript to be executed Expensive - Resources Less Control over User-Experience
  13. 13. Flow of Page-Initialization Load HTML Load Assets Framework Init/Bootstrap Phase AJAX-calls Template Rendering Replace HTML 1. 2. 3. 4.
  14. 14. Worst Case Flow Load HTML Load Assets Framework Init/Bootstrap Phase AJAX-calls Template Rendering Loading Screen Replace HTML User sees page in one shot 1. 2. 3. 4.
  15. 15. Worst Case Flow Load HTML Load Assets Framework Init/Bootstrap Phase AJAX-calls Template Rendering Loading Screen Replace HTML 1. 2. 3. 4.Possible Flicking a) b)
  16. 16. Hack the intialization process ● Minify ● Cache ● Load assets asynchronously ● Load content asynchronously ● Reducing Requests Faster file loading
  17. 17. Async Loading, splitting files HTML Asset Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Async(e.g. module loader) Apply Binding JS Templ ate HTML Asset Asset
  18. 18. Client-Only, Single file, Load HTML Load Assets Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Concat & precomile to single file Apply Binding
  19. 19. Combination of ng-init & UIRouter Grunt.js build: ● Precompile https://github.com/ericclemmons/grunt-angular-templates https://github.com/karma-runner/karma-ng-html2js-preprocessor https://github.com/karlgoldstein/grunt-html2js ● Concat files
  20. 20. Reducing Requests or Load Asynchronously Faster file loading
  21. 21. Situation Public Private Slow-Js-Rendering Non-Blocking
  22. 22. Lazy Template Rendering <div ng-template=”pizzaTemplate”> <h2 ng-model=”{{i18n.header}}></h2> <ul> <li ng-repeat=”pizza in pizzas”> </ul> </div> ● h2 and li render deferred ● Render when data are available, independent ● Render when data changed: Databinding
  23. 23. Less Requests & Non Blocking UI <html> <head> <script>/* Inline Angular.js asset*/</script> <script>/* Inline async asset loader*/</script> $script([ 'js/app.js'], function() { angular.bootstrap(document, ['myApp']); }); </head> <body> <div ng-view></div> </body> </html>
  24. 24. ng-cloak & ng-hide ● ng-cloak Disables lazy-rendering for all children nodes ● ng-hide Replacing of initial HTML with deferred template-rendered ● No Flicking
  25. 25. Display Initial HTML → Performance Boost Load HTML Load Assets Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Apply Binding ● Load assets after HTML is loaded ● Will not freeze UI
  26. 26. How to combine Initial HTML with deferred template Rendering ? ● Share Model Information ● Share HTML within template ● SEO ( Disabled JS support)
  27. 27. Mixture of Client-Server Code <h1>{{pizza.title}}</h1> #{for pizza:pizzas} <li ng-repeat={{pizza}}> #{pizza.name} <li> #{for:end} ● Hard to understand ● No separation
  28. 28. Complete Separation index.vm, Server side: <h1>#{pizza.title}</h1> ... index.html, Client Side: <h1>{{pizza.title}}</h1> … ● Separation ● Duplication
  29. 29. Share model Information: Save in variable http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to- var model = #{pizzas.toJson()} ● Works with all frameworks ● Simple ● Need to touch logic code
  30. 30. Share model Information: Separate Service call http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to- app.get(‘pizzas’), function(request, response){ $scope.pizzas = response; } ● Clear separation of Data ● No server-side code in client-code ● Additional service call ● Blocking UI
  31. 31. Share model Information: Separate Service call http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to- <div ng-init=’#{pizzas.toJSObject()}’> {{pizza.header}} </div> ● No need to touch logic ● Executed before Angular.js Bootstrap ● Minimum Server-Templating needed ● Needs Angular assets to be loaded ● Angular.js specific
  32. 32. Render Client-Template before init-phase Load HTML Load Assets Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Apply Binding Usage of ng-init
  33. 33. Share init HTML within template
  34. 34. Reuse of HTML within template at Initial State Situation Template Engine not rendered, yet <div>{{pizza.price}}</div>
  35. 35. Reuse of HTML within template at Initial State Situation Template Engine not rendered, yet <e:div>{{pizza.price}}</e:div>
  36. 36. Reuse of HTML within template at Initial State Situation Template Engine not rendered, yet <div ng-model={{pizza.price}}></div> ● Reuse of html within the template for initial state
  37. 37. Client or Server-Side Rendering revised
  38. 38. Client-Only Server Client Data-Service JSON, XML
  39. 39. Client-Server-Hybrid http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-
  40. 40. Considerations ● Knownledge in team ○ Java or Web-Developers? ● Context of Webapplication ○ Webpage behind Login? ■ Prefetch & Initialize ○ Only used in company or ■ Performance & browser support can be ignored ○ Public ● Save Money ○ Do not do overegineering
  41. 41. Client-Server-Hybrid: Same Template Framework Client WebServer Template Files Initial Request HTML ● e.g. Mustache Google Closure, Dual,... ● Share template files between Client & Server
  42. 42. Client-Server-Hybrid: Render JS on Server Client Rendering Engine WebServer Initial Request HTML-String Identical Client Code RegisterBindings ● Independant of template engine ● No extra development effort ● Could be Dependant on Browser Node.js
  43. 43. Lessons learned ● Twitter http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html http://www.youtube.com/watch?v=sGpHDHAIpYE ● Yahoo https://github.com/davglass/nodejs-yui3 ● Angular.js 2.0: Announced http://angularjs.org/ ● ● Google, Closure Tools ● Google Apps Script
  44. 44. Hybrid:Executed page in JavaScript Environment Are in experimental state: ● GWT ● Headless browsers: PhantomJS ● Services: BromBone ● Ruby solutions ● Rendr (Backbone & Handelbars) http://de.slideshare.net/spikebrehm ● Google Scripts ● Meteor ● Mojito http://de.slideshare.net/spikebrehm http://sebgoo.blogspot.de/2013/05/angularjs-and-seo-pre-render-content-on.html https://speakerdeck.com/seanami/bridging-the-client-side-server-side-divide
  45. 45. Any Questions ?
  46. 46. Additonal Slides
  47. 47. Adoption Ways ● By Server-centric ● By Client-centric ● By complete Client-Server Separation ● By sharing same Client-Server Template API → How about i18n-texts ? ● By sharing logic between Client-Server (Validation, DataTransferObjects...) → Angular.js as an example
  48. 48. Server or Client rendering ? ClientServer Different Syntax forces separation JavaScript, XML: Reuse of code: Validation, DataTransferObjects Caching Less Money For Slow Devices Slow Network Separation ... Different Syntax forces separation SEO Initial Load is x5 faster Natural Programming for Applications: Controller&View on the Client machine Full control over Client Rich User Experience Use of Data- Services (JSON, XML)
  49. 49. ● Authentication-Information Request ● i18n Request
  50. 50. Client Only “Server is Overkill”, Tim Oxley http://www.youtube.com/watch?v=BgXjJ3aDwtc “Goodbye Server, Welcome Client”, Sandro Sonntag http://es.slideshare.net/sandrosonntag/goodby-server-hello-client
  51. 51. Performance Templating Depending on App ● Profiling Toolshttps://docs.google.com/presentation/d/1ZZfy5zKx8cYSMGoi2QzM3viI6RUEWbV6S98yTfF5i0o/edit?pli=1#slide=id.gb280e77b_099 ● Batarang, check yourself ● Bind-Once https://github.com/Pasvaz/bindonce ● Use Value by Reference http://orangevolt.blogspot.de/2013/08/superspeed-your-angularjs-apps.html?utm_source=ng-newsletter&utm_campaign=d2ddad458c- AngularJS_Newsletter_9_3_139_3_2013&utm_medium=email&utm_term=0_fa61364f13-d2ddad458c-86956513
  52. 52. Acceptance Criteria ● Peformance ● Component model Goals for the View-Part
  53. 53. Software Quality/Features ● Data binding ● Standard supports ● Internationalization ● SEO ● Long term ● Reduce duplication ● Less Development Time Goals for the View-Part
  54. 54. Want to hide/wrap/ignore the Web? Code Generation Too Abstract Layering Easy extendable vs. Easy combination of Frameworks Easy Customizeable Performance Optimization? Angular.js Primary Nice Entry Points
  55. 55. Bad: Different model concepts Load HTML Load Assets Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Apply Binding <script src=”#{locale}.js> ● 3 Different ways to save i18n Server-Side templating static asset.js I18n: within JSON data
  56. 56. Techniques & Webtechnologies
  57. 57. Angular.js possibilities <div ng-init=”pizzaModel”> <h2 ng-cloak ng-bind=”{{pizza.header}} ></h2> <img src=”loading.gif” ng-hide=”true”></img> <ul ng-hide=”{{doneLoading}}”> <li ng-repeat=”pizza in pizzas”> </ul> </div>
  58. 58. Combination of View-Rendering DeclarativeImperative Logic ViewLogic Object- Oriented XML,XSLTHard to merge Component-Frameworks Sencha, Dojo, jQueryUI Composition Fits to HTML/DOM Always Code-Generation ViewLogic
  59. 59. Types Of View- Definition
  60. 60. Drag & Drop / Generation Drag-&Drop- Designer Wavemaker, Oracle Forms...
  61. 61. UI Session-State on Server, Client- Renderer http://onehungrymind.com/angularjs-dynamic- View-State Definitions Client Server Render- Engine Clicked On Button Trigger Rendering of Window e.g. GWT(Vaadin), Metawidget,... Expensive - Resources
  62. 62. Imperative vs. Declarative if(condition){ $(‘#pizzaHeader’).hide() }else{ $(‘#pizzaHeader’).show(); } vs. <div ng-hide=”condition”>content</div>
  63. 63. Performance: Flow of Rendering Load HTML Load Assets Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Apply Binding Angular.js does Lazy Loading Template Rendering Template Rendering Template Rendering
  64. 64. Types of View Definition
  65. 65. Declarative Simple String- Replacement Bi-Directional Databindingvs. e.g. JSP, PHP, Ruby, ASP Dojo, Angular, JSF Initial state is smooth Do not fight the DOMExpensive !!! Server-Side: Expensive
  66. 66. Load All In One Shot/Request vs. Lazy/Async Modularized Loading e.g. jQuery Mobile http://ify.io/lazy-loading-in-angularjs/
  67. 67. Declarative Full Conditions, Loop, Logic Support Logic-Free Templates vs. Less as possible e.g. Handlebars Read-Logic only
  68. 68. Templating http://stackoverflow.com/questions/13103050/angularjs-client-side-data-binding-and-server-side-templating http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/ ● http://ziade.org/2013/02/13/fun-with-angularjs-amp-cornice/ ● http://blog.thousandeyes.com/improving-end-user-experience-with-angularjs/ ● 2.0v (server-side-prerendering, modularized, compile) ● ● Maintaining? ● Speed?-Initial Load ? Flicker? ● Needed? - SEO, Work without JS? ● ●
  69. 69. Templating 2nd ● http://docs.angularjs.org/api/ng.directive:script ● https://github.com/ericclemmons/grunt-angular-templates ● https://github.com/karlgoldstein/grunt-html2js ● https://github.com/wmluke/grunt-inline-angular-templates (shameless plug) http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm ● Angular magically does template rendering of the view ○ Optimization ○ Huge potential of optimization on the client side ○ Optimization of server side rendering is an illusion. ● Async, ng-cloak ● ng-bind vs. {{}} ● class usage disturbs designers ● make the DOM your friend “80% DOM, 20% logic” ( Misko Hevery) ● Load all in one shot vs load all lazy loaded ● lazy loading in the background (jquery Mobile)
  70. 70. User Experience matters http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.
  71. 71. Links Lazy Code Loading http://ify.io/lazy-loading-in-angularjs/ Angular.js Performance improvement http://orangevolt.blogspot.de/2013/08/superspeed-your-angularjs-apps.html?utm_source=ng- newsletter&utm_campaign=d2ddad458c- AngularJS_Newsletter_9_3_139_3_2013&utm_medium=email&utm_term=0_fa61364f13-d2ddad458c-86956513

×