Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

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

  • Inicia sesión para ver los comentarios

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

×