Client or Server Rendering Showing the newest trend of hybrid rendering polymorphic like react.js phantom.js, single page application, David Amend

1. Client vs Server
Rendering
The probably most important architectural
decision for your projects

2. Which Way To Go ?
WYSIWYG
All-In-One
Product Suite
Custom
Implementation
Client Driven
Best of Breeds
Decisions
● Level of abstraction
● Language
● Architecture
● Lifecycle
● UI-framework
● Project process
→ Rendering ?
Prefer Client- or Server-Driven ?Server
Client

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

4. DavidAmend
● Java Web-Developer, Frontend Architecture
● Backbone, Ember, Angular, Grunt.js
Interests:
JavaScript, TypeScript, Triathlon-Sports
About
David.Amend@it-amend.de

5. Content
Basics
1. From Code to UI
2. Influence of Architecture
Impacts & Considerations
3. Separate Render-Client
5. Performance
Hybrid Solution
6. Template Sharing
7. View Interpreter

6. UI. The Final Result
→?
BrowserDEV

7. Abstraction Of Code
Abstraction
● Utilities
● Preprocessors
● Widget-Components
● Frameworks
Browser
● HTML
● CSS
● JavaScript/DOM
○ Events
○ Structure
○ Business Logic
→Generates
Interpreted
Server
Client

8. 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 ?

9. →→→
Impact: UI On Architecture
UI
Chooses
M
V
C
Architecture
Client
Server
Mixture
→→Architect
→→ UI
Chooses
M
V
C
Architecture
?→Framework
Rendering

10. Choice Of Rendering
Do you have the choice of
Rendering ?
Client, Server
… or Both

11. Controller
1. Server-Only UI-Generation
Client
Server
→→ No Widget-Components
Static
Documents
● HTML
● CSS
View
Model

12. Server Client
Server-Centric Hybrid Lifecycles
Hybrid
Various*
**
*
Request
Response
AJAX/PJAX
1.
2.1.
M
V
CM
V
C
Generates
M
V
C

13. Business Logic
Persistence
Model
View
Controller
Single Page Application
MVP, MVVM, M*, …*
Model
*
Browser
Service Layer
Build
Database
Server
Stateless

14. Hard Times For Decisions
Client Server
Low High
Lines Of Code
Level Of Abstraction

15. →
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

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

17. User Experience, Customziations
→ Cool, Sexy, Responsive!
Can you make
it faster on my
device, please
?
Server
→ The exception
Client
→ The default

18. Which is faster ???
Client or Server Rendering
Server : Client
0 : 0

19. Client vs. Server Bottlenecks
● Time To First Content
● UI-Responsiveness

20. 1. HTTP traffic
2. DOM is slow
Bottlenecks

21. →
Performance Impacts
1. Best hardware ?
2. Modern browser ?
Depends
Faster
→ DependsFaster

22. →
Guaranteed Perf.
1. Best hardware?
2. Modern browser ?
Server
Faster
Server
→Faster

23. Intermediate Result
Server : Client
1 : 0

24. Time To First Content
2. Bootstrap Count
→ WebServer: Once
→ Browser: At Every Visit
3. DOM Parse Time
→ Server: HTML as String !!!
→ Client-Stack: Parse/Marshalling of JSON

25. Time To First Content
Browser/Client
→ Finetuning
http://www.webpagetest.org

26. “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

27. More Performant On
3. Time To First Content?
Server
Faster
→

28. Half Time
Server : Client
3 : 0

29. More Performant On:
● Responsive user interaction ?
● Rich experience ?
● Less server-roundtrips ?
Client
Faster
→

30. Longer SPA Interaction
Make users &
managers happy !

31. Half Time
Server : Client
3 :
8

32. Future Trends
Become Faster
● Devices
● Browsers
● DOM
● Frameworks
● Protocols

33. So what ?

34. Know Your Skillset
User Interface
JavaScript Responsive Design
Database-Access
Multi-Core-Programming
Enterprise-Patterns
API-Design
Frontend
Developer
User-Experience
Security
Backend
Developer
Mobile Development
Investment of
Time to Learn

35. ClientR
+ ServerR
=
HybridR
R = Rendering

36. HybridR
The Hard Way
but
The Holy Grail
http://de.slideshare.net/Siarhei/presentation-15273281
R = Rendering

37. → Reduce time-effort & risk
→ Functionality over performance
→ “Premature optimization is the root of all evil”
Donald Knuth
→ How about migration ?
Defer Decision for Hybrid

38. Effort To Hybrid Responsive Action
david.amendEnter Email Invalid Email
Moving To Client
1. Controller
2. Model
3. View
Hybrid
Example
Register
Server
Fast Init Responsiveness

39. Effort To Init Hybrid Rendering
Welcome David!
You have 12 unread Emails
Example Moving To Server
1. Controller
2. Model → Read Only
3. View → Read Only
HybridClient
Responsiveness Fast Init

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

41. Hybrid-Rendering Solution 1
→UI M
V
C
ArchitectureForces
→Framework
Sharing templates
→ Same Codebase
→ Component Abstraction

42. Client SPA Rendering
Browser
Request page
JS, HTML, CSS Webserver
Bootstrap Application
Render HTML
AJAX-Request
JSON
3.
1.
2.
4
Register Events

43. Browser
Hybrid-Rendering Solution 1
HTML-String
Render HTML
1.
3.
WebserverShared
Template
Interpreter
Templates
2.
2. 1.
Request Page

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

45. React.js is MVC
HTML String
Fast access
VirtualDOM
Generates
Caching
Separates
View & Model

46. React.js & Angular
Plain Angular: Initial-Loading: 990ms
http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/

47. React.js & Angular
Plain Angular: Initial-Loading: 990ms
Angular + React.js: Initial-Loading: 243ms

48. Hybrid-Rendering Solution 2
Template Engine
→ UI
Chooses
M
V
C
Architecture
→Framework

49. Hybrid-Rendering Solution 2
Browser Rendering
Engine
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

50. Hybrid: Get For Free
→ SEO
→ Shared Codebase

51. 1. How important
is Performance?
2. Where is worst
Bottleneck ?
Prioritize Wisely

52. Interactive
App
Know your Type of Project !
Static
Content
?

53. Be flexible on upcoming rendering strategies !
Custom
Implementation
Client Driven
Best of Breeds
Future Proof

54. Decide Wisely!
Visitors & Developers Budget+

55. Questions
What will be your next choice

56. Resources 1/2
http://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&ve
d=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

57. Resources 2/2
http://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