Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mikro Frontendi - Uvod - Novi Sad JS

Mikro Frontendi - Uvod - Novi Sad JS

4ff4d0c579ce1bdbe505d8317e158a20?s=128

Ivan Jovanovic

February 27, 2019
Tweet

Transcript

  1. Mikro Frontendi Uvod @ivanjov96

  2. None
  3. None
  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
  12. None
  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
  16. None
  17. None
  18. None
  19. VS VS

  20. + +

  21. None
  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
  31. None
  32. None
  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
  37. None
  38. None
  39. None
  40. IFrame

  41. IFrame • Kod živi na drugom serveru • Nezavnisni deployment

    • Komunikacija se odvija kroz browser “Event bus”
  42. None
  43. None
  44. None
  45. None
  46. None
  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
  49. None
  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…
  51. None
  52. Loading funkcija

  53. Activity funkcija

  54. None
  55. Single-spa aplikacija

  56. Bootstrap

  57. Mount

  58. Unmount

  59. None
  60. None
  61. None
  62. Frint

  63. Frint • https://frint.js.org/ • CLI • Ruter • State menadžment

    • Server side rendering
  64. None
  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