Ön yüzde mikro-mimari

Yaprak Ayazoğlu

frontend.istanbul 2018

@yaprakaya

Ben kimim?

Yaprak Ayazoğlu

@bol.com'da Frontend geliştiricisi

@yaprakaya

  • ~4 yıllık Hollanda macerası
  • Bilgisayar Müh.'de Yüksek Lisans
  • Elektrik ve Elektronik Müh.'de Lisans
  • Güneş Arabası ve Hidrojen Arabası projeleri
  • @LoncaWorks'ta mentorluk

 

@yaprakaya

@yaprakaya

@yaprakaya

bol.com ne yapar?

@yaprakaya

Ben bol.com'da ne yapıyorum?

@yaprakaya

Değişim

Webshop -> Satıcılar

@yaprakaya

bol.com'a ilk başladığımda

@yaprakaya

Mimari

  • Monolit uygulama
  • Arkayuzde Java
  • Onyuzde Angular 1.x, Backbone, Handlebars karisimi

@yaprakaya

Satıcı Arayüzlerindeki Domainler

@yaprakaya

Domainler...

@yaprakaya

Problemler

  • Kodun yayınlanması (deployment)
  • Kod reuse
  • Atalet (yeni fikirlerin kolayca adapte edebilmek)
  • Kodun bakımı
  • Sahibiyet

@yaprakaya

Değişim zamanı...

@yaprakaya

İhtiyaçlar

  • Birbirinden bağımsız olarak çalışan takımlar
  • Kodun yayınlanma surecinin kolay ve daha sık olması
  • Yeni fikirleri daha hızlı geliştirebilme
  • Yeni teknolojiler kullanmak
  • Eski sistemi yenilerken son kullanıcının işini etkilememe

@yaprakaya

Özellik Kümeleri

  • /orders
  • /offers
  • /home
  • /performance
  • /assortment
  • /returns
  • ... vs.

@yaprakaya

İlk durum

@yaprakaya

İade Web Servisi

@yaprakaya

@yaprakaya

BFF (Backend for frontend)

Backend for Frontend API geliştirme sürecinin doğasında olan tasarım boşluğunu doldurmayı amaçlayan yapıdır. Bir BFF, arayüz ile alt katman (downstream) servislerinin arasındaki katmandır.

Mikro-frontend

Mikro-frontend bir web uygulamasını ufak özellik kümelerine bolup her bir özelliğin tek bir takım tarafından bastan sonra geliştirilmesine olanak sağlayan yapıdır.

@yaprakaya

Mikro-frontend örnekleri

  • Satış emirleri
  • İadeler
  • vs.

@yaprakaya

@yaprakaya

Özellikleri

  • Herhangi bir veriye sahip değil
  • Session tutmuyor
  • Birbirinden bağımsız
  • Farklı portallarda yeniden kullanılabilir
  • Ayrı ayrı url'lerde yaşar

@yaprakaya

Single Sign On

  • Bir uygulamadan diğer uygulamaya geçiş
  • Satıcı yekpare uygulamasından ilk kopan mikroservis

@yaprakaya

Menü

@yaprakaya

Elde Neler Var?

  • 6 değişik departmanda çalışan 8 takım
  • 20'den fazla ufak web servisi
  • Farklı kullanıcı gurupları ve farklı portallarda tekrardan kullanılan servisler

@yaprakaya

Sıkıntılar

  • Aynı kullanıcı deneyimini yakalamak
  • Ortak kütüphanelerin geliştirilmesi
  • OAuth2
  • Donanım seviyesinde yaşanan problemler

@yaprakaya

İlk deneyde basarılı bir sonuç mu aldık?

@yaprakaya

İlk mikro-frontend deneyi

  • Tedarikçi portalı
  • Her bir özellik kümesi için bir Angular Modülü
  • Tarayıcıda birbirine uhulanan modüller ile SPA uygulaması

@yaprakaya

Tedarikçi Portal

Uygulama

1

Uygulama

2

Uygulama

3

@yaprakaya

SPA yapısı

<html>
  <head>
    …
    <script src=“/wrapper/bundle.js”></script>
    <script src=“/application-1/bundle.js”></script>
    <script src=“/application-2/bundle.js”></script>
    <script src=“/application-3/bundle.js”></script>
    …
  </head>
  …
</html>

@yaprakaya

Eksileri

  • Butun portalın bakımı zorlaştı.
  • Ayrı projeler birbirine bağımlı hale geldi.
  • Üçüncü parti kütüphaneleri güncellemeleri bütün projelerde güncelleme gerektirdi.

@yaprakaya

Artıları

  • Performans

Öncelikle

  • Tedarikçi portalı hala kullanılıyor.

Modern Teknolojiler

@yaprakaya

@yaprakaya

Typescript

  • Değişken tipi oluşturabilme
  • Rest iletişimi için interface tanımlayabilme
  • Data streamler(Observables) için tip tanımlayabilme
  • Editör desteği

@yaprakaya

@yaprakaya


@Injectable()
export class PackingListService {
  private packingListUrl = 'url/to/packing-list';

  constructor(public http: HttpClient) { }

  public getPackingList(listId: string): Observable<SendStockItem[]> {
    return this.http
      .get(`${this.packingListUrl}?list-id=${listId}`)
      .map((json: any) => {
        const packingList = PackingListDto.fromJson(json);
        return packingList.lines;
      });
  }
}

@yaprakaya

import { SendStockItem } from './send-stock-item';

export class PackingListDto {
  id: string;
  retailerId: string;
  sendStockItems: SendStockItem[];

  static fromJson(json: any): PackingListDto {
    // tslint:disable-next-line
    return PackingListDtoSerializer.fromJson(json);
  }
}

class PackingListDtoSerializer {
  static fromJson(json: any): PackingListDto {
    const packingListDto = new PackingListDto();
    packingListDto.id = json.id;
    packingListDto.retailerId = json.retailerId;
    packingListDto.sendStockItems = json.lines.map((line) => {
      return SendStockItem.fromJson(line);
    });
    return packingListDto;
  }
}

@yaprakaya

import { FormGroup } from '@angular/forms';

export class SendStockItem {
  id: string;
  selectedQuantityFormItem?: FormGroup;

  static fromJson(json: any): SendStockItem {
    return SendStockItemSerializer.fromJson(json);
  }
}

class SendStockItemSerializer {
  static fromJson(json: any): SendStockItem {
    const sendStockItem = new SendStockItem();
    sendStockItem.id = json.id;
    return sendStockItem;
  }
}

Angular

  • Komponent tabanlı
  • Form desteği
  • Dil desteği
  • Unit testleri için kolaylık
  • Cli desteği
  • Ekosistem

@yaprakaya

Ortak kütüphaneler

@yaprakaya

Styling

@yaprakaya

Angular Komponent Kütüphanesi

 

@yaprakaya

Komponent ve stili kütüphaneleri bir çatı altında

@yaprakaya

Toplarlayacak olursak

  • Bağımsız olarak çalışabilen takımlar
  • Sahiplenme
  • Yeni fikirleri daha hızlı geliştirebilme
  • Yeni teknolojiler

@yaprakaya

Sorular?

@yaprakaya

Teşekkürler

@yaprakaya

@yaprakaya

https://slides.com/yaprakayazoglu/mikro-frontend/

mikro-frontend

By Yaprak Ayazoglu

Made with Slides.com

mikro-frontend

  • 1,203

More from Yaprak Ayazoglu