building advanced web ui in the enterprise world

Building advanced web UI in the Enterprise World

Efim Dimenstein | July 2013

Who am I?

Efim Dimenstein

Web Architect @ Liveperson

efim@liveperson.com

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

Thank You

LivePerson is Hiring! peoplejobs@liveperson.com