Mikro Frontendi - Uvod - Novi Sad JS

Transcript

1. Mikro Frontendi Uvod @ivanjov96
4. Mi želimo nešto novo!
5. Ali sada možemo!
6. Mikro frontendi!
7. Ivan Jovanović Senior Software Engineer https://ivanjov.com @ivanjov96 https://jsremotely.com
8. Šta su Mikro Frontendi?
9. Mikro Frontendi - mikroservisni pristup modernom vebu
10. Šta su Mikroservisi?
11. Mikroservisi su tehnika razvoja softvera koji struktuira aplikaciju kao kolekciju "labavo" povezanih servisa
13. Event bus - magistrala
14. Event bus (magistrala) nam omogućava razmenu podataka izmedju komponenti (publish-subscribe), bez prethodne registracije komponenti jedne sa drugom
15. Principi Mikroservisa • Lagan protokol izmedju servisa • Mali servisi, jedna funkcionalnost po servisu • Nezavisnost servisa • Laki za razumevanje, razvoj i testiranje • Ubrzavaju razvoj • Omogućavaju CI i CD
19. VS VS
20. + +
22. App Feature 3 Feature 2 Feature 1
23. Root app App 3 App 2 App 1 Feature 1 Feature 2 Feature 3
24. Kako smo došli ovde? • Monolitne full stack aplikacije • Frontend i backend aplikacije • Mikroservisi u backend-u • Komponente u frontend-u • Mikro frontendi
25. Moramo da se borimo protiv loše arhitekture!
26. Koje probleme rešava? • Korišćenje novog frontend framework-a na staroj arhitekturi • Bez deljenog koda i konflikata • Nezavisni deployment • Svaki tim može da izabere tehnologije koje će koristiti • Skaliranje frontend aplikacije
27. Kako podeliti aplikaciju? • Po funkcionalnosti na stranici • Po stranicama • Po sekcijama
28. Implementacije • Manuelno povlačenje aplikacije • IFrame • Single-spa biblioteka • Frint framework • ...
29. Manuelno povlačenje aplikacije
30. Manuelno povlačenje aplikacije • Kod se nalazi na drugom serveru • Nezavisni deployment • Komponente komuniciraju kroz: • Window objekat • Event bus
33. React app
34. Export React aplikacija
35. Povlačenje React aplikacije in the Root aplikaciju
36. Event bus - Eev • https://github.com/chrisdavies/eev • Manje od 500 bajta • Jako brz • Lak za korišćenje
40. IFrame
41. IFrame • Kod živi na drugom serveru • Nezavnisni deployment • Komunikacija se odvija kroz browser “Event bus”
47. Single-spa biblioteka
48. Single-spa biblioteka • https://github.com/CanopyTax/single-spa • Korišćenje više frameworka na istoj stranici • Implementacija postojećih aplikacija bez prepravki • Lazy load implementacija
50. Single-spa biblioteka • Kod živi na istom servisu • Sve je spakovano i deployment se vrši u isto vreme • Komunikacija se odvija kroz: • Window objekat • Event bus • Redux, Mobx itd. • Bilo šta drugo…
52. Loading funkcija
53. Activity funkcija
55. Single-spa aplikacija
56. Bootstrap
57. Mount
58. Unmount
62. Frint
63. Frint • https://frint.js.org/ • CLI • Ruter • State menadžment • Server side rendering
65. Frint CLI
66. Frint CLI
67. Reaktivno Programiranje
68. Podržava i React Native!
69. Micro Frontends Mane • Više koda za održavanje • Veliki bundle • Performance, puno koda u browseru
70. Ko koristi Micro Frontende?
71. I mnogi drugi...
72. Svi!
73. Zaključak • Ne koristite ovo ako imate prostu aplikaciju! • Koristite mikro frontende da biste sebi posao učinili lakšim, ne težim • Micro frontend ne znači da treba da koristimo svaki mogući framework • Ne zaboravite da napravite standarde!
74. Hvala! Blog ivanjov.com Twitter @ivanjov96