Building Advanced Web UI in The Enterprise World

993 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
993
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Ido
  • Add pictures of spagetti and lasagna
  • Add pictures of spagetti and lasagna
  • Client to server communications
  • If you can do it – does not mean you shouldA lot of HTML5 standard is to do with JSEverywhere * Tried to run server side code in the browser – Failed * Node.js – run client side code on the server
  • If you can do it – does not mean you shouldA lot of HTML5 standard is to do with JSEverywhere * Tried to run server side code in the browser – Failed * Node.js – run client side code on the server
  • Unless it is too big – then lazy load what is not immediately needed– at run time or during build
  • Unless it is too big – then lazy load what is not immediately needed– at run time or during build
  • Unless it is too big – then lazy load what is not immediately needed– at run time or during build
  • Cross origin resource sharing
  • Building Advanced Web UI in The Enterprise World

    1. 1. Building advanced web UI in the Enterprise World Efim Dimenstein | July 2013
    2. 2. Who am I? Efim Dimenstein Web Architect @ Liveperson efim@liveperson.com
    3. 3. Agenda • Architecture Overview Agenda • Building A Happy Web Application • Stay Out Please
    4. 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. 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. 6. Architecture concept Business logic UI logic Data protection Security Thin Client render App UI logic Business logic API Present+ Data Security Past
    7. 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. 8. Decoupled architecture Client side Spaghetti code Lasagna code
    9. 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. 10. Problems / Solutions • Code separation Problems / Solutions • Browser to server communication • Tooling • Performance & Resource management
    11. 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. 12. Code separation - Javascript IT IS HERE TO STAY
    13. 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. 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. 15. Tooling Tooling – Plato
    16. 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. 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. 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. 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. 20. Performance & Resource management Performance & Resource Management • Optimize images • Compress all output
    21. 21. Thank You LivePerson is Hiring! peoplejobs@liveperson.com

    ×