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

Warp-Beam-speedat initial load

Speeding up your JavaScript application

David Amend● JavaScript & Java Frontend

Developer &Architect

● @Dab-Bank: Angular.js, BPMN, OSGi

[email protected]

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


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, ...


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


PhaseAJAX-calls

TemplateRendering

Loading Screen

Replace HTML

User sees page in one shot

1. 2. 3. 4.

Worst Case Flow

LoadHTML

LoadAssets


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



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

https://github.com/ericclemmons/grunt-angular-templates






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



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


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


<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



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>


<e:div>{{pizza.price}}</e:div>


<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

http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html

http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html

http://www.youtube.com/watch?v=sGpHDHAIpYE

http://www.youtube.com/watch?v=sGpHDHAIpYE

https://github.com/davglass/nodejs-yui3

https://github.com/davglass/nodejs-yui3

http://angularjs.org/

http://angularjs.org/

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





http://sebgoo.blogspot.de/2013/05/angularjs-and-seo-pre-render-content-on.html

http://sebgoo.blogspot.de/2013/05/angularjs-and-seo-pre-render-content-on.html



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

http://www.youtube.com/watch?v=BgXjJ3aDwtc

http://www.youtube.com/watch?v=BgXjJ3aDwtc

http://es.slideshare.net/sandrosonntag/goodby-server-hello-client

http://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



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


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



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://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?●●

http://stackoverflow.com/questions/13103050/angularjs-client-side-data-binding-and-server-side-templating

http://stackoverflow.com/questions/13103050/angularjs-client-side-data-binding-and-server-side-templating



http://ziade.org/2013/02/13/fun-with-angularjs-amp-cornice/

http://ziade.org/2013/02/13/fun-with-angularjs-amp-cornice/

http://blog.thousandeyes.com/improving-end-user-experience-with-angularjs/

http://blog.thousandeyes.com/improving-end-user-experience-with-angularjs/

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)

http://docs.angularjs.org/api/ng.directive:script

http://docs.angularjs.org/api/ng.directive:script





https://github.com/wmluke/grunt-inline-angular-templates

https://github.com/wmluke/grunt-inline-angular-templates



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







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

Software

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