Full-stack Microservices

Full-stack Microservices
William Bartlett
 w.bartlett@treeptik.fr  @bartlettstarman
 punkstarman  punkstarman
Treeptik
7 juin 2018
William Bartlett (Treeptik) Full-stack Microservices 7 juin 2018 1 / 51

whoami ?
William Bartlett, Level 33
programmer
Agile Coach, Java dev,
Container enthusiast
Web Component nut
(Polymer)
Former doctoral
student
“Use the right tool
for the job”

Introduction
Section 1
Introduction

Introduction
Microservices
Avantages
séparation (« diviser pour régner »)
autonomie
automatisation
modularité
passage à l’échelle
transitions technologiques

Introduction
Microservices
Prix à payer
intégration complexe
cohérence ou disponibilité
frontières peu movibles

Introduction
Microservices
Les microservices, c’est amusant


Introduction
Microservices
Côté serveur Côté client

Introduction
Microservices
Micro Frontends : https ://micro-frontends.org/

Introduction
Problématique
Problématique
Comment avoir une équipe pluridisciplinaire entièrement autonome ?
Etendre l’architecture en microservices au côté client
Conception atomique
Composants web distribués

Introduction
Plan
Etat de l’art
Composants web
Conception atomique
Microservices à pile complète
Cas d’étude

Etat de l’art
Section 2
Etat de l’art

Etat de l’art
Micro Frontends
Micro Frontends : https ://micro-frontends.org/

Etat de l’art
Projet Mosaic, Zalando
Skipper (router), InnKeeper (router config API)
Tailor (layout), Quilt (layout storage)
Shaker (components)
Tessellate (SSR)
https ://www.mosaic9.org/

Etat de l’art
OpenComponents, OpenTable
API de composants d’IHM
SSR ou non
https ://opencomponents.github.io/

Etat de l’art
Metaframework, CanopyTax
Single SPA
Tissage à l’exécution de micro-frontends.
https ://github.com/CanopyTax/single-spa
Exemple : https ://single-spa.surge.sh/

Etat de l’art
Autres solutions
Fragments JSP/ASP.Net
JSP Tag Library
Struts Tiles
Portlet (Liferay)
<iframe >

Composants web
Section 3
Composants web

Composants web
Composants web
Composants web
Composants modulaires et réutilisables pour le web.
4 spécifications W3C
initié en 2011

Composants web
Eléments personalisés
<script >
class MyElement extends HTMLElement {}
window.customElements.define(’my-element’, MyElement) ;
</script >
<my-element ></my-element >

Composants web
Maquettes HTML
<template id=”my-element” >
<p >Hello from my-element !</p >
</template >
<script >
class MyElement extends HTMLElement {
attachedCallback() {
const currentDocument = document.currentScript.ownerDocument ;
const template = currentDocument.querySelector(’#my-element’) ;
this.appendChild(template.content.cloneNode(true)) ;
}
}
</script >

Composants web
Intéraction avec le CSS
<style >
.text { color : red }
</style >
<p class=”text” >Hello from my-element !</p >
</template >
<script > ... </script >
<style >
.text { color : blue }
</style >

Composants web
<style >
.text { color : red }
</style >
</template >
<style >
p.text { color : blue }
</style >

Composants web
<style >
p.text { color : red }
</style >
</template >
<style >
p.text { color : blue }
</style >

Composants web
<style >
p.text { color : red }
</style >
</template >
<style >
.text { color : blue !important }
</style >

Composants web
DOM de l’ombre
...
<script >
attachedCallback() {
const currentDocument = document.currentScript.ownerDocument ;
const template = currentDocument.querySelector(’#my-element’) ;
const shadowRoot = this.attachShadow({ mode : ’open’}) ;
shadowRoot.appendChild(template.content.cloneNode(true)) ;
}
}
</script >
...

Composants web
DOM de l’ombre
<style >
:host { color : red }
</style >
</template >
<style >
p { color : blue }
</style >

Composants web
DOM de l’ombre
<style >
:host { color : red }
</style >
</template >
<style >
my-element { color : blue }
</style >

Composants web
Imports HTML
my-element.html
...
</template >
<script >
...
}
</script >
index.html
<link rel=”import” href=”my-element.html” >

Composants web
Imports modules ES6
my-element.js
static get template() {
return ‘<style> .text { color: red; } </style>
<p class=”text”>Hello from my-element!</p>‘ ;
}
connectedCallback() {
const shadowRoot = this.attachShadow({ mode : ’open’ }) ;
shadowRoot.innerHTML = MyElement.template ;
}
}
index.html
<script type=”module” src=”my-element.js” ></script >

Composants web
Et c’est un élément HTML
attributs
propriétés
événements

Composants web
Frameworks
Frameworks :
Polymer, SkateJS, Slim.js, x-tag, Bosonic, Stencil, …
React, Angular, Vue, …
https ://custom-elements-everywhere.com/
Plus-value :
liaison de données bidirectionnelle
réduction du code standard

Composants web
Bibliothèques de composants
https ://www.webcomponents.org/
Polymer (iron, paper, app, gold)
Vaadin
Google (Maps, YouTube)

Composants web
Composants web dans la nature
Google (Polymer)
Chrome
YouTube, Drive, Contacts
App d’exemple : Shop
(https ://shop.polymer-project.org/)
Electronic Arts
GitHub
Simpla

Conception atomique
Section 4
Conception atomique

Conception atomique
Conception atomique
Atomic Design
Méthodologie de création et de maintenance d’un système de
conception graphique
Brad Frost, 2016
http ://atomicdesign.bradfrost.com/

Conception atomique
Conception atomique
atomes molécules organismes maquettes écrans

Conception atomique
Atome
éléments indivisibles
identité graphique

Conception atomique
Molécule
atomes liés
raison d’être

Conception atomique
Organisme
composé d’atomes, de
molécules ou
d’organismes
composant complexe

Conception atomique
Maquette
agencement
d’organismes
page générique

Conception atomique
Page
maquette + données
preuve du concept

Section 5

Microservices + Composants web
intégration par HTTP
chargement à la demande
résilience face aux pannes

Composants web + Conception atomique
La conception atomique est la méthodologie nécessaire pour
développer un système de composants efficace et évolutif
NPO : composants d’intégration (AJAX, état)

router : pages (maquettes)
microservices : molécules, organismes, maquettes
socle : atomes, molécules

Cas d’étude
Section 6
Cas d’étude

Conclusion
Section 7
Conclusion

Conclusion
Conclusion
+ équipes autonomes
+ exposer API et composants
+ rapidité de construction
+ choix du framework

Conclusion
Conclusion
+ équipes autonomes
+ exposer API et composants
+ rapidité de construction
+ choix du framework
− couplage fort entre API et IHM
− conception bibliothèque > conception application
− pas d’isolation des dépendances

Conclusion
Pour aller plus loin
Injection de dépendances et de configuration

Conclusion
Encapsulation de services tiers :

Conclusion
Auth0, Keycloak, Okta, …

Conclusion
Paypal

Conclusion
Paypal
OAuth2 via composant web : confiance ?

Conclusion
Paypal
OAuth2 via composant web : confiance ?
Logs, surveillance, instrumentation …

Full-stack Microservices

Recommandé

Recommandé

Contenu connexe

Similaire à Full-stack Microservices

Similaire à Full-stack Microservices (20)

Full-stack Microservices