Fullstack Microservices

Full-stack Microservices
William Bartlett
 w.bartlett@treeptik.fr  @bartlettstarman
 punkstarman  punkstarman
Treeptik
15 November, 2018
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 1 / 45

whoami?
William Bartlett, Level 23
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
Advantages
separation (”divide and conquer”)
autonomy
automation
modularity
scaling
tech stack transitions

Introduction
Microservices
Price to pay
complex integration
consistency or availability
hard boundaries

Introduction
Microservices
Microservices are cool


Introduction
Microservices
Server-side Client-side

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

Introduction
Issue
Issue
How to build a large product with entirely autonomous multi-disciplinary teams?
Bring microservices to the front-end
Tech solution: distributed web components
Org solution: Atomic Design

Introduction
Outline
It’s All Relative
Web Components
Atomic Design
Case Study

It’s All Relative
Section 2
It’s All Relative

It’s All Relative
Micro Frontends
Micro Frontends : https://micro-frontends.org/

It’s All Relative
Project Mosaic, Zalando
Skipper (router), InnKeeper (router config API)
Tailor (layout), Quilt (layout storage)
Shaker (components)
Tessellate (SSR)
https://www.mosaic9.org/

It’s All Relative
OpenComponents, OpenTable
API for UI components
SSR or not
https://opencomponents.github.io/

It’s All Relative
Metaframework, CanopyTax
Single SPA
Runtime stitching of micro-frontends.
https://github.com/CanopyTax/single-spa
Example : https://single-spa.surge.sh/

It’s All Relative
Microservice Websites, Gustaf Nilsson Kotte
Microservice Websites
Scalable development of an evolvable system with great mobile performance.
performance
autonomy ⇒ heterogeneity and scalability
Manifesto
Article
Tools:
Edge-Side Includes
Client-Side Includes
Caching (Varnish)

It’s All Relative
Other options
JSP/ASP.Net Fragments

It’s All Relative
Other options
JSP Tag Library

It’s All Relative
Other options
JSP Tag Library
Struts Tiles

It’s All Relative
Other options
JSP Tag Library
Struts Tiles
Portlets (Liferay)

It’s All Relative
Other options
JSP Tag Library
Struts Tiles
Portlets (Liferay)
<iframe>

Web Components
Section 3
Web Components

Web Components
Web Components
Web Components
Reusable, modular components for the web.
4 W3C specifications
started in 2011

Web Components
Demo
Find this demo on CodePen
https://codepen.io/punkstarman/project/editor/AEKqQg

Web Components
Custom Elements

Web Components
It’s an HTML element
attributes
properties
events
styling

Web Components
Frameworks
Frameworks:
Polymer, SkateJS, Slim.js, x-tag, Bosonic, Stencil, …
React, Angular, Vue, …
https://custom-elements-everywhere.com/
Added bonuses:
two-way data-binding
boilerplate reduction

Web Components
Component libraries
https://www.webcomponents.org/
Polymer (iron, paper, app, gold)
Vaadin
Google (Maps, YouTube)
Predix UI

Web Components
Web Components in the Wild
Google (Polymer)
Chrome
YouTube, Drive, Contacts
Example app: Shop (https://shop.polymer-project.org/)
Electronic Arts
GitHub
Simpla

Atomic Design
Section 4
Atomic Design

Atomic Design
Atomic Design
Atomic Design
Methodology for creating and maintaining a graphic design system
Brad Frost, 2016
http://atomicdesign.bradfrost.com/

Atomic Design
Atomic Design
atoms molecules organisms templates screens

Atomic Design
Atom
indivisible
graphical identity

Atomic Design
Molecule
connected atoms
purpose

Atomic Design
Organism
composed atoms, molecules or
other organisms
complexity

Atomic Design
Template
layout of organisms
generic page

Atomic Design
Page
template + data
proof of concept

Section 5

Microservices + Web Components
integration over HTTP
lazy loading
fault tolerance

Web Components + Atomic Design
Atomic Design is the methodology needed to develop a system of components efficiently.
Web Components are a solution that can enable Atomic Design.
DNF: integration components (AJAX, state)

User
router
F
auth
FB
catalog
FB
order
FB

User
auth
FB
catalog
FB
order
FB
shared components
F

User
router
F
auth
FB
catalog
FB
order
FB
shared components
F

User
router
pages
service
templates, organisms, molecules
shared components
molecules, atoms

Case Study
Section 6
Case Study

O gods of Demo,
we beseach thee

Conclusion
Section 7
Conclusion

Conclusion
Conclusion
+ Autonomous teams
+ expose API and components
+ RAD
+ choice of framework

Conclusion
Conclusion
+ Autonomous teams
+ expose API and components
+ RAD
+ choice of framework
− strong coupling between API and UI
− library design > application design
− difficult to isolate dependencies

Conclusion
Future Work
Dependency and Configuration Injection

Conclusion
Future Work
Encapsulation of third party services:

Conclusion
Future Work
Auth0, Keycloak, Okta, …

Conclusion
Future Work
Paypal

Conclusion
Future Work
Paypal
OAuth2 via Web Components: trust?

Conclusion
Future Work
Paypal
OAuth2 via Web Components: trust?
Logs, monitoring, instrumentation …

Fullstack Microservices

More Related Content

Similar to Fullstack Microservices (20)

Recently uploaded (20)

Fullstack Microservices