Jakiś czas temu mikroserwisy zawładnęły umysłami i duszami backend developerów. Teraz nadszedł czas, by i ci na froncie odeszli od wiecznie żywych monolitów. Za sprawą Webpacka 5 i Module Federation pojawiła się nowa i ciekawa opcja realizacji idei mikrofrontendów. W trakcie prezentacji opowiem o tym, jak zacząć i zbudować solidny komponent z module federation, ile różnych frameworków użyć i czy w ogóle wykorzystanie mikrofrontendów jest dla wszystkich.

1. Robert Goik
Micro frontends
with MODULE FEDERATION

2. Robert Goik
robert.goik@tsh.io
Senior frontend developer

3. Micro Frontends
Micro Frontend Myths by Cam Jackson
#1 It’s a new invention
#2 It requires shiny new tech
#3 It’s about collection frameworks
#4 Micro frontends need messaging and a state management
…
#11 It’s always a good idea
https://thoughtworks.wistia.com/medias/uhip1nzro3

4. Webpack 5
Module Federation

5. Hello World

6. WEBPACK 5 - Module Federation
Hello World

7. Application
show me the code
public/index.html
src/main.js
src/value.js

8. Configuration
webpack.config.js

9. Configuration
webpack.config.js
name - name of the module
filename - name of the file for remote entry
exposes - list of modules to be exposed

10. Build and run
npm run build:dev
npm start
vol. 1

11. Second App
index.html
app.js

12. Build and run
vol. 2
App 1
App 2
Hello World

13. How it works?
remoteEntry.js
webpack/lib/RuntimeGlobals.js
Default library type setup in
ModuleFederationPlugin

14. How it works?
remoteEntry.js

15. Is ten a number?

16. is-number

17. Is 10 a number?
shared packages
Y
e
s
,
1
0
i
s
a
n
u
m
b
e
r

18. Configuration
webpack.config.js

19. Let’s do this!

20. Is X a number?

21. SHARED
is-number

22. SHARED
is-number
src_elevenIsANumber_js.js
src_thirteenIsANumber_js.js

23. NOT SHARED
is-number

24. Build and run
Wait, what?

25. Whats the problem
?

26. Whats the problem
easy solution
OR
webpack.config.js
webpack.config.js
index.js

27. Bundle Size
eager vs dynamic import
Eager will not put modules in an async chunk.
Will be provided synchronously in initial chunk.
eager (is-number & moment)
Import (is-number & moment)
eager (is-number)
Import (is-number)

28. Let's use our
favourite framework

29. Module Federation with jQuery

30. Module Federation with React

31. Module Federation in React World
Let’s build components component library
https://github.com/roberuto/module-federation

32. Components library
Like Button

33. Configuration
webpack.npm.config.js

34. Configuration
webpack.mf.config.js

35. React and The Singletons
AKA share

36. Example no 1
npm run example:react
Components library AVAILABLE
Components library UNAVAILABLE

37. Jack Herrington
How to build a resilient shared
Header/Footer using Module
Federation
https://www.youtube.com/watch?v=K-yQB9YGmgE

38. Example no 1
React v17.0.1 & React v16.14.0

39. Example no 1
React v17.0.1 & React v16.14.0

40. Example no 1
React v17.0.1 & React v16.14.0
React v17.0.1
ReactDOM v16.14.0

41. Example no 1
React v17.0.1 & React v16.14.0
https://github.com/module-federation/module-
federation-examples/tree/master/different-react-versions

42. Example no 2
Vanilla JS

43. Example no 2
loader

44. Example no 2
loader
webpack.config.js

45. Example no 2
exposes

46. Example no 2
exposes
src/shareable/LikeButton.js
src/hoc/withMount.js

47. Example no 3
Vanilla & React

48. Micro frontends
what is?
Cam Jackson
“An architecture style where independently
deliverable frontend applications are
composed into a great whole”

49. Rules of micro frontends
author: Ruben Casas (American Express)
https://www.infoxicator.com/rules-of-micro-frontends
• Zero coupling between Micro-frontends
• Separate Code Bases
• Each Micro-frontend should be deployed independently
• Micro-Frontends should be tested Independently
• Micro-Frontends should be versioned
• Minimal Communication.
• CSS should be scoped

50. Micro frontends
do I need one?
Gustaf N. Kotte (IKEA)
“I'm quite inspired by the Amazon team size of two pizza
teams. If you're not familiar with it, it's two quite large American
family-style pizzas. So 10-12 people, something like that. It's
the people aspect, so the number of relations between people
are growing, and squared, I think. At some point, the team gets
less and less effective for the team size. I think that 10-12
people is okay. 15 is a bit of a long stretch, and at 20 it really
starts to hurt. That's how I think of it.”
https://www.case-podcast.org/22-micro-frontends-with-gustaf-nilsson-kotte

51. How many different framework can i use?
Cam Jackson
MYTH #3
It’s about collection frameworks
https://thoughtworks.wistia.com/medias/uhip1nzro3

52. How many different framework can I use?
That being said…

53. How many different framework can i use?
Let’s use these guys to build an app
No, not you
Simple micro frontend “toy” app with 3 frameworks
AKA “micro frameworks”

54. CSS
Global by nature

55. CSS
scope your CSS
•CSS in JS
•CSS Modules
•Shadow DOM

56. Monorepo
“micro frameworks”
https://github.com/roberuto/micro-frameworks

57. Modern Design
“micro frameworks”

58. Modern Design
“micro frameworks”

59. Shell app - Web Components
“micro frameworks”

60. Shell app
Components

61. Shell app
Loader

62. React, Vue, Svelte, Webpack
Entry point
Webpack module config for css
Styles helper function

63. App structure
base on svelte example
src/components/Content.js

64. Content - Svelte
“micro frameworks”

65. Header - React
“micro frameworks”

66. Sidebar - Vue
“micro frameworks”

67. Communication - Event Bus
“micro frameworks”

68. THANK YOU