Client vs Server Templating: Speed up initial load for SPA with Angular as an example
15 likes11,684 views
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.
![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/85/Client-vs-Server-Templating-Speed-up-initial-load-for-SPA-with-Angular-as-an-example-23-320.jpg)
Client vs Server Templating: Speed up initial load for SPA with Angular as an example
- 1. Warp-Beam-speed at initial load Speeding up your JavaScript application
- 2. DavidAmend ● JavaScript & Java Frontend Developer &Architect ● @Dab-Bank: Angular.js, BPMN, OSGi David.Amend@it-amend.de That’s me
- 4. Topics 1. History of Web-Rendering Techniques 2. The Application Workflow 3. Decision to the best architecture
- 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. 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 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
- 9. Server or Client rendering ?
- 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
- 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. 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. Hack the intialization process ● Minify ● Cache ● Load assets asynchronously ● Load content asynchronously ● Reducing Requests Faster file loading
- 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. 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 Faster file loading
- 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. 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 combine Initial HTML with deferred template Rendering ? ● Share Model Information ● Share HTML within template ● SEO ( Disabled JS support)
- 28. 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
- 29. Complete Separation index.vm, Server side: <h1>#{pizza.title}</h1> ... index.html, Client Side: <h1>{{pizza.title}}</h1> … ● Separation ● Duplication
- 30. 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
- 31. 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
- 32. 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
- 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 HTML within template
- 35. Reuse of HTML within template at Initial State Situation Template Engine not rendered, yet <div>{{pizza.price}}</div>
- 36. Reuse of HTML within template at Initial State Situation Template Engine not rendered, yet <e:div>{{pizza.price}}</e:div>
- 37. 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
- 41. 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
- 42. 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
- 43. 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
- 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 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
- 46. Any Questions ?
- 48. Additonal Slides
- 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 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)
- 52. ● Authentication-Information Request ● i18n Request
- 53. 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
- 54. 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
- 55. Acceptance Criteria ● Peformance ● Component model Goals for the View-Part
- 56. Software Quality/Features ● Data binding ● Standard supports ● Internationalization ● SEO ● Long term ● Reduce duplication ● Less Development Time Goals for the View-Part
- 57. 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
- 58. 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
- 60. 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>
- 61. 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
- 63. Drag & Drop / Generation Drag-&Drop- Designer Wavemaker, Oracle Forms...
- 64. 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
- 65. Imperative vs. Declarative if(condition){ $(‘#pizzaHeader’).hide() }else{ $(‘#pizzaHeader’).show(); } vs. <div ng-hide=”condition”>content</div>
- 66. 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
- 67. Types of View Definition
- 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 In One 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-Free Templates 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)
- 76. 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