Ö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

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

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

Ö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

@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

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


@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;
  }
}