{"id":6865,"date":"2024-06-07T07:53:48","date_gmt":"2024-06-07T07:53:48","guid":{"rendered":"http:\/\/berkut.tech\/?p=6865"},"modified":"2024-07-04T03:42:49","modified_gmt":"2024-07-04T03:42:49","slug":"micro-frontend-mimarisi","status":"publish","type":"post","link":"https:\/\/berkut.tech\/index.php\/2024\/06\/07\/micro-frontend-mimarisi\/","title":{"rendered":"Micro Frontend Mimarisi"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

Micro frontend teknolojisine dalmadan \u00f6nce, micro frontend kavram\u0131 belli belirsiz bir \u015fekilde microservices mimarisinden esinlendi\u011fi ve ad\u0131n\u0131 ald\u0131\u011f\u0131 i\u00e7in microservices mimarisinin ne oldu\u011funu bilmeliyiz.<\/p>\n\n

Resmi belgelere g\u00f6re microservices\u2019in tan\u0131m\u0131na a\u015fa\u011f\u0131daki linkten ula\u015fabilirsiniz.<\/p>\n\n

Microservices architectural olarak da bilinen microservices, a\u015fa\u011f\u0131daki \u00f6zelliklere sahip olan bir mimari stildir:<\/p>\n\n

    \n
  • Son derece s\u00fcrd\u00fcr\u00fclebilir ve test edilebilinir olmas\u0131<\/li>\n\n
  • Ba\u011f\u0131ms\u0131z deploy yap\u0131labilinir olmas\u0131<\/li>\n\n
  • \u0130\u015f yap\u0131\u015f yeteneklerine g\u00f6re organize olmas\u0131<\/li>\n\n
  • K\u00fc\u00e7\u00fck bir ekip taraf\u0131ndan geli\u015ftirilebilir olmas\u0131<\/li>\n<\/ul>\n\n

    Microservices mimarisi, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde teslim edilmesini sa\u011flar.<\/p>\n\n

    \u015eimdi micro frontend k\u0131sm\u0131na geri d\u00f6nersek, micro frontend temel olarak i\u015flevselli\u011fin frontend\u2019e geni\u015fletildi\u011fi\u00a0microservices pattern\u2019in<\/strong>\u00a0bir uzant\u0131s\u0131d\u0131r. Sonu\u00e7 olarak, micro frontend, deployment ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131(independence), \u00f6zelliklerin daha kolay test edilmesi vb. dahil olmak \u00fczere \u00e7ok \u00e7e\u015fitli avantajlar sa\u011flar.<\/p>\n\n

    Micro Frontends\u2019in arkas\u0131ndaki fikir, bir web uygulamas\u0131n\u0131 ba\u011f\u0131ms\u0131z ekipler taraf\u0131ndan yap\u0131labilinir oldugunu d\u00fc\u015f\u00fcnmekten gelir. Her ekibin \u00f6nemsedi\u011fi ve uzmanla\u015ft\u0131\u011f\u0131 ayr\u0131 bir i\u015f alan\u0131 vard\u0131r. Bir ekip cross-function ve features\u2019\u0131 veritaban\u0131ndan kullan\u0131c\u0131 aray\u00fcz\u00fcne kadar u\u00e7tan uca geli\u015ftirir.<\/p>\n\n

    \"\"<\/figure>\n\n

    Micro Frontends Arkas\u0131ndaki Temel Kavramlar<\/h1>\n\n

    Teknolojiden Ba\u011f\u0131ms\u0131z Olun<\/h2>\n\n

    Her tak\u0131m, di\u011fer tak\u0131mlarla koordinasyona girmeden bir stack se\u00e7meli ve o stack\u2019i upgrade etmelidir. \u00d6zel \u00f6\u011feler(elements), di\u011ferlerine tarafs\u0131z bir arabirim sa\u011flarken uygulama ayr\u0131nt\u0131lar\u0131n\u0131 gizlemeye yard\u0131mc\u0131 olur.<\/p>\n\n

    Tak\u0131m\u0131n Kodunu \u0130zole Et<\/h2>\n\n

    Ekipler ayn\u0131 framework kullansa bile asla bir \u00e7al\u0131\u015fma zaman\u0131n\u0131(runtime) payla\u015fmay\u0131n. Kendi kendine yeten ba\u011f\u0131ms\u0131z bir uygulama olu\u015fturun. Payla\u015f\u0131lan state veya global de\u011fi\u015fkenlere(variables) g\u00fcvenmeyin.<\/p>\n\n

    Tak\u0131m \u0130\u00e7in Prefixes Olu\u015fturun<\/h2>\n\n

    \u0130zolasyonun hen\u00fcz m\u00fcmk\u00fcn olmad\u0131\u011f\u0131 durumlarda\u00a0adland\u0131rma kurallar\u0131n\u0131<\/strong>kullan\u0131n.<\/p>\n\n

    \u00d6zel API\u2019ler yerine Yerel(Native) Taray\u0131c\u0131 \u00d6zelliklerini Tercih Edin<\/h2>\n\n

    Global bir PubSub sistemi olu\u015fturmak yerine, ileti\u015fim i\u00e7in taray\u0131c\u0131 events\u2019lerini kullan\u0131n. Ekipler aras\u0131 bir API olu\u015fturmaya ihtiya\u00e7 varsa, bunu m\u00fcmk\u00fcn oldu\u011funca basit tutmaya \u00e7al\u0131\u015f\u0131n.<\/p>\n\n

    Esnek Web Tasar\u0131m\u0131 Olu\u015fturun<\/h2>\n\n

    JavaScript \u00e7al\u0131\u015ft\u0131r\u0131lamasa bile featurelar faydal\u0131 olmal\u0131d\u0131r. Performans\u0131 iyile\u015ftirmek i\u00e7in universal rendering ve progressive geli\u015ftirmeyi kullan\u0131n.<\/p>\n\n

    Ama neden micro frontend\u2019e ihtiyac\u0131m\u0131z var? Hadi bunu cevaplayal\u0131m.<\/p>\n\n

    Modern \u00e7a\u011fda, yeni web uygulamalar\u0131yla birlikte frontend giderek b\u00fcy\u00fcyor ve backend daha az \u00f6nemli hale geliyor. Monolith yakla\u015f\u0131m\u0131 daha b\u00fcy\u00fck bir web uygulamas\u0131 i\u00e7in \u00e7al\u0131\u015fmaz. Bu durumdan kurtulmak i\u00e7in ba\u011f\u0131ms\u0131z olarak hareket eden k\u00fc\u00e7\u00fck mod\u00fcllere b\u00f6lmek i\u00e7in bir ara\u00e7 olmas\u0131 gerekiyor. Sorunun \u00e7\u00f6z\u00fcm\u00fc micro front-end\u2019dir.<\/p>\n\n

    Faydalar\u0131 \u00f6zetlemek gerekirse, a\u015fa\u011f\u0131da birka\u00e7 noktaya de\u011finilmi\u015ftir:<\/p>\n\n

      \n
    • Daha iyi\u00a0\u00f6l\u00e7eklenebilirlik<\/strong>.<\/li>\n\n
    • Ekipler ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fabildi\u011finden\u00a0daha h\u0131zl\u0131 geli\u015ftirme<\/strong>.<\/li>\n\n
    • Uygulaman\u0131zda\u00a0birden \u00e7ok framework<\/strong>\u00a0kullanabilirsiniz. Ancak, kar\u0131\u015f\u0131kl\u0131\u011f\u0131 \u00f6nlemek i\u00e7in dikkatli ve \u015feffaf bir \u015fekilde yap\u0131lmal\u0131d\u0131r.<\/li>\n\n
    • Deploy ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131<\/strong>.<\/li>\n\n
    • Micro frontend de, front-end\u2019in b\u00f6l\u00fcmlerini daha sorunsuz bir \u015fekilde\u00a0y\u00fckseltebilir<\/strong>,\u00a0g\u00fcncelleyebilir<\/strong>\u00a0ve hatta\u00a0yeniden yazabilirsiniz<\/strong>.<\/li>\n\n
    • Ba\u011f\u0131ms\u0131z oldu\u011fu i\u00e7in uygulaman\u0131n geri kalan\u0131n\u0131n sabit kalmas\u0131n\u0131 sa\u011flamak daha kolayd\u0131r. Micro frontend sayesinde art\u0131k t\u00fcm uygulamay\u0131 takip etmenize gerek yok.<\/li>\n\n
    • Codebase daha k\u00fc\u00e7\u00fck ve daha\u00a0y\u00f6netilebilir<\/strong>.<\/li>\n\n
    • Uzmanlar\u0131n daha kolay i\u015fe al\u0131nmas\u0131. Micro frontends sayesinde belirli bir teknoloji ile geli\u015ftirilen uygulaman\u0131z i\u00e7in sadece o alanda uzman olan birini arars\u0131n\u0131z, b\u00f6ylece di\u011fer ekiplerin kulland\u0131\u011f\u0131 teknolojileri bilmelerine gerek kalmaz.<\/li>\n\n
    • Kolayca\u00a0test<\/strong>\u00a0edilebilinir<\/li>\n<\/ul>\n\n

      Sonu\u00e7<\/h1>\n\n

      Micro frontend kullan\u0131p kullanmaman\u0131z, b\u00fcy\u00fck \u00f6l\u00e7\u00fcde i\u015f durumunuza ba\u011fl\u0131d\u0131r. K\u00fc\u00e7\u00fck bir projeniz ve ekibiniz varsa, micro frontend mimarisi o kadar gerekli de\u011fildir. \u00c7ok say\u0131da istek i\u00e7eren b\u00fcy\u00fck projeler ve da\u011f\u0131t\u0131lm\u0131\u015f ekipler varsa o zaman micro frontend mimarisini kullanmak mant\u0131kl\u0131 olacakt\u0131r. Bu nedenle g\u00fcn\u00fcm\u00fczde micro frontend mimarisini bir\u00e7ok b\u00fcy\u00fck \u015firket taraf\u0131ndan yayg\u0131n olarak kullan\u0131lmaktad\u0131r.<\/p>\n\n

      Kaynak\u00e7a<\/h2>\n\n
        \n
      • https:\/\/www.toptal.com\/front-end\/micro-frontends-strengths-benefits?source=post_page—–444153877ae2——————————–<\/li>\n\n
      • https:\/\/martinfowler.com\/articles\/micro-frontends.html?source=post_page—–444153877ae2——————————–<\/li>\n\n
      • https:\/\/betterprogramming.pub\/what-are-micro-frontends-is-it-even-necessary-to-use-them-f1393d65ef2f?source=post_page—–444153877ae2——————————–<\/li>\n\n
      • https:\/\/www.xenonstack.com\/insights\/micro-frontend-architecture?source=post_page—–444153877ae2——————————–<\/li>\n<\/ul>\n\n
        \n
        \n

        Mert Demir | Software Engineer
        Berkut Teknoloji<\/p>\n<\/blockquote>\n<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

        Micro frontend teknolojisine dalmadan \u00f6nce, micro frontend kavram\u0131 belli belirsiz bir \u015fekilde microservices mimarisinden esinlendi\u011fi ve ad\u0131n\u0131 ald\u0131\u011f\u0131 i\u00e7in microservices mimarisinin ne oldu\u011funu bilmeliyiz. Resmi belgelere g\u00f6re microservices\u2019in tan\u0131m\u0131na a\u015fa\u011f\u0131daki linkten ula\u015fabilirsiniz. Microservices architectural olarak da bilinen microservices, a\u015fa\u011f\u0131daki \u00f6zelliklere sahip olan bir mimari stildir: Microservices mimarisi, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n h\u0131zl\u0131 ve g\u00fcvenilir bir […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6865","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/posts\/6865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/comments?post=6865"}],"version-history":[{"count":10,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/posts\/6865\/revisions"}],"predecessor-version":[{"id":7135,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/posts\/6865\/revisions\/7135"}],"wp:attachment":[{"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/media?parent=6865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/categories?post=6865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/tags?post=6865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}