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.
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
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
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
26. Web Components
It’s an HTML element
attributes
properties
events
styling
William Bartlett (Treeptik) Full-stack Microservices 15 November, 2018 22 / 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
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
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
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
