Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich
 Überraschend mehr Möglichkeiten
© OPITZ CONSULTING 2019...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend?
Mission
Mi...
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich Seite 3
1
2
3
Microservices in a nutshell
Transclusion
Desi...
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich Seite 4
Microservices
 What?
 Why?
 When?
1
Microservice...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 5
Mi...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 6
Ma...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 7
Wh...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 8
Wh...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 9
Th...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 10
K...
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich Seite 11
Transclusion
Interacting
tiles
tiles
HTML
links
2
...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 12
T...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 13
T...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 14
T...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 15
C...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 16
D...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 17
D...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 18
I...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 19
S...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 20
T...
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich Seite 21
Design Considerations
3
Microservices reloaded - w...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 22
O...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 23
S...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 24
P...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 25
S...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 26
D...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 27
D...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 28
D...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 29
D...
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich
search result table
Microservices reloaded - what about the...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 31
W...
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich Seite 32
Implementing Micro-Frontends
 Server-side include...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 33
S...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 34
C...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 35
A...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 36
L...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 37
A...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 38
A...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 39
C...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 40
A...
© OPITZ CONSULTING 2019
Informationsklassifikation:
ÖffentlichMicroservices reloaded - what about the frontend? Seite 41
W...
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich Seite 42
Any Questions?
 It's your turn!
Microservices rel...
© OPITZ CONSULTING 2019
Informationsklassifikation:
Öffentlich
 Überraschend mehr Möglichkeiten
@OC_WIRE
OPITZCONSULTIN...
Upcoming SlideShare
Loading in …5
×

Microservices reloaded

18 views

Published on

- Microservicesin a nutshell
- Transclusion
- Design considerations

Vortragsfolien vom Digital Xchange 2019, weitere Informationen auf digital-xchange.de

