building advanced web ui in the enterprise world
TRANSCRIPT
Building advanced web UI in the Enterprise World
Efim Dimenstein | July 2013
Agenda
• Architecture Overview
Agenda
• Building A Happy Web Application
• Stay Out Please
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
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
Architecture concept
Business logicUI logicData protectionSecurity
Thin Clientrender
AppUI logicBusiness logic
API
Present+
Data Security
Past
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
Decoupled architecture
Client side
Spaghetti code
Lasagna code
Decoupled architecture
Client side
JS API
JSAPI
Module Module
1 browser1 window1 thread
Decoupled architecture – coupled deployment
Lasagna code
Spaghetti code
Problems / Solutions
• Code separation
Problems / Solutions
• Browser to server communication
• Tooling
• Performance & Resource management
Code separation - Javascript
Javascript is:
[][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()
http://www.jsfuck.com/
weird/strange/sad - flexible, powerful, everywhere
• Easy to write bad code, harder to write good code• Requires a lot of discipline• Tooling is in its infancy
• It is the only language that developers think theycan write code in without learning
Code separation - Javascript
IT IS HERE TO STAY
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
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, …)
Tooling
Tooling – Plato
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, …)
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
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
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
Performance & Resource management
Performance & Resource Management
• Optimize images
• Compress all output
