Client Vs. Server Rendering
-
Upload
david-amend -
Category
Internet
-
view
2.030 -
download
1
description
Transcript of Client Vs. Server Rendering
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
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