Published in: Technology
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Microservices reloaded

  1. 1. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich  Überraschend mehr Möglichkeiten © OPITZ CONSULTING 2019 What about the frontend? Stephan Rauh Microservices reloaded
  2. 2. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Mission Mit unserer Leidenschaft für neue Technologien und unserem Anspruch an herausragende Beratung sind wir bei unseren Kunden der Motor der digitalen Transformation. Wir entwickeln überraschend mehr Möglichkeiten!» Seite 2
  3. 3. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich Seite 3 1 2 3 Microservices in a nutshell Transclusion Design considerations Microservices reloaded - what about the frontend?
  4. 4. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich Seite 4 Microservices  What?  Why?  When? 1 Microservices reloaded - what about the frontend?
  5. 5. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 5 Microservices: What? Why? How? When? When Not?  Less organisational/architectural friction  use Conway’s Law to your benefit  Separate deployments for separate services  Allows for a heterogenous system,  … which in turn leads to long-term evolvability Inspired by https://gustafnk.github.io/microservice-websites/ published under an MIT licence
  6. 6. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 6 Martin Fowler’s Definition of Microservices The microservice architectural style is an approach to developing a single application  as a suite of small services,  each running in its own process  and communicating with lightweight mechanisms,  often an HTTP resource API.  These services are built around business capabilities and independently deployable by fully automated deployment machinery.  May be written in different programming languages  and use different data storage technologies.
  7. 7. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 7 What About the Frontend?  Most developers just ignore the frontend  Martin Fowler’s article about microservices explicitly included the UI (but nobody remembers)  Let’s coin a new term: An Self Contained System, aka SCS is a “team-sized” microservice including its UI. Or call it portlet, if you’ve got a Java background.
  8. 8. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 8 What Developers and Architects Make of it Image source: https://micro-frontends.org/ published under an MIT license
  9. 9. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 9 The Majestic Monolith Published by Rene Aigner on https://www.deviantart.com/reneaigner/art/Monolith-283096035 under an MIT licence
  10. 10. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 10 Key Benefits of Microservices  Domain teams can work independently  Microservices can be deployed independently  Avoid constructing silos around technological capabilities  Loose coupling  encouraged by slow and unreliable interfaces  typically REST calls via TCP/IP Less complexity here Now the complexity hides at the interfaces!
  11. 11. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich Seite 11 Transclusion Interacting tiles tiles HTML links 2 Microservices reloaded - what about the frontend?
  12. 12. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 12 Transclusion Strategies
  13. 13. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 13 Transclusion Strategies Image source: https://pxhere.com/en/photo/1573451 published under an CC0 Public Domain license
  14. 14. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 14 Transclusion Strategies
  15. 15. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 15 Challenges of Loosely Coupled UIs  Cross-app style guide  Even across team boundaries! Image source: https://livingstyleguide.org/ / https://github.com/livingstyleguide/livingstyleguide/tree/master/website published under an MIT license Beware: UI team may become a bottleneck
  16. 16. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 16 Documents‐to‐Applications Continuum Which kind of application do you have? Image source: https://2018.ar.al/notes/the-documents-to-applications-continuum/ pulished under a CC BY-SA 4.0 licence
  17. 17. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 17 Documents‐to‐Applications Continuum Interacting tiles tiles HTML links
  18. 18. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 18 Image source: https://micro-frontends.org/ published under an MIT license
  19. 19. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 19 Spontaneous Developer Reactions We cannot do that! We must talk the customer out of it! https://commons.wikimedia.org/wiki/File:Spagetti_code_structural_graphic.GIF https://commons.wikimedia.org/wiki/File:Clean_Architecture_%2B_DDD,_full_application.svg Sometime is a sensible requirement Our job is to implement it in a maintainable way
  20. 20. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 20 The Real Challenge  How to implement „portlets“ in the first place?  How to avoid the mistakes of Java portlets?  How to avoid future maintanence hell?  https://commons.wikimedia.org/wiki/File:Spagetti_code_structural_graphic.GIF https://commons.wikimedia.org/wiki/File:Clean_Architecture_%2B_DDD,_full_application.svg 2021 2025
  21. 21. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich Seite 21 Design Considerations 3 Microservices reloaded - what about the frontend?
  22. 22. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 22 One Microservice per Page?  No! Don’t be shy!  Experience from the past:  Java portal server + portlets  That’s how to do it all wrong  Lessons learned:  Inter-portlet communication comes at a price  Keep the interfaces small → tiny portlets are useless → Portlets should cover a domain or a use-case Image source: https://gustafnk.github.io/microservice-websites/ published under an MIT licence
  23. 23. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 23 Sketch of the Application Dashboard Messages sent by the portlets Search results with deep links to the portlets Menu • Product catalog • Shopping cart • Account settings • … Microservice e.g. product catalog Depends on which menu item is selected Portal
  24. 24. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 24 Portal Dashboard Messages sent by the portlets Search results with deep links to the portlets Menu • Product catalog • Shopping cart • Account settings • … Microservice e.g. product catalog Depends on which menu item is selected
  25. 25. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 25 Sketch of the Solution  One „portal“ SCS  „portlet“ registry  Glue code to display them all on one page  Resilient to missing or broken „portlets“  Multiple „portlet“ SCSs  Registering at the portal  Loosely coupled to other „portlets“  Communication:  Server-side REST  Client-Side DOM events plus LocalStorage
  26. 26. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 26 Domain-Driven Architecture  You all know it  … 'nuff said! Image source: tweet by Michael Plöd
  27. 27. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 27 Domain-Driven Surprises  Sometimes entities belong to several domains  With little to no shared information Catalog Article Basket Shipping Controlling • Color • Image • Available sizes • Price • Quantity • Price • Revenue per item • Net revenue • Package size • Warehouse coordinates
  28. 28. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 28 Deep Search  Idea: portlets contain domain specific information  Our search should find that, too Rarely found in the wild
  29. 29. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 29 Deep Navigation  Add additional navigation info to the URL  http://example.com/product/324234 Selects the portlet → portal router Portlet-specific navigation → porlet router
  30. 30. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich search result table Microservices reloaded - what about the frontend? Seite 30 Adding Portlet Content to the Other Portlets  Most teams shy away from that  Additional server roundtrips  Generic solutions are difficult  … but rewarding? Rarely found in the wild
  31. 31. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 31 What About Transactions Across Services?  You rarely need them!  … if you‘re using useful domains boundaries
  32. 32. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich Seite 32 Implementing Micro-Frontends  Server-side includes  Client-Side includes  Angular Microfrontends  Alternative approaches 3 Microservices reloaded - what about the frontend?
  33. 33. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 33 Server-Side Rendering  Gustaf Nilsson Kotte has a great article on the topic
  34. 34. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 34 Client-Side Integration  Allows for optimistic UIs  Skeleton Screens  Generally: more options to tweak the user experience
  35. 35. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 35 Angular Microfrontends  We‘ve published two working sketches at our GitHub repository: https://github.com/opitzconsulting/ui-frontend-integration  Monorepos containing one portal and three Microfrontends  ng-micro-frontends-1 uses Angular 7  ng8-ivy uses Angular 8  And the new Ivy compiler
  36. 36. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 36 Live Demo Image source: https://www.flickr.com/photos/christiaancolen/20013034233 published under a CC BY-SA 2.0 license
  37. 37. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 37 Angular Microfrontends Implementation (1/2) Challenges:  Need to modify the Angular.json to create one single JS file → ngx-build-plus by Manfred Steyer → Angular.json on GitHub → Package.json auf GitHub  Remove the bootstrap code  The Angular runtime adds ~100 KB to each WebComponent  Add the code registering the WebComponent  Dynamically add the WebComponent to the portal page
  38. 38. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 38 Angular Microfrontends Implementation (2/2)  Bundle server and client into a common folder  Later: common deployment articfact  Create build skripts everybody can memorize  Old prototype used shell scripts  New prototype adds scripts to the package.json  Find a way to develop efficiently  Compiling and starting the entire Microfrontend suite is slow and tedious  Solved in the old prototype, open task in the Ivy prototype
  39. 39. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 39 CSS Namespaces  Every WebComponent uses the same CSS namespace  Christof’s build script fixes that:  view it on GitHub  Just add it to the postbuild script in the package.json  Probably there’s also a Webpack plugin doing the trick  but it’s really simple!
  40. 40. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 40 Angular Microfrontends Challenges:  Both portal router and portlet router must react to URL changes  Sometime the portal router doesn’t pick up the URL changes
  41. 41. © OPITZ CONSULTING 2019 Informationsklassifikation: ÖffentlichMicroservices reloaded - what about the frontend? Seite 41 Would you do it Again?  Angular 8 supports creating WebComponents  Getting better each version  but it still feels clumsy  Ivy is a huge improvement!  Plus, they promise to make Ivy even better with Angular 9  Vue.js is reported to be much simpler  … but I didn’t use it myself yet  Vue.js WebComponent need the Vue.js runtime, resulting in a memory penalty → evaluate both Angular and Vue.js before starting the project → Also have a look at Stencil and Svelte
  42. 42. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich Seite 42 Any Questions?  It's your turn! Microservices reloaded - what about the frontend?
  43. 43. © OPITZ CONSULTING 2019 Informationsklassifikation: Öffentlich  Überraschend mehr Möglichkeiten @OC_WIRE OPITZCONSULTING opitzconsulting opitz-consulting-bcb8-1009116 WWW.OPITZ-CONSULTING.COM Seite 43 Let‘s make the web a place to be! Stephan Rauh OC architecture board 0172-205 59 66 Stephan.Rauh@opitz-consulting.com @beyondjava http://www.beyondjava.net Microservices reloaded - what about the frontend?

×