client vs server templating: speed up initial load for spa with angular as an example
DESCRIPTION
Speed up initial load for SPA with Angular as an example. Server vs Client Templating View Rendering, David AmendTRANSCRIPT
Warp-Beam-speedat initial load
Speeding up your JavaScript application
David Amend● JavaScript & Java Frontend
Developer &Architect
● @Dab-Bank: Angular.js, BPMN, OSGi
That’s me
Client- Server-VS
http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/
Better User-Experience?
View-Rendering
Topics
1. History of Web-Rendering Techniques2. The Application Workflow3. Decision to the best architecture
Process of Rendering-Technologies
Static HTML
CGI Scripts
Web-specific
19951989 C,Shell,CGI-Scripts,Phyton VB-Scripts, Perl ASP, PHP, Ruby,
ColdFusion
Process of Rendering-Technologies
Web-plugins Web-FrameworksServer-Driven
~20101998
Applet/Flash, ActiveX, XAML
Ruby on Rails, .Net, Wicket, GWT
Node.js based“JS Everywhere”
Express, Derby, Meteor, OPA, ...
Process of Rendering-Technologies
Today Future?
?...
● BeforeFramework Comparison matters→ Richness & stability of Frameworks
● NowTechnique & Architecture matters→ Surpass limitations
● FutureWebtechnologies get more important, HTML-5, ECMA-Script 7→ Optimized & Fast Development
“MVC”-Code Architectures
Server or Client rendering ?
Client-Centric
Business-Logic
Client Server
Render-Engine
DB
Request
Response
Shared Definition
http://onehungrymind.com/angularjs-dynamic-templates/
Business-Logic
Client Server
Render-Engine
Shared-Definition
DB
DefinesDefines
I18n, View-Templates
UI Session-State on Server
View-StateDefinitions
Client Server
Browser
Clicked On Button
Return HTML & pass JavaScript to be executed
Expensive- Resources
Less Control over User-Experience
Flow of Page-Initialization
LoadHTML
LoadAssets
FrameworkInit/Bootstrap
PhaseAJAX-calls
TemplateRendering
Replace HTML
1. 2. 3. 4.
Worst Case Flow
LoadHTML
LoadAssets
FrameworkInit/Bootstrap
PhaseAJAX-calls
TemplateRendering
Loading Screen
Replace HTML
User sees page in one shot
1. 2. 3. 4.
Worst Case Flow
LoadHTML
LoadAssets
FrameworkInit/Bootstrap
PhaseAJAX-calls
TemplateRendering
Loading Screen
Replace HTML
1. 2. 3. 4.Possible Flicking
a)b)
Hack the intialization process
● Minify● Cache● Load assets asynchronously● Load content asynchronously● Reducing Requests
Faster file loading
Async Loading, splitting files
HTML
Asset
FrameworkBootstrap Deferred
Ajax & RenderTemplate
Rendering
Async(e.g. module loader)
Apply BindingJS Templ
ate
HTML AssetAsset
Client-Only, Single file,
LoadHTML
LoadAssets
FrameworkBootstrap Deferred
Ajax & RenderTemplate
Rendering
Concat & precomile to single file
Apply Binding
Combination of ng-init & UIRouter
Grunt.js build:
● Precompilehttps://github.com/ericclemmons/grunt-angular-templates
https://github.com/karma-runner/karma-ng-html2js-preprocessor
https://github.com/karlgoldstein/grunt-html2js
● Concat files
Reducing Requestsor
Load Asynchronously
Faster file loading
Situation
Public Private
Slow-Js-RenderingNon-Blocking
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
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>
ng-cloak & ng-hide
● ng-cloakDisables lazy-rendering for all children nodes
● ng-hideReplacing of initial HTMLwith deferred template-rendered
● No Flicking
Display Initial HTML→ Performance Boost
LoadHTML
LoadAssets
FrameworkBootstrap Deferred
Ajax & RenderTemplate
Rendering
Apply Binding
● Load assets after HTML is loaded● Will not freeze UI
How to combine Initial HTML withdeferred template Rendering ?
● Share Model Information● Share HTML within template
● SEO ( Disabled JS support)
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
Complete Separation
index.vm, Server side:<h1>#{pizza.title}</h1> ...
index.html, Client Side:
<h1>{{pizza.title}}</h1> …● Separation● Duplication
Share model Information:Save in variable
http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/
var model = #{pizzas.toJson()}
● Works with all frameworks● Simple● Need to touch logic code
Share model Information:Separate Service call
http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/
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
Share model Information:Separate Service call
http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/
<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
Render Client-Template before init-phase
LoadHTML
LoadAssets
FrameworkBootstrap Deferred
Ajax & RenderTemplate
Rendering
Apply Binding
Usage of ng-init
Share init HTML within template
Reuse of HTML within template at Initial StateSituationTemplate Engine not rendered, yet
<div>{{pizza.price}}</div>
Reuse of HTML within template at Initial StateSituationTemplate Engine not rendered, yet
<e:div>{{pizza.price}}</e:div>
Reuse of HTML within template at Initial StateSituationTemplate Engine not rendered, yet
<div ng-model={{pizza.price}}></div>
● Reuse of html within the template for initial state
Client or Server-Side Rendering
revised
Client-Only
Server
Client
Data-ServiceJSON, XML
Client-Server-Hybrid
http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-talk/
Considerations
● Knownledge in team○ Java or Web-Developers?
● Context of Webapplication○ Webpage behind Login?
■ Prefetch & Initialize○ Only used in company or
■ Performance & browser supportcan be ignored
○ Public
● Save Money○ Do not do overegineering
Client-Server-Hybrid:Same Template Framework
Client WebServerTemplate Files
Initial Request
HTML
● e.g. MustacheGoogle Closure, Dual,...
● Share template files between Client & Server
Client-Server-Hybrid:Render JS on Server
Client
RenderingEngine
WebServerInitial Request
HTML-String
Identical Client Code
RegisterBindings
● Independant of template engine● No extra development effort● Could be Dependant on Browser Node.js
Lessons learned
● Twitterhttp://engineering.twitter.com/2012/05/improving-performance-on-twittercom.htmlhttp://www.youtube.com/watch?v=sGpHDHAIpYE
● Yahoohttps://github.com/davglass/nodejs-yui3
● Angular.js 2.0: Announced http://angularjs.org/
●
● Google, Closure Tools● Google Apps Script
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/spikebrehmhttp://sebgoo.blogspot.de/2013/05/angularjs-and-seo-pre-render-content-on.html
https://speakerdeck.com/seanami/bridging-the-client-side-server-side-divide
Any Questions ?
Additonal Slides
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
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)
● Authentication-Information Request● i18n Request
Client Only
“Server is Overkill”, Tim Oxley http://www.youtube.com/watch?v=BgXjJ3aDwtc
“Goodbye Server, Welcome Client”, Sandro Sonntaghttp://es.slideshare.net/sandrosonntag/goodby-server-hello-client
Performance Templating
Depending on App● Profiling Tools
https://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
Acceptance Criteria
● Peformance● Component model
Goals for the View-Part
Software Quality/Features
● Data binding● Standard supports● Internationalization● SEO● Long term● Reduce duplication● Less Development Time
Goals for the View-Part
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
Bad: Different model concepts
LoadHTML
LoadAssets
FrameworkBootstrap Deferred
Ajax & RenderTemplate
Rendering
Apply Binding
<script src=”#{locale}.js>
● 3 Different ways to save i18n
Server-Sidetemplating
static asset.js I18n: within JSON data
Techniques & Webtechnologies
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>
Combination of View-Rendering
DeclarativeImperative
Logic ViewLogicObject- Oriented
XML,XSLT Hard to merge Component-Frameworks
Sencha, Dojo, jQueryUI
CompositionFits to HTML/DOM
Always Code-Generation
ViewLogic
Types Of View-Definition
Drag & Drop / Generation
Drag-&Drop-Designer
Wavemaker, Oracle Forms...
UI Session-State on Server, Client-Renderer
http://onehungrymind.com/angularjs-dynamic-templates/
View-StateDefinitions
Client Server
Render-Engine
Clicked On Button
Trigger Rendering of Window
e.g. GWT(Vaadin), Metawidget,...
Expensive- Resources
Imperative vs. Declarative
if(condition){ $(‘#pizzaHeader’).hide()}else{ $(‘#pizzaHeader’).show();}
vs. <div ng-hide=”condition”>content</div>
Performance: Flow of Rendering
LoadHTML
LoadAssets
FrameworkBootstrap Deferred
Ajax & RenderTemplate
Rendering
Apply Binding
Angular.js does Lazy Loading
TemplateRendering
TemplateRendering
TemplateRendering
Types of View Definition
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
Load All In One Shot/Requestvs.
Lazy/Async Modularized Loading
e.g. jQuery Mobile
http://ify.io/lazy-loading-in-angularjs/
Declarative
Full Conditions, Loop, Logic Support
Logic-Free Templatesvs.
Less as possible
e.g. HandlebarsRead-Logic only
Templatinghttp://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?●●
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)
User Experience matters
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Links
Lazy Code Loadinghttp://ify.io/lazy-loading-in-angularjs/
Angular.js Performance improvementhttp://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