Client vs ServerRendering

The probably most important architectural decision for your projects

Which Way To Go ?

WYSIWYG

All-In-One Product Suite

Custom Implementation

Client DrivenBest of Breeds

Decisions● Level of abstraction● Language● Architecture● Lifecycle● UI-framework● Project process

→ Rendering ?

Prefer Client- or Server-Driven ?ServerClient

Lessons learned● Facebook● Twitter● Yahoo● Angular.js 2.0● Google● Ebay● LinkedIn● Airbnb

Closure Templates

Do You Know ?

May 2013

May 2012

Feb 2013

Aug 2012

~ 2015

March 2012

April 2012

Nov 2009

David Amend● Java Web-Developer, Frontend Architecture● Backbone, Ember, Angular, Grunt.js

Interests: JavaScript, TypeScript, Triathlon-Sports

About

David.Amend@it-amend.de

ContentBasics1. From Code to UI2. Influence of Architecture

Impacts & Considerations3. Separate Render-Client5. Performance

Hybrid Solution6. Template Sharing7. View Interpreter

UI. The Final Result

→ ?

BrowserDEV

Abstraction Of Code

Abstraction● Utilities● Preprocessors● Widget-Components● Frameworks

Browser● HTML● CSS● JavaScript/DOM

○ Events○ Structure○ Business Logic

→Generates

Interpreted

ServerClient

Widget Syntax

class PageView include(“transactionPage.html”);

var l= new Layout();forEach(t : transactions){

l.add(new Widget(t.title));}

#include “transactionPage.html”

