Your SlideShare is downloading. ×
Client vs Server Templating: Speed up initial load for SPA with Angular as an example
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,804

Published on

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

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

No Downloads
Views
Total Views
4,804
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
31
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 3. Client- Server- VS http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/ Better User-Experience? View-Rendering
  • 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
  • 8. “MVC”-Code Architectures
  • 9. Server or Client rendering ?
  • 10. Client-Centric Business- Logic Client Server Render- Engine DB Request Response
  • 11. Shared Definition http://onehungrymind.com/angularjs-dynamic-templates/ Business- Logic Client Server Render- Engine Shared- Definition DB DefinesDefines I18n, View-Templates
  • 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. Flow of Page-Initialization Load HTML Load Assets Framework Init/Bootstrap Phase AJAX-calls Template Rendering Replace HTML 1. 2. 3. 4.
  • 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
  • 21. Situation Public Private Slow-Js-Rendering Non-Blocking
  • 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>
  • 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. 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. How to combine Initial HTML with deferred template Rendering ? ● Share Model Information ● Share HTML within template ● SEO ( Disabled JS support)
  • 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. Complete Separation index.vm, Server side: <h1>#{pizza.title}</h1> ... index.html, Client Side: <h1>{{pizza.title}}</h1> … ● Separation ● Duplication
  • 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. 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. 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. Render Client-Template before init-phase Load HTML Load Assets Framework Bootstrap Deferred Ajax & RenderTemplate Rendering Apply Binding Usage of ng-init
  • 33. Share init HTML within template
  • 34. Reuse of HTML within template at Initial State Situation Template Engine not rendered, yet <div>{{pizza.price}}</div>
  • 35. Reuse of HTML within template at Initial State Situation Template Engine not rendered, yet <e:div>{{pizza.price}}</e:div>
  • 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. Client or Server-Side Rendering revised
  • 38. Client-Only Server Client Data-Service JSON, XML
  • 39. Client-Server-Hybrid http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-
  • 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. 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. 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. 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. 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. Any Questions ?
  • 46. Additonal Slides
  • 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. 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. ● Authentication-Information Request ● i18n Request
  • 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. 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. Acceptance Criteria ● Peformance ● Component model Goals for the View-Part
  • 53. Software Quality/Features ● Data binding ● Standard supports ● Internationalization ● SEO ● Long term ● Reduce duplication ● Less Development Time Goals for the View-Part
  • 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. 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. Techniques & Webtechnologies
  • 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. 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. Types Of View- Definition
  • 60. Drag & Drop / Generation Drag-&Drop- Designer Wavemaker, Oracle Forms...
  • 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. Imperative vs. Declarative if(condition){ $(‘#pizzaHeader’).hide() }else{ $(‘#pizzaHeader’).show(); } vs. <div ng-hide=”condition”>content</div>
  • 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. Types of View Definition
  • 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. Load All In One Shot/Request vs. Lazy/Async Modularized Loading e.g. jQuery Mobile http://ify.io/lazy-loading-in-angularjs/
  • 67. Declarative Full Conditions, Loop, Logic Support Logic-Free Templates vs. Less as possible e.g. Handlebars Read-Logic only
  • 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. 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. User Experience matters http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.
  • 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

×