Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale

15 views

Published on

Times Square is the most visited place globally with about 380,000 pedestrian visitors a day - roughly the same amount of people which go to Wix’s dashboard. Building a page which receives such high traffic requires having great performance and intelligent architecture. In this talk, Eyal will go over the challenges of rebuilding Wix’s dashboard, the architecture and how we got it to load under 1 second.

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale

  1. 1. eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg Tipping the scale Eyal Eizenberg Team Leader at Wix OS and managing Wix Haifa
  2. 2. This is me
  3. 3. Wix Engineering Locations Ukraine Israel Lithuania VilniusKiev Dnipro Tel-Aviv Be’er Sheva Haifa
  4. 4. We’ll talk about How to build a very complex web page for big scale traffic Let’s say 150M website editors...
  5. 5. Meet John A Photographer
  6. 6. Meet John A Photographer Wix user
  7. 7. Blog Photo album Contacts Ecom News letter Meet John A Photographer Wix user Boost his website with cool widgets and apps
  8. 8. ...and many back offices Blog Photo album Contacts Ecom News letter
  9. 9. One back office to rule them all
  10. 10. Business Manager
  11. 11. Dashboard 1.0
  12. 12. Dashboard 1.0 Common actions and information
  13. 13. Dashboard 1.0 Information of specific verticals
  14. 14. npm dep 1 npm dep 2 npm dep 3 npm dep ... Dashboard 1.0 React/Redux/Typescript
  15. 15. Dashboard 1.0 + Skeleton for perceived performance React/Redux/Typescript npm dep 2 npm dep 3 npm dep ... npm dep 1
  16. 16. Performance Perceived performance Product Complexity Dashboard 1.0 … but it had some issues
  17. 17. Performance Perceived performance Product Complexity Dashboard 1.0 One Big projectSite Details bundle ~ 115KB
  18. 18. Performance Perceived performance Product Complexity Dashboard 1.0 One unit - the weakest sets the tone
  19. 19. Performance Perceived performance Product Complexity Dashboard 1.0 Steps for Ecom Steps for Events Steps for Main Funnel Isolated setup widgets
  20. 20. Performance Perceived performance Product Complexity Dashboard 1.0 Isolated setup widgets
  21. 21. Dashboard 2.0
  22. 22. Site details Omni setup Blog Answers Dashboard 2.0 Performanc e ● Separate widgets
  23. 23. Dashboard 2.0 Performanc e ● Separate widgets ● Lazy components Site details Omni setup Blog Answers
  24. 24. Bundle arrived Component renders content Parent loads the lazy Nothing is rendered Bundle is fetched in the background What is a Lazy Component?
  25. 25. Benefits of Lazy Components ▪ Many small bundles VS one big one (better for incremental performance) ▪ Confidence in deploying individual micro services ▪ Easier to test (unit & integration) ▪ Better perceived performance Dashboard 2.0
  26. 26. Dashboard 2.0 Perceived Performanc e ● Separate Skeletons
  27. 27. Product Dashboard 2.0 Increased conversion ~5% Increased completion of setup steps drastically ~30% Improved many other KPIs
  28. 28. Dev Velocity ▪ Devs are spread across multiple projects ▪ Small relatively simple projects ▪ We switch to Wix Serverless ▪ From all FEDs we became all Full Stack Developers Dashboard 2.0
  29. 29. Common Issues & Optimizations
  30. 30. Bundle arrived Component renders content Data starts fetching Data Arrived Component renders Content Parent loads the lazy Nothing is rendered Bundle is fetched in the background Fetching Data from Lazy Components
  31. 31. Parent loads the lazy Data/Bundle start fetching Data Arrived Component renders Content Nothing is rendered Bundle is fetched in the background Bundle arrived Component renders content Solution: Simultaneous Fetching
  32. 32. Increased bundle size due to duplicate dependencies
  33. 33. Solution: Re-use packages and extract common code
  34. 34. Increased bundle size due to translations
  35. 35. Solution: Fetch only needed language BONUS: Make the translations “deployable”
  36. 36. Browser Throttling ▪ Many microservices means many network calls ▪ HTTP1 limits browsers to 6 concurrent requests to the same host ▪ Requests are stalled while in queue
  37. 37. Solution: Switch to HTTP2 & Bulk Requests ▪ No limit of concurrent requests ▪ Identical requests should be “reused” and the response should be shared.
  38. 38. Increased bundle size due to unique code
  39. 39. Solution: Work with product and...
  40. 40. …use Webpack/React code splitting
  41. 41. Some issues we are facing moving forward
  42. 42. Disappearing Skeletons
  43. 43. Disappearing Skeletons
  44. 44. Blocking Breaking Dependencies Dashboard Widget B Widget CWidget A
  45. 45. Blocking Breaking Dependencies Dashboard Widget B Widget CWidget A
  46. 46. Solution: “Calculate” Layout in a Server ▪ Widgets will “register” to the layout service ▪ “Calculations” will be done in the server ▪ Remove build dependency completely ▪ Skeletons will appear only for relevant widgets ▪ Data will be fetched for all in the server, eliminating client-server hop ▪ Server will return lazy components & their relevant data
  47. 47. Consider what’s good to SHARE, and what’s good for you to BREAK APART Design, behaviors, common code/packages... Skeleton, one big repo...
  48. 48. Thank You eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg
  49. 49. Q&A eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg

×