{{#each transaction}}<h3 ng-car>{{title}}</h3>

{{#each}}

Object Oriented HTML based

Which Is Preferred ?

→→→

Impact: UI On Architecture

UIChooses

MV

C

Architecture

ClientServerMixture

→→Architect

→→ UIChooses

MV

C

Architecture?→Framework

Rendering

Choice Of Rendering

Do you have the choice of Rendering ?

Client, Server… or Both

Controller

1. Server-Only UI-Generation

ClientServer

→ → No Widget-Components

Static Documents● HTML● CSS

View

Model

Server Client

Server-Centric Hybrid Lifecycles

Hybrid

Various Combinations

*

***

Request

Response

AJAX/PJAX

1.

2.1.

M

V

CM

V

C

GeneratesM

VC

Business Logic

Persistence

Model

ViewController

Single Page Application

MVP, MVVM, M*, …*

Model*

Browser

Service LayerBuild

Database

Server

Stateless

Hard Times For Decisions

Client Server

Low High

Lines Of Code

Level Of Abstraction

→

SPA: Multi Client Channel

M

V

C

Model

Desktop

M

V

C

iPhone

M

V

C

Android

M

V

C

Windows

Server

→ Reuse

Render Engine Render Engine

Render Engine Render Engine

Separation Of UI: BenefitsCreation Of Independent● Development team● Continous Integration● Deployment● Agile & Developer as DevOp● UI-First, backend API later→ Flexible Client-centric techstack

User Experience, Customziations

→ Cool, Sexy, Responsive!

Can you make it faster on my device, please ?

Server→ The exceptionClient→ The default

Which is faster ???Client or Server Rendering

Server : Client

0 : 0

Client vs. Server Bottlenecks

● Time To First Content

● UI-Responsiveness

1. HTTP traffic2. DOM is slow

Bottlenecks

→Performance Impacts1. Best hardware ?

2. Modern browser ?

DependsFaster

→ DependsFaster

→

Guaranteed Perf.

1. Best hardware?

2. Modern browser ?ServerFaster

Server→Faster

Intermediate Result

Server : Client

1 : 0

Time To First Content2. Bootstrap Count→ WebServer: Once→ Browser: At Every Visit

3. DOM Parse Time→ Server: HTML as String !!!→ Client-Stack: Parse/Marshalling of JSON

Time To First Content

Browser/Client → Finetuning

http://www.webpagetest.org

“We moved Client-Rendering back to Server Rendering due to performance”

... It drop our initial page load times to 1/5th.

https://blog.twitter.com/2012/improving-performance-on-twittercom

Time To First Tweet

Experienced Perf

More Performant On

3. Time To First Content?

ServerFaster→

Half Time

Server : Client

3 : 0

More Performant On:● Responsive user interaction ?● Rich experience ?● Less server-roundtrips ?

ClientFaster→

Longer SPA Interaction

Make users & managers happy !

Half Time

Server : Client

3 : 8

Future Trends

Become Faster● Devices● Browsers● DOM● Frameworks● Protocols

So what ?

Know Your SkillsetUser Interface

JavaScript Responsive Design

Database-Access

Multi-Core-Programming

Enterprise-Patterns

API-Design

FrontendDeveloper

User-Experience

SecurityBackend

Developer

Mobile Development

Investment of Time to Learn

ClientR + ServerR =

HybridR

R = Rendering

HybridRThe Hard Way

but

The Holy Grailhttp://de.slideshare.net/Siarhei/presentation-15273281

R = Rendering

→ Reduce time-effort & risk→ Functionality over performance→ “Premature optimization is the root of all evil” Donald Knuth

→ How about migration ?

Defer Decision for Hybrid

Effort To Hybrid Responsive Action

david.amendEnter Email Invalid Email

Moving To Client1. Controller2. Model3. View

Hybrid

Example

Register

ServerFast Init Responsiveness

Effort To Init Hybrid Rendering

Welcome David!You have 12 unread Emails

Example Moving To Server1. Controller2. Model → Read Only3. View → Read Only

HybridClientResponsiveness Fast Init

Lessons learned● Facebook● Twitter● Yahoo● Angular.js 2.0● Google● Ebay● LinkedIn● Airbnb

Closure Templates

May 2013

May 2012

Feb 2013

Aug 2012

~ 2015

March 2012

April 2012

Nov 2009

Hybrid-Rendering Solution 1

→UIM

VC

ArchitectureForces

→Framework

Sharing templates→ Same Codebase→ Component Abstraction

Client SPA Rendering

BrowserRequest page

JS, HTML, CSS Webserver

Bootstrap Application

Render HTMLAJAX-Request

JSON

3.

1.

2.

4Register Events

Browser

Hybrid-Rendering Solution 1

HTML-StringRender HTML

1.

3.

WebserverShared

Template Interpreter

Templates

2.

2. 1.

Request Page

Browser

Hybrid-Rendering Solution 1

HTML-String

Bootstrap Application

Register Events

→ Client Takes Over

Render HTML

1.

3.

4.

5. → Deferred User Interaction

WebserverShared

Template Interpreter

Templates

2.

2. 1.

Request Page

React.js is MVC

HTML String

Fast accessVirtualDOM

Generates

CachingSeparates

View & Model

React.js & AngularPlain Angular: Initial-Loading: 990ms

http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/

React.js & AngularPlain Angular: Initial-Loading: 990ms

Angular + React.js: Initial-Loading: 243ms

http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/

Hybrid-Rendering Solution 2

Template Engine

→ UIChooses

MV

C

Architecture

→Framework

Hybrid-Rendering Solution 2

Browser RenderingEngine

Request Page

HTML-String

Headless Browser

Webserver

HTML,CSS, JS Bootstrap Application

Register Events

Client Takes Over

Render HTML

1.

2. 3.

4.5.

6.

7.

8.

CSS, JavaScript

→ Deferred User Interaction

Hybrid: Get For Free

→ SEO→ Shared Codebase

1. How important is Performance?

2. Where is worst Bottleneck ?

Prioritize Wisely

Interactive

App

Know your Type of Project !

Static Content

?

Be flexible on upcoming rendering strategies !

Custom Implementation

Client DrivenBest of Breeds Future Proof

Decide Wisely!

Visitors & Developers Budget+

Questions

What will be your next choice

Resources 1/2http://www.techinspired.net/img/Games-icon.png

http://3.bp.blogspot.com/-wOJqQk3PCq0/TygQIqnkqtI/AAAAAAAADrM/3yhORCNd9m0/s1600/3d_pie_chart.jpg

www.axialis.com%2Fobjects%2Flg_preview_icon_04.jpg&imgrefurl=http%3A%2F%2Fwww.axialis.com%2Fobjects%2Fip_icon_04.shtml&h=600&w=791&tbnid=5o1iTfc9Sv04AM%3A&zoom=1&docid=mSUvvKVPf2ptvM&ei=wbiBU9vpDMLD7AaMlYGwBg&tbm=isch&iact=rc&uact=3&dur=596&page=1&start=0&ndsp=54&ved=0CFgQrQMwAA

www.spreadbetmagazine.com%2Fstorage%2FNewspaper.jpg%253F__SQUARESPACE_CACHEVERSION%253D1394611464746&imgrefurl=http%3A%2F%2Fwww.spreadbetmagazine.com%2Fnews%2F2014%2F3%2F12%2Fmorning-newspaper-roundup-120314.html&h=878&w=1000&tbnid=LS-DY_QEvRfmXM%3A&zoom=1&docid=dGp-YbV3czjNRM&ei=iLqBU7OKFoWf7Aamu4D4Bw&tbm=isch&iact=rc&uact=3&dur=2816&page=1&start=0&ndsp=48&ved=0CGwQrQMwBQ

http://biotuesdays.com/wp-content/uploads/2011/10/Puzzle.jpg

http://openclipart.org/detail/26143/desert-isle-by-johnny_automatic

http://openclipart.org/detail/20145/point-to-multipoint-(wimax)-scenario-by-danza

http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0LzY2LzRtb2JpbGVidXNpLmJXdy5qcGcKcAl0aHVtYgk5NTB4NTM0IwplCWpwZw/17576b70/490/4-mobile-business-applications-to-watch-bb6ec2f671.jpg

http://openclipart.org/detail/92779/rabbit-by-mazeo

http://openclipart.org/detail/171191/men-at-work-by-developingo-171191

http://openclipart.org/detail/188917/bag-of-cash-by-casino-188917

http://www.drfranklipman.com/images/2013/11/Disconnect1.jpg

Resources 2/2http://reaching.to/wp-content/uploads/2014/02/shake.jpg

http://openclipart.org/detail/94663/brand-identity-by-webinav

http://www.science-skeptical.de/wp-content/uploads/2011/10/reality-check-1.jpg

http://openclipart.org/detail/2814/plate-computer-privacy-by-valessiobrito-2814

http://openclipart.org/detail/94717/clock-by-javierkiopo

http://exploringscrum.com/wp-content/uploads/2013/09/Feature-Complete-300x225.jpg

https://openclipart.org/detail/46141/group-of-people-by-palomaironique

https://openclipart.org/detail/1030/bag-of-money-by-johnny_automatic

http://home.messiah.edu/~tp1180/HolyGrail.jpg

https://openclipart.org/detail/22124/people-biz---male-smile-by-yyycatch-22124

http://www.dabbahlive.com/wp-content/uploads/2012/03/back-to-the-future-delorean1.jpg