Case study:

Pluginable frontend

Łukasz “Max” Kokoszka

Klient

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

Łukasz “Max” Kokoszka

Klient - informacje

▪ Potentat w branży sub-metering** pośrednictwo rozliczeniowe; energetyka

▪ 24 kraje

▪ Dostawca kompleksowych rozwiązań

▪ „Corporate” vs „Countries” czyli kontekst biznesowy

Case study: Pluginable frontend

Klient - ekosystem

Case study: Pluginable frontend

Data HUB Internal systemsPortal

„A czy dałoby się…?”

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

Łukasz “Max” Kokoszka

„A czy dałoby się…?” – oczekiwania biznesowe

▪ Dodatkowe treści

▪ Selektywne modyfikacje

▪ Konfiguracja per kontekst

▪ Niezależny development

Case study: Pluginable frontend

Łukasz “Max” Kokoszka

„A czy dałoby się…?” – treści, modyfikacje, konfiguracja

Case study: Pluginable frontend

„A czy dałoby się…?” – wymagania techniczne

▪ Niezależny cykl życia

▪ Separacja rozwiązań i technologii

▪ Separacja odpowiedzialności

▪ Aktualizacja @Runtime

▪ Spójność UX/UI

▪ Zdolność integracji z dodatkowymi systemami

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

„Będzie Pan zadowolony”

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

„Będzie Pan zadowolony” – trzy opcje

▪ „Full modification”▪ Moduły AngularJS, współdzielony codebase, wszyscy mogą

wszystko

▪ „Separation by convention”▪ Rozszerzenia dostarczane jako „paczki”, jasno określone co

kto może

▪ „Full separation” czyli…

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

DXPEDynamic eXtension Points Engine

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

Łukasz “Max” Kokoszka

DXPE - ekosystem

Case study: Pluginable frontend

Portal

Plugin #1

Plugin #2

Internal systemsData HUB

Client Configuration Server

Git

Client

DXPE

HostHost API

ClientAPI

CCS

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

XDS*

* Extensions Definition Schema

XD**

** Extensions Definition

HostHost

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

ClientHost-DXPE

Adapter

<iframe>

„HTML5” postMessage+ promisy

Łukasz “Max” Kokoszka

Case study: Pluginable frontend

window.parent.postMessage(message, targetOrigin, transferable);

DXPE.client.ux.dispatchInfoToast(message); => promise {"messageId": (string),"eventId": (string),"data": (object),…

}

DXPE.host.onMessage(fn);function (eventId, data, done) {

…host.toastHandler(data.msg).then(done);

} channel.postMessage(message);

Łukasz “Max” Kokoszka

XDS – eXtensions Definition Schema

Case study: Pluginable frontend

{ "schemaVersion": (string),"extensions": [

{ "pointType": (string),"pointData": (object)

}]

}

• availableLanguages• configuration• corporateFeatureToggle• defaultFeatures• feature• iconSet• menuInjections• translations

Łukasz “Max” Kokoszka

XD – eXtensions Definition

Case study: Pluginable frontend

"pointType": "feature","pointData": {

"featureId": "EXAMPLE_PLUGIN","location": "http://example.com/plugin", …

}

"pointType": "menuInjections","pointData": {

"menuId": "main","injections": [

{"menuItemId": "examplePluginMenuItem","$featureId": "EXAMPLE_PLUGIN"…

}]

}

Łukasz “Max” Kokoszka

XD – eXtensions Definition

Case study: Pluginable frontend

Łukasz “Max” Kokoszka

DXPE – visit the rabbit hole (DEMO)

Case study: Pluginable frontend

Łukasz „Max” Kokoszkahttp://www.linkedin.com/in/lukasz-max-kokoszka

Case study: Pluginable frontend

lkokoszka@future-processing.com

www.future-processing.pl