Download as PDF, PPTX
![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>](https://image.slidesharecdn.com/templating-140525052521-phpapp02/75/Client-vs-Server-Templating-Speed-up-initial-load-for-SPA-with-Angular-as-an-example-23-2048.jpg)
Uploaded byDavid Amend
Client vs Server Templating: Speed up initial load for SPA with Angular as an example
The document discusses various web-rendering techniques and architectures, comparing client-side and server-side rendering approaches, emphasizing current trends and future technologies. It covers performance optimization strategies, such as lazy loading, asynchronous content loading, and template rendering, while also exploring tools like Angular.js and various JS frameworks. The aim is to enhance user experience while managing complexity in web application development.
More Related Content
Similar to Client vs Server Templating: Speed up initial load for SPA with Angular as an example
Client vs Server Templating: Speed up initial load for SPA with Angular as an example
- 1. Warp-Beam-speed at initial load Speedingup your JavaScript application
- 2. DavidAmend ● JavaScript &Java Frontend Developer &Architect ● @Dab-Bank: Angular.js, BPMN, OSGi David.Amend@it-amend.de That’s me
- 3.
- 4. Topics 1. History ofWeb-Rendering Techniques 2. The Application Workflow 3. Decision to the best architecture
- 5. Process of Rendering-Technologies Static HTML CGI Scripts Web-specific 19951989C,Shell,CGI-Scripts, Phyton VB-Scripts, Perl ASP, PHP, Ruby, ColdFusion
- 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. Process of Rendering-Technologies TodayFuture ? ?... ● 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.
- 9. Server or Clientrendering ?
- 10.
- 11.
- 12. UI Session-State onServer View-State Definitions Client Server Browser Clicked On Button Return HTML & pass JavaScript to be executed Expensive - Resources Less Control over User-Experience
- 13.
- 14. Worst Case Flow Load HTML Load Assets Framework Init/Bootstrap Phase AJAX-calls Template Rendering LoadingScreen Replace HTML User sees page in one shot 1. 2. 3. 4.
- 15. Worst Case Flow Load HTML Load Assets Framework Init/Bootstrap Phase AJAX-calls Template Rendering LoadingScreen Replace HTML 1. 2. 3. 4.Possible Flicking a) b)
- 16. Hack the intializationprocess ● Minify ● Cache ● Load assets asynchronously ● Load content asynchronously ● Reducing Requests Faster file loading
- 17. Async Loading, splittingfiles HTML Asset Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Async(e.g. module loader) Apply Binding JS Templ ate HTML Asset Asset
- 18. Client-Only, Single file, Load HTML Load Assets Framework Bootstrap Deferred Ajax& RenderTemplate Rendering Concat & precomile to single file Apply Binding
- 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. Reducing Requests or Load Asynchronously Fasterfile loading
- 21.
- 22. Lazy Template Rendering <divng-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. 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>
- 25. 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
- 26. 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
- 27. How to combineInitial HTML with deferred template Rendering ? ● Share Model Information ● Share HTML within template ● SEO ( Disabled JS support)
- 28. Mixture of Client-ServerCode <h1>{{pizza.title}}</h1> #{for pizza:pizzas} <li ng-repeat={{pizza}}> #{pizza.name} <li> #{for:end} ● Hard to understand ● No separation
- 29. Complete Separation index.vm, Serverside: <h1>#{pizza.title}</h1> ... index.html, Client Side: <h1>{{pizza.title}}</h1> … ● Separation ● Duplication
- 30. Share model Information: Savein 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
- 31. Share model Information: SeparateService 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
- 32. Share model Information: SeparateService 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
- 33. Render Client-Template before init-phase Load HTML Load Assets Framework Bootstrap Deferred Ajax& RenderTemplate Rendering Apply Binding Usage of ng-init
- 34. Share init HTMLwithin template
- 35. Reuse of HTML withintemplate at Initial State Situation Template Engine not rendered, yet <div>{{pizza.price}}</div>
- 36. Reuse of HTML withintemplate at Initial State Situation Template Engine not rendered, yet <e:div>{{pizza.price}}</e:div>
- 37. Reuse of HTML withintemplate at Initial State Situation Template Engine not rendered, yet <div ng-model={{pizza.price}}></div> ● Reuse of html within the template for initial state
- 38.
- 39.
- 40.
- 41. Considerations ● Knownledge inteam ○ 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
- 42. Client-Server-Hybrid: Same Template Framework ClientWebServer Template Files Initial Request HTML ● e.g. Mustache Google Closure, Dual,... ● Share template files between Client & Server
- 43. Client-Server-Hybrid: Render JS onServer 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
- 44. 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
- 45. Hybrid:Executed page inJavaScript 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
- 46.
- 48.
- 50. 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
- 51. Server or Clientrendering ? 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)
- 52. ● Authentication-Information Request ●i18n Request
- 53. Client Only “Server isOverkill”, Tim Oxley http://www.youtube.com/watch?v=BgXjJ3aDwtc “Goodbye Server, Welcome Client”, Sandro Sonntag http://es.slideshare.net/sandrosonntag/goodby-server-hello-client
- 54. Performance Templating Depending onApp ● 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
- 55. Acceptance Criteria ● Peformance ●Component model Goals for the View-Part
- 56. Software Quality/Features ● Databinding ● Standard supports ● Internationalization ● SEO ● Long term ● Reduce duplication ● Less Development Time Goals for the View-Part
- 57. Want to hide/wrap/ignore theWeb? Code Generation Too Abstract Layering Easy extendable vs. Easy combination of Frameworks Easy Customizeable Performance Optimization? Angular.js Primary Nice Entry Points
- 58. Bad: Different modelconcepts 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
- 59.
- 60. Angular.js possibilities <div ng-init=”pizzaModel”> <h2ng-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>
- 61. Combination of View-Rendering DeclarativeImperative LogicViewLogic Object- Oriented XML,XSLTHard to merge Component-Frameworks Sencha, Dojo, jQueryUI Composition Fits to HTML/DOM Always Code-Generation ViewLogic
- 62.
- 63. Drag & Drop/ Generation Drag-&Drop- Designer Wavemaker, Oracle Forms...
- 64. UI Session-State onServer, 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
- 65. Imperative vs. Declarative if(condition){ $(‘#pizzaHeader’).hide() }else{ $(‘#pizzaHeader’).show(); } vs. <divng-hide=”condition”>content</div>
- 66. Performance: Flow ofRendering Load HTML Load Assets Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Apply Binding Angular.js does Lazy Loading Template Rendering Template Rendering Template Rendering
- 67. Types of ViewDefinition
- 68. 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
- 69. Load All InOne Shot/Request vs. Lazy/Async Modularized Loading e.g. jQuery Mobile http://ify.io/lazy-loading-in-angularjs/
- 70. Declarative Full Conditions, Loop, Logic Support Logic-FreeTemplates vs. Less as possible e.g. Handlebars Read-Logic only
- 71. 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? ● ●
- 72. 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)
- 73.
- 76. Links Lazy Code Loading http://ify.io/lazy-loading-in-angularjs/ Angular.jsPerformance 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