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.
Micro Frontends
You Keep Using That Word, I
Don’t Think It Means What You
Think It Means.
Shem Magnezi | @shemag8
@shemag8
Once upon a time in
WeWork, community managers
needed a managing tool
@shemag8
@shemag8
@shemag8
Things started to get bigger
@shemag8
@shemag8
2017
1 Team
~5 Eng
1 PM
2019
~10 Teams
~50 Eng
>5 PMs
@shemag8
At this point we have
2 options
@shemag8
Plan
ahead
Business
as usual
@shemag8
@shemag8
Shem Magnezi
Staff Engineer
@shemag8
@shemag8
This is a common pattern
@shemag8
Let’s frame the problem
@shemag8
#1: High cohesion
@shemag8
#2: Loose coupling
@shemag8
#3: Limited blast radius
@shemag8
#4: Data segregation
@shemag8
#5: Presenting an API
@shemag8
Isn’t it familiar?
@shemag8
Why microservices for front-
end isn’t that simple?
@shemag8
#1: User should feel it’s a single app
@shemag8
#2: Keep bundle size small
@shemag8
#3: Responsive as fast as possible
@shemag8
#4: No standard API
@shemag8
But the concept is somehow
similar
@shemag8
Framework (AKA stiching layer)
Module 1 Module 2 Module 3 Module 4
Core library
Communication
between
modules
Upd...
@shemag8
Your mileage may vary
@shemag8
Questions you want to ask
● Do all teams work on same framework (and
version)?
● Single deploy or independent dep...
@shemag8
@shemag8
Here we go:
Same framework:
1. NPM Modules
2. Lerna
Multiple frameworks:
3. Web Components
4. App per route
5. IF...
@shemag8
NPM
module1
NPM
module2
App
NPM Modules
● Develop each module
in its own separate
independent repo
● The main app...
@shemag8
Package 1 Package 2
Main Package
Lerna
● Managing versioning
● Managing
dependencies
● Used by Babel, React,
Angu...
@shemag8
<Module 1>
● Technology Agnostic
● The DOM is the API
● Native support by
most browsers
● No shared state
<Module...
@shemag8
/package1
● Support SSR
● Each package has its
own dedicated page
● Can be divided into
fragments and not
full pa...
@shemag8
Frame 1
● No heavy lifting or
dependency
complexity
● Complete separation
● Very nostalgic
● Used by Spotify Fram...
@shemag8
App 1
● Use multiple
frameworks on the
same page
● No refresh
● Lazy load
App 2
single-spa-config
Single SPA
@shemag8
Wait, what about
communication?
@shemag8
Option #1:
State management
@shemag8
Option #2:
Event based communication
dispatchEvent EventEmitter
@shemag8
@shemag8
@shemag8
What's in it for me?
@shemag8
Breaking the monolith is inevitable
@shemag8
You have to plan ahead to scale fast
@shemag8
There isn't one solution
@shemag8
It’s all about your team and
product
@shemag8
@shemag8
Thanks
You can find me at
blog.shem.dev
@shemag8
Resources
● Lerna- http://bit.ly/2VAelIc
● Web Components- http://bit.ly/2PyN5V1
● Single SPA- http://bit.ly/2DB1...
Upcoming SlideShare
Loading in …5
×

of

“Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 1 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 2 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 3 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 4 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 5 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 6 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 7 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 8 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 9 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 10 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 11 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 12 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 13 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 14 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 15 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 16 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 17 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 18 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 19 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 20 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 21 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 22 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 23 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 24 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 25 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 26 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 27 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 28 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 29 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 30 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 31 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 32 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 33 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 34 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 35 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 36 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 37 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 38 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 39 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 40 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 41 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 42 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 43 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 44 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 45 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 46 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 47 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 48 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 49 “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means Slide 50
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

“Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means

Download to read offline

"Micro Frontends" is the new buzzword in the Frontend world, but too many times people use it in the wrong context or with different things in mind.
Micro Frontends can refer to different kinds of solutions that solve different types of problems - starting from using different UI frameworks on the same app or letting different teams work on separate parts of the code independently.
In this session, we'll go over the different problems we have when building a big app and how different micro-frontends solutions can help with this.

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

“Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means

  1. 1. Micro Frontends You Keep Using That Word, I Don’t Think It Means What You Think It Means. Shem Magnezi | @shemag8
  2. 2. @shemag8 Once upon a time in WeWork, community managers needed a managing tool
  3. 3. @shemag8
  4. 4. @shemag8
  5. 5. @shemag8 Things started to get bigger
  6. 6. @shemag8
  7. 7. @shemag8 2017 1 Team ~5 Eng 1 PM 2019 ~10 Teams ~50 Eng >5 PMs
  8. 8. @shemag8 At this point we have 2 options
  9. 9. @shemag8 Plan ahead Business as usual
  10. 10. @shemag8
  11. 11. @shemag8 Shem Magnezi Staff Engineer
  12. 12. @shemag8
  13. 13. @shemag8 This is a common pattern
  14. 14. @shemag8 Let’s frame the problem
  15. 15. @shemag8 #1: High cohesion
  16. 16. @shemag8 #2: Loose coupling
  17. 17. @shemag8 #3: Limited blast radius
  18. 18. @shemag8 #4: Data segregation
  19. 19. @shemag8 #5: Presenting an API
  20. 20. @shemag8 Isn’t it familiar?
  21. 21. @shemag8 Why microservices for front- end isn’t that simple?
  22. 22. @shemag8 #1: User should feel it’s a single app
  23. 23. @shemag8 #2: Keep bundle size small
  24. 24. @shemag8 #3: Responsive as fast as possible
  25. 25. @shemag8 #4: No standard API
  26. 26. @shemag8 But the concept is somehow similar
  27. 27. @shemag8 Framework (AKA stiching layer) Module 1 Module 2 Module 3 Module 4 Core library Communication between modules Update modules Notifications User’s session Shared components
  28. 28. @shemag8 Your mileage may vary
  29. 29. @shemag8 Questions you want to ask ● Do all teams work on same framework (and version)? ● Single deploy or independent deploy for each module? ● Modules should be shared between apps? ● Modules should be loaded dynamically? ● Do we need to support SSR? ● ...
  30. 30. @shemag8
  31. 31. @shemag8 Here we go: Same framework: 1. NPM Modules 2. Lerna Multiple frameworks: 3. Web Components 4. App per route 5. IFrames 6. Single SPA
  32. 32. @shemag8 NPM module1 NPM module2 App NPM Modules ● Develop each module in its own separate independent repo ● The main app is just wiring NPM modules packaged together
  33. 33. @shemag8 Package 1 Package 2 Main Package Lerna ● Managing versioning ● Managing dependencies ● Used by Babel, React, Angular, Jest
  34. 34. @shemag8 <Module 1> ● Technology Agnostic ● The DOM is the API ● Native support by most browsers ● No shared state <Module 2> Plain old HTML (and JS) Web Components
  35. 35. @shemag8 /package1 ● Support SSR ● Each package has its own dedicated page ● Can be divided into fragments and not full pages /package2 API Proxy App per route
  36. 36. @shemag8 Frame 1 ● No heavy lifting or dependency complexity ● Complete separation ● Very nostalgic ● Used by Spotify Frame 2 Main app IFrames
  37. 37. @shemag8 App 1 ● Use multiple frameworks on the same page ● No refresh ● Lazy load App 2 single-spa-config Single SPA
  38. 38. @shemag8 Wait, what about communication?
  39. 39. @shemag8 Option #1: State management
  40. 40. @shemag8 Option #2: Event based communication dispatchEvent EventEmitter
  41. 41. @shemag8
  42. 42. @shemag8
  43. 43. @shemag8 What's in it for me?
  44. 44. @shemag8 Breaking the monolith is inevitable
  45. 45. @shemag8 You have to plan ahead to scale fast
  46. 46. @shemag8 There isn't one solution
  47. 47. @shemag8 It’s all about your team and product
  48. 48. @shemag8
  49. 49. @shemag8 Thanks You can find me at blog.shem.dev
  50. 50. @shemag8 Resources ● Lerna- http://bit.ly/2VAelIc ● Web Components- http://bit.ly/2PyN5V1 ● Single SPA- http://bit.ly/2DB1f3a ● Project Mosaic- http://bit.ly/2ZEdzcu ● IFrames- http://bit.ly/2vse4IE ● Exploring micro-frontends- http://bit.ly/2ZIc8cX ● Micro Frontends - Think Smaller, Avoid the Monolith Love the Backend- http://bit.ly/2DzB39e

"Micro Frontends" is the new buzzword in the Frontend world, but too many times people use it in the wrong context or with different things in mind. Micro Frontends can refer to different kinds of solutions that solve different types of problems - starting from using different UI frameworks on the same app or letting different teams work on separate parts of the code independently. In this session, we'll go over the different problems we have when building a big app and how different micro-frontends solutions can help with this.

Views

Total views

313

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×