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.

Microservices on the client side

556 views

Published on

Angular, React and React Native - seemingly completely different frameworks, but can they work together in harmony under one application? Consider 10 different teams working in parallel, each relying on their favorite framework. Can we combine the product of these 10 teams into one mega app?

In this talk we will discuss the design principles and architecture of large scale multi-tenant mobile and web applications that serve as a foundation for the Wix Mobile App and Wix Business Manager for the web.

You will learn how to apply those principles and techniques at scale of over 10 teams, while embracing existing frameworks and building sound mega apps together.

Published in: Software
  • Be the first to comment

Microservices on the client side

  1. 1. Microservices on the client side Sergey N. Bolshchikov, Team Leader @ Wix linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com
  2. 2. Hi. I am Sergey, ❖ team lead @ Wix, ❖ curator of js-must-watch list, ❖ creator of YGLF Conference. Kiev
  3. 3. I have a disclaimer to make confession
  4. 4. AGENDA Project evolution How it works? When can you apply it?
  5. 5. Project evolution 00
  6. 6. We start...
  7. 7. Angular We start...
  8. 8. Angular React We start...
  9. 9. Angular React Elm We start...
  10. 10. Can you…? Somebody else comes...
  11. 11. Can you…? Sure, PR... Somebody else comes...
  12. 12. Can you…? Sure, PR... Somebody else comes... WTF?
  13. 13. Can you…? Sure, PR... WTF?? Somebody else comes... WTF?
  14. 14. Can you…? NO! Screw it Somebody else comes...
  15. 15. Can you…? NO! Screw it iframe! Somebody else comes...
  16. 16. I need x…? Somebody else comes...
  17. 17. I need x…? It will take a... Somebody else comes...
  18. 18. I need x…? It will take a... Somebody else comes... post message
  19. 19. I need x…? It will take a... fu**ing iframe :( Somebody else comes... post message
  20. 20. 8 secs?? We starting to having issues...
  21. 21. 8 secs?? We starting to having issues... well, iframes...
  22. 22. 8 secs?? fu**ing iframe :( We starting to having issues... well, iframes...
  23. 23. let’s SSR! We starting to having limits...
  24. 24. let’s SSR! We starting to having limits... well, iframes...
  25. 25. let’s SSR! fu**ing iframe :( We starting to having limits... well, iframes...
  26. 26. Current solutions & Objective 01
  27. 27. 1. Single-page application with lazy-loaded isolated modules
  28. 28. 1. Single-page application with lazy-loaded isolated modules
  29. 29. 1. Single-page application with lazy-loaded isolated modules
  30. 30. 1. Single-page application with lazy-loaded isolated modules
  31. 31. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications
  32. 32. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications
  33. 33. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications
  34. 34. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications
  35. 35. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications
  36. 36. render angular inside react application
  37. 37. render angular inside react application Angular app React component React component React component what we usually have...
  38. 38. So what do we want? What’s the ideal solution?
  39. 39. render angular inside react applicationwhat we really want is... React app
  40. 40. render angular inside react applicationwhat we really want is... Angular app React app
  41. 41. render angular inside react applicationwhat we really want is... Angular app React app Angular app
  42. 42. render angular inside react applicationwhat we really want is... Angular app React app Angular app React app
  43. 43. Demo time 02
  44. 44. Angular app React app Angular app React app
  45. 45. https://github.com/bolshchikov-public/react-module-container-example
  46. 46. In-depth explanations 03
  47. 47. https://github.com/wix/react-module-container
  48. 48. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications
  49. 49. Useful for you? 04
  50. 50. Thank You linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com
  51. 51. Q&A linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com
  52. 52. Useful Links 1. https://github.com/wix/react-module-container 2. https://github.com/bolshchikov-public/react-module-container-example 3. Angular Lazy Component 4. React Lazy Component 5. sergeyb@wix.com

×