Microservices architecture allows a very rich and complex application to be split into loosely coupled components each maintained by an autonomous team possibly using different technology. At least that is the case for back-ends. Front-ends are still largely monolithic, even though frameworks help reduce complexity. After explaining the basics of Web Components and Atomic Design, I propose how to use them respectively as a technical and organizational framework for building and deploying full-stack microservices. The full user experience is simply a composition of micro-front-ends themselves reusing a project-wide or brand-wide collection of base components. A demo application is shown to illustrate these concepts.

1. 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

2. 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

3. Introduction
Section 1
Introduction
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 3 / 45

4. Introduction
Microservices
Advantages
separation (”divide and conquer”)
autonomy
automation
modularity
scaling
tech stack transitions
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 4 / 45

5. Introduction
Microservices
Price to pay
complex integration
consistency or availability
hard boundaries
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 5 / 45

6. Introduction
Microservices
Microservices are cool

William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 6 / 45

7. Introduction
Microservices
Server-side Client-side
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 7 / 45

8. Introduction
Microservices
Micro Frontends: https://micro-frontends.org/
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 8 / 45

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

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

11. It’s All Relative
Section 2
It’s All Relative
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 11 / 45

12. It’s All Relative
Micro Frontends
Micro Frontends : https://micro-frontends.org/
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 12 / 45

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

14. It’s All Relative
OpenComponents, OpenTable
API for UI components
SSR or not
https://opencomponents.github.io/
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 14 / 45

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

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

17. It’s All Relative
Other options
JSP/ASP.Net Fragments
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 17 / 45

18. It’s All Relative
Other options
JSP/ASP.Net Fragments
JSP Tag Library
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 17 / 45

19. It’s All Relative
Other options
JSP/ASP.Net Fragments
JSP Tag Library
Struts Tiles
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 17 / 45

20. It’s All Relative
Other options
JSP/ASP.Net Fragments
JSP Tag Library
Struts Tiles
Portlets (Liferay)
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 17 / 45

21. It’s All Relative
Other options
JSP/ASP.Net Fragments
JSP Tag Library
Struts Tiles
Portlets (Liferay)
<iframe>
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 17 / 45

22. Web Components
Section 3
Web Components
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 18 / 45

23. Web Components
Web Components
Web Components
Reusable, modular components for the web.
4 W3C specifications
started in 2011
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 19 / 45

24. Web Components
Demo
Find this demo on CodePen
https://codepen.io/punkstarman/project/editor/AEKqQg
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 20 / 45

25. Web Components
Custom Elements
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 21 / 45

26. Web Components
It’s an HTML element
attributes
properties
events
styling
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 22 / 45

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

28. Web Components
Component libraries
https://www.webcomponents.org/
Polymer (iron, paper, app, gold)
Vaadin
Google (Maps, YouTube)
Predix UI
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 24 / 45

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

30. Atomic Design
Section 4
Atomic Design
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 26 / 45

31. Atomic Design
Atomic Design
Atomic Design
Methodology for creating and maintaining a graphic design system
Brad Frost, 2016
http://atomicdesign.bradfrost.com/
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 27 / 45

32. Atomic Design
Atomic Design
atoms molecules organisms templates screens
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 28 / 45

33. Atomic Design
Atom
indivisible
graphical identity
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 29 / 45

34. Atomic Design
Molecule
connected atoms
purpose
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 30 / 45

35. Atomic Design
Organism
composed atoms, molecules or
other organisms
complexity
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 31 / 45

36. Atomic Design
Template
layout of organisms
generic page
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 32 / 45

37. Atomic Design
Page
template + data
proof of concept
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 33 / 45

38. Full-stack Microservices
Section 5
Full-stack Microservices
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 34 / 45

39. Full-stack Microservices
Microservices + Web Components
integration over HTTP
lazy loading
fault tolerance
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 35 / 45

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

41. Full-stack Microservices
Full-stack Microservices
User
router
F
auth
FB
catalog
FB
order
FB
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 37 / 45

42. Full-stack Microservices
Full-stack Microservices
User
auth
FB
catalog
FB
order
FB
shared components
F
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 38 / 45

43. Full-stack Microservices
Full-stack Microservices
User
router
F
auth
FB
catalog
FB
order
FB
shared components
F
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 39 / 45

44. Full-stack Microservices
Full-stack Microservices
User
router
pages
service
templates, organisms, molecules
shared components
molecules, atoms
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 40 / 45

45. Case Study
Section 6
Case Study
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 41 / 45

46. O gods of Demo,
we beseach thee

47. Conclusion
Section 7
Conclusion
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 43 / 45

48. Conclusion
Conclusion
+ Autonomous teams
+ expose API and components
+ RAD
+ choice of framework
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 44 / 45

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

50. Conclusion
Future Work
Dependency and Configuration Injection
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 45 / 45

51. Conclusion
Future Work
Dependency and Configuration Injection
Encapsulation of third party services:
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 45 / 45

52. Conclusion
Future Work
Dependency and Configuration Injection
Encapsulation of third party services:
Auth0, Keycloak, Okta, …
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 45 / 45

53. Conclusion
Future Work
Dependency and Configuration Injection
Encapsulation of third party services:
Auth0, Keycloak, Okta, …
Paypal
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 45 / 45

54. Conclusion
Future Work
Dependency and Configuration Injection
Encapsulation of third party services:
Auth0, Keycloak, Okta, …
Paypal
OAuth2 via Web Components: trust?
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 45 / 45

55. Conclusion
Future Work
Dependency and Configuration Injection
Encapsulation of third party services:
Auth0, Keycloak, Okta, …
Paypal
OAuth2 via Web Components: trust?
Logs, monitoring, instrumentation …
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 45 / 45