Full-stack Microservices

Full-stack Microservices

William Bartlett

• E-mail: w.bartlett@treeptik.fr
• Twitter: @bartlettstarman
• LinkedIn: punkstarman
• GitHub: punkstarman

Treeptik

15 November, 2018

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” William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 2 / 45

Introduction

Microservices

Advantages

• separation (”divide and conquer”)
• autonomy
• automation
• modularity
• scaling
• tech stack transitions

Microservices

Price to pay

• complex integration
• consistency or availability
• hard boundaries

Microservices

Microservices are cool

Microservices

Server-side = fun Client-side = monolithic monstrosity

Microservices

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

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

Outline

• It’s All Relative
• Web Components
• Atomic Design
• Full-stack Microservices
• Case Study William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 10 / 45

It’s All Relative

Micro Frontends

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

Project Mosaic, Zalando

• Skipper (router), InnKeeper (router config API)
• Tailor (layout), Quilt (layout storage)
• Shaker (components)
• Tessellate (SSR)

https://www.mosaic9.org/

OpenComponents, OpenTable

• API for UI components
• SSR or not

https://opencomponents.github.io/

Metaframework, CanopyTax

Single SPA

• Runtime stitching of micro-frontends.

https://github.com/CanopyTax/single-spa

Example: https://single-spa.surge.sh/

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)

Other options

• JSP/ASP.Net Fragments

Other options

• JSP/ASP.Net Fragments
• JSP Tag Library

Other options

• JSP/ASP.Net Fragments
• JSP Tag Library
• Struts Tiles

Other options

• JSP/ASP.Net Fragments
• JSP Tag Library
• Struts Tiles
• Portlets (Liferay)

Other options

• JSP/ASP.Net Fragments
• JSP Tag Library
• Struts Tiles
• Portlets (Liferay)
• <iframe>

Web Components

Web Components

Web Components: Reusable, modular components for the web.

• 4 W3C specifications
• started in 2011

Demo

Find this demo on CodePen

https://codepen.io/punkstarman/project/editor/AEKqQg

Custom Elements

Browser support

It’s an HTML element

• attributes
• properties
• events
• styling

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

Component libraries

https://www.webcomponents.org/

• Polymer (iron, paper, app, gold)
• Vaadin
• Google (Maps, YouTube)
• Predix UI

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

Atomic Design

Atomic Design: Methodology for creating and maintaining a graphic design system

Brad Frost, 2016

http://atomicdesign.bradfrost.com/

Atomic Design

• atoms
• molecules
• organisms
• templates
• screens

Atom

• indivisible
• graphical identity

Molecule

• connected atoms
• purpose

Organism

• composed atoms, molecules or other organisms
• complexity

Template

• layout of organisms
• generic page

Page

• template + data
• proof of concept

Full-stack Microservices

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)

Full-stack Microservices

Full-stack Microservices

Full-stack Microservices

Full-stack Microservices

Case Study

O gods of Demo, we beseach thee

Conclusion

Conclusion

• Autonomous teams
• expose API and components
• RAD
• choice of framework

Conclusion

• strong coupling between API and UI
• library design > application design
• difficult to isolate dependencies

Future Work

• Dependency and Configuration Injection

Future Work

• Dependency and Configuration Injection
• Encapsulation of third party services:

Future Work

• Dependency and Configuration Injection
• Encapsulation of third party services:
  • Auth0, Keycloak, Okta, …

Future Work

• Dependency and Configuration Injection
• Encapsulation of third party services:
  • Auth0, Keycloak, Okta, …
  • Paypal

Future Work

• Dependency and Configuration Injection
• Encapsulation of third party services:
  • Auth0, Keycloak, Okta, …
  • Paypal
• OAuth2 via Web Components: trust?

Future Work

• Dependency and Configuration Injection
• Encapsulation of third party services:
  • Auth0, Keycloak, Okta, …
  • Paypal
• OAuth2 via Web Components: trust?
• Logs, monitoring, instrumentation …