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.

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. This is me

3. Wix Engineering
Locations
Ukraine Israel Lithuania
VilniusKiev
Dnipro
Tel-Aviv
Be’er
Sheva
Haifa

4. We’ll talk about
How to build a very complex web page
for big scale traffic
Let’s say 170M website editors...

5. Meet John
A Photographer

6. Meet John
A Photographer
Wix user

7. Blog
Photo
album
Contacts
Ecom News
letter
Meet John
A Photographer
Wix user
Boost his website with
cool widgets and apps

8. ...and many back offices
Blog
Photo
album
Contacts
Ecom News
letter

9. One back office to rule them all

10. Business Manager

11. Dashboard 1.0

12. Dashboard 1.0
Common actions and information

13. Dashboard 1.0
Information of specific verticals

14. npm dep 1
npm dep 2
npm dep 3
npm dep ...
Dashboard 1.0
React/Redux/Typescript

15. Dashboard 1.0
+ Skeleton for perceived performance
React/Redux/Typescript
npm dep 2
npm dep 3
npm dep ...
npm dep 1

16. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
… but it had
some issues

17. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
One Big projectSite Details
bundle ~ 115KB

18. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
One unit - the weakest sets the tone

19. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
Steps for Ecom Steps for Events
Steps for Main Funnel
Isolated setup widgets

20. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
Isolated setup widgets

21. Dashboard
2.0

22. Site details
Omni setup
Blog
Answers
Dashboard 2.0
Performanc
e
● Separate widgets

23. Dashboard 2.0
Performanc
e
● Separate widgets
● Lazy components
Site details
Omni setup
Blog
Answers

24. What is a Lazy Component?

25. Bundle arrived
Component renders
content
Parent loads the lazy
Nothing is rendered
Bundle is fetched in the
background
What is a Lazy Component?

26. 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

27. Dashboard 2.0
Perceived
Performanc
e
● Separate Skeletons

28. Product
Dashboard 2.0
Increased conversion ~5%
Increased completion of setup
steps drastically ~30%
Improved many other KPIs

29. Dev Velocity
▪ Devs are spread across multiple projects
▪ Small relatively simple projects
▪ We switched to Wix Serverless
▪ From all FEDs we became all Full Stack Developers
Dashboard 2.0

30. Common Issues & Optimizations

31. 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

32. 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

33. Increased
bundle size
due to
duplicate
dependencies

34. Solution:
Re-use
packages and
extract
common code

35. Increased bundle size due to translations

36. Solution: Fetch only needed language
BONUS: Make the translations
“deployable”

37. 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

41. Solution: Switch to HTTP2 & Bulk Requests
▪ No limit of concurrent requests
▪ Identical requests should be “reused” and the response should be shared.

45. Increased bundle size due to unique code

46. Solution: Work with product and...

47. …use Webpack/React code splitting

48. Some issues we are facing
moving forward

49. It’s pretty complicated...

50. Disappearing
Skeletons

51. Disappearing
Skeletons

52. Blocking Breaking Dependencies
Dashboard
Widget B
Widget CWidget A

53. Blocking Breaking Dependencies
Dashboard
Widget B
Widget CWidget A

54. Dashboard V3

55. Solution: “Calculate” Layout in a Server
▪ Widgets are defined in an internal CMS
▪ Widgets will register to the layout service
▪ Exposure calculations will be done in the server
▪ Remove build dependency completely
▪ Skeletons will appear only for relevant widgets
▪ Data is fetched only for relevant widgets, freeing up network

56. Don’t allow promises!

57. “Dealer” - Widget Definition

58. “Dealer” - Audience

59. Consider what’s good to SHARE,
and what’s good for you to BREAK APART
Design, behaviors,
common code/packages...
Skeleton,
one big repo...

60. Thank You
eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg

61. Q&A
eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg