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.

of

JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 1 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 2 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 3 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 4 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 5 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 6 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 7 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 8 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 9 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 10 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 11 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 12 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 13 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 14 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 15 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 16 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 17 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 18 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 19 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 20 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 21 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 22 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 23 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 24 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 25 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 26 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 27 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 28 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 29 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 30 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 31 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 32 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 33 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 34 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 35 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 36 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 37 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 38 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 39 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 40 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 41 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 42 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 43 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 44 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 45 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 46 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 47 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 48 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 49 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 50 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 51 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 52 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 53 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 54 JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale Slide 55
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

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

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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.

Views

Total views

122

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×