1. Building advanced
web UI in the
Enterprise World
Efim Dimenstein | July 2013

2. Who am I?
Efim Dimenstein
Web Architect @ Liveperson
efim@liveperson.com

3. Agenda
• Architecture Overview
Agenda
• Building A Happy Web Application
• Stay Out Please

4. Enterprise world
Enterprise service – what does it mean?
What we want to develop?
• Scalable – a new client can triple your traffic
• Secure – pen tests every day
• Stable – 24x7 - 99.99…% availability
• Flexible
• Single page applications
• Fast
• Modular
• Decoupled / Flexible

5. LP client-side
• Visitor scale
Liveperson client-side
• Customer scale
• 1.8b visits per month
• ~150b requests per month
• Hostile environment
• 10k customers
• 100k users
• Friendly environment

6. Architecture concept
Business logic
UI logic
Data protection
Security
Thin Client
render
App
UI logic
Business logic
API
Present+
Data
Security
Past

7. Decoupled architecture
Decoupled architecture: Server side
Proprietary API
API API API API
• Improved stability, availability, performance &
security, resilience
• Faster release cycles
We went from one centralized service that
does it all to a lot of small decoupled services

8. Decoupled architecture
Client side
Spaghetti code
Lasagna code

9. Decoupled architecture
Client side
JS
API
JS
API
Module Module
1 browser
1 window
1 thread
Decoupled architecture –
coupled deployment
Lasagna code
Spaghetti code

10. Problems / Solutions
• Code separation
Problems / Solutions
• Browser to server communication
• Tooling
• Performance & Resource management

11. Code separation - Javascript
Javascript is:
[][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[
+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]
]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!
+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([
][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[
+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[
])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[
+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[
+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[
!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()
http://www.jsfuck.com/
weird/strange/sad -
flexible, powerful, everywhere
• Easy to write bad code, harder to write good cod
• Requires a lot of discipline
• Tooling is in its infancy
• It is the only language that developers think they
can write code in without learning

12. Code separation - Javascript
IT IS HERE TO
STAY

13. Code separation
Code Separation
• Dependency management
(require.js, commonjs)
• Revealing pattern (hide those private
methods)
• MV* provider – backbone, angular, knockout
…
• Reusable components (sdk, utilities, ui
controls)• Unit tests – just do it (Qunit, …)
• Automatic Tests – across all supported
browsers

14. Tooling
• Use Build tools
Tooling – correct tool for the job
• Designed for client side not server side
Grunt, Yeoman, …
• Use code analyses tools (jshint, …)
• Use code complexity tools (plato, …)

15. Tooling
Tooling – Plato

16. Tooling
• Use Build tools
Tooling – correct tool for the job
• Designed for client side not server side
Grunt, Yeoman, …
• Monitor, monitor, monitor
• Yslow, pagespeed, gomez, …
• RUM
• Use code analyses tools (jshint, …)
• Use code complexity tools (plato, …)

17. Performance & Resource management
• Memory
• Run your code for at least 24 hours
• Chrome dev tools
• Browser specific (IE8 leaks 4K every JSONP
req)
Performance & Resource Management
• DOM Elements
• Clean up after yourself
• Render only what is visible

18. Performance & Resource management
API API APIAPIAPI API
• Number of API requests
Performance & Resource Management
• Number of requests
• Optimize images / sprites
• Concatenate files using build tools

19. Performance & Resource management
API API APIAPIAPI API
PROXY
• Make server developers work
Performance & Resource Management
• Number of API requests
• Number of requests
• Optimize images / sprites
• Concatenate files using build tools

20. Performance & Resource management
Performance & Resource Management
• Optimize images
• Compress all output

21. Thank You
LivePerson is Hiring!
peoplejobs@liveperson.com