Wykład był krótką opowieścią o tym, jak do jednolitej i uniwersalnej aplikacji, zespół Maxa wprowadził separację kontekstów biznesowych, tak aby i klient i developerzy byli zadowoleni, a wdrażane funkcjonalności były niezależne i dostępne tylko dla wybranego kontekstu.

1. Case study:
Pluginable frontend
Łukasz “Max” Kokoszka

2. Klient
Łukasz “Max” Kokoszka
Case study: Pluginable frontend

3. Ł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

4. Klient - ekosystem
Case study: Pluginable frontend
Data HUB Internal systemsPortal

5. „A czy dałoby się…?”
Łukasz “Max” Kokoszka
Case study: Pluginable frontend

6. Ł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

7. Łukasz “Max” Kokoszka
„A czy dałoby się…?” – treści, modyfikacje, konfiguracja
Case study: Pluginable frontend

8. „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

9. „Będzie Pan zadowolony”
Łukasz “Max” Kokoszka
Case study: Pluginable frontend

10. „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

11. DXPE
Dynamic eXtension Points Engine
Łukasz “Max” Kokoszka
Case study: Pluginable frontend

12. Łukasz “Max” Kokoszka
DXPE - ekosystem
Case study: Pluginable frontend
Portal
Plugin #1
Plugin #2
Internal systemsData HUB
Client
Configuration Server
Git

13. Client
DXPE
Host
Host
API
Client
API
CCS
Łukasz “Max” Kokoszka
Case study: Pluginable frontend
XDS*
* Extensions Definition Schema
XD**
** Extensions Definition

14. HostHost
Łukasz “Max” Kokoszka
Case study: Pluginable frontend
Client
Host-DXPE
Adapter
<iframe>
„HTML5” postMessage
+ promisy

15. Ł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);

16. Ł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

17. Łukasz “Max” Kokoszka
XD – eXtensions Definition
Case study: Pluginable frontend
"pointType": "feature",
"pointData": {
"featureId": "EXAMPLE_PLUGIN",
"location": "http://example.com/plugin",
…
}

18. "pointType": "menuInjections",
"pointData": {
"menuId": "main",
"injections": [
{
"menuItemId": "examplePluginMenuItem",
"$featureId": "EXAMPLE_PLUGIN"
…
}
]
}
Łukasz “Max” Kokoszka
XD – eXtensions Definition
Case study: Pluginable frontend

19. Łukasz “Max” Kokoszka
DXPE – visit the rabbit hole (DEMO)
Case study: Pluginable frontend

20. Łukasz „Max” Kokoszka
http://www.linkedin.com/in/lukasz-max-kokoszka
Case study: Pluginable frontend
lkokoszka@future-processing.com
www.future-processing.pl