Micro-frontend : Vue.js 3 Ortak Mixins Kullanımı

Merhabalar 😊 Önceki yazımda Micro-frontend mimarisinden bahsetmiştim. Hala okumadıysanız linkini hemen şuracığa bırakıyorum. Micro-frontend üzerinden bugün de sizlere ortak bir mixins yapısı nasıl kurulur bundan bahsetmek istiyorum.

Hadii başlayalııım. ✌️😇

Öncelikle “Mixins nedir ? Neden kullanılır ?” bu soruları cevaplayalım.

Mixins, birden çok bileşende kullanabileceğimiz kod dosyalarını ortak bir yerden yönetebilmemizi sağlayan esnek yapılardır. Böylelikle gereksiz kod kalabalıklarından kurtulmuş oluruz. Bir Mixins dosyası içerisinde ki methodlara istediğimiz yerden ulaşabiliriz.

Peki Micro-Frontend ile farklı bir proje içerisinde ki Mixins’i nasıl kullanabiliriz ? Bu mümkün mü ? 🤔

Eveeet! Micro-frontend ile farklı bir proje içerisinde ki Mixins’i istediğimiz proje üzerinde kullanabiliriz.🎉🙂 Böylelikle sadece proje içerisinde ki kod kalabalığından değil farklı projelerde ki kod kalabalıklarından kurtulmuş oluruz.

Her şey harika! Peki bunu kod tarafında nasıl yapabiliriz hep birlikte şimdi ona bakalım.

Ben daha önce ki yazımda hazırladığım Micro-frontend yapısı üzerinden ilerleyeceğim. Eğer benimle birlikte yapmak isterseniz github linkini şuracığa bırakıyorum.

Önceki yazımdan hatırlarsanız “Container” ı ana projem olarak kabul etmiştim. O yüzden ortak Mixins’i burada yapmak bana daha mantıklı geliyor. Ama siz istediğiniz proje üzerinden Mixins yapısını kurup deneyebilirsiniz.

Container içerisinde Vue 3 ile Mixins yapısı nasıl kurulur şimdi ise buna bakalım! 🙂

getNotificationMixins Dosyası

Ben her click işlemim başarılı olduğunda çalışmasını istediğim bir methodumu getNotificationMixins.js içerisine koyup ona diğer projelerden de erişmeye çalışacağım.

Bu işlem için “Swal” kullanacağım. Öncelikle container içerisinde

npm i sweetalert2

yaparak projeme dahil ediyorum.

import Swal from "sweetalert2";

export default {
    data() {
      return { /* data */ }
    },
    methods: {
      successMsq() {
        Swal.fire(
          "Başarılı!",
          "İşleminiz başarılı bir şekilde oluşmuştur.",
          "success"
        );
      },

    },
  }
//getNotificationMixins.js

getNotificationMixins.js sayfama yukarıda ki yazdıklarımı ekliyorum. Böylelikle artık başarılı işlemlerde kullanabileceğim bir “successMsq()” methodum var.

Ama henüz işimiz bitmedi. 🙂

Mixins’imize istediğimiz yerden erişebilmek için bootloader.js’e gelerek sayfamızı import ediyoruz.

import { createApp } from "vue";

import "./index.css";
import getNotificationMixins from "@/utility/mixins/getNotificationMixins.js";

import App from "./App.vue";

createApp(App)
.mixin(getNotificationMixins)
.mount("#app");

//bootloader.js

Öncelikle methodumuzu Container içerisinde test edelim.

Bunun için App.vue sayfama bir buton ekleyerek methodumu çalıştırmaya çalışacağıım.🙂

<template>
  <div class="container">
    <div>Name: container</div>
    <Remote1 class="container-pink"></Remote1>
    <Remote2 class="container-purple"></Remote2>
    <button type="submit" class="btn btn-info" @click="success">
      <i class="ri-add-line align-bottom me-1"></i> Tıkla 
    </button>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";

const Remote1 = defineAsyncComponent(() => import("remote1/Remote1"));
const Remote2 = defineAsyncComponent(() => import("remote2/Remote2"));

export default {
  name: "App",
  components: {
    Remote1,
    Remote2,
  },
  methods: { 
    success() { 
      let self = this;
      self.successMsq();
    }
  }
};
</script>

<!--App.vue-->

Gördüğünüz üzere App.vue sayfamda herhangi bir successMsq() methodu olmadan Mixins içerisinde ki successMsq() methoduma erişebiliyoruuum. 🙂

Methoda Container İçerisinden Erişim

“Ebrar, peki diğer projelerde bu methoda nasıl erişebiliriz ?” dediğinizi duyar gibiyim. 🙂

Öncelikle diğer projelerin getNotificationMixins.js’e erişebilmesi için bu sayfamızı webpack.config.js üzerinden expose ediyoruz.

 plugins: [
    new VueLoaderPlugin(),
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {
        remote1: "remote1@http://localhost:8081/remoteEntry.js",
        remote2: "remote2@http://localhost:8082/remoteEntry.js", 
      },
      exposes: {
        "./getNotificationMixins": "./src/utility/mixins/getNotificationMixins.js",
      },
      exposes: {},
      shared: require("./package.json").dependencies,
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};
//Container-webpack.config.js 

Hadi şimdi diğer projelerden erişelim. 🙂

Remote1 olarak isimlendirdiğim projemin webpack.config.js sayfasına gelerek uzaktan bu sayfaya erişebilmek için remote kısmını ekliyorum.

  plugins: [
    new VueLoaderPlugin(),
    new ModuleFederationPlugin({
      name: "remote1",
      filename: "remoteEntry.js",
      remotes: {
      container: "container@http://localhost:8080/remoteEntry.js", 

      },
      exposes: {
        "./Remote1": "./src/Remote1.vue",
      },
      shared: require("./package.json").dependencies,
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};
//Remote1-webpack.config.js

Daha sonra Remote1‘in bootlader.js sayfasına Mixins’imi import ediyorum.

import { createApp } from "vue";

import "./index.css";
import getNotificationMixins from "container/getNotificationMixins";

import App from "./App.vue";

createApp(App)
.mixin(getNotificationMixins)
.mount("#app");

//Remote1- bootloader.js

Eveet 🙂 Artık Mixins’imizi kullanabiliriz.

App.vue sayfasına gelerek bir buton ekleyip methodumuzu çağırıyoruz.

<template>
  <div class="container">
    <div>Remote1</div>
    <button type="button" class="btn btn-info" @click="success">
      <i class="ri-add-line align-bottom me-1"></i> Tıkla 
    </button>
</div>
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
  name: "App",
  mixins:["notificationMixin"],
 
  methods: { 
    success() { 
      let self = this;
      self.successMsq();
    }
  }
};
</script>
//Remote1-App.vue 

Remote1 üzerinde successMsq() Methodunun Çalıştırılması

Aynı adımlar ile Remote2 üzerinden de bu methoda ortak bir yerden erişebilirsiniz. 🙂

3 Proje Üzerinden de Ortak Mixins ile Aynı Methodun Çalıştırılması

Sizler için projeyi github adresimde paylaştım. Dilerseniz indirip deneyebilirsiniz.

Proje : https://github.com/ebrartep/MicroFrontendMixins.git

Bir sonra ki yazımda router kontrolü ve projeler arasında nasıl veri paylaşıldığını açıklamaya çalışacağım. 🙂

Bir sonra ki yazımda görüşmek üzere. Bol kodlamalar!👋

Kaynaklar:

Understanding Micro Frontends

Mixins - Vue.js