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.

Building application in a "Microfrontends" way - Prasanna N Venkatesen *XConf Munich&Barcelona

730 views

Published on

In this talk, we plan to explain some general tech considerations that developers need to be aware of while building a micro-frontends application. This comes from my year-long experience in building a micro-frontends application in a geographically distributed team. I will share some approaches and practices that worked for us and things that were learned from them!

Published in: Software
  • Finally found a service provider which actually supplies an essay with an engaging introduction leading to the main body of the exposition Here is the site ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building application in a "Microfrontends" way - Prasanna N Venkatesen *XConf Munich&Barcelona

  1. 1. Building applications in a Micro-frontends way Prasanna N Venkatesan@pvenk
  2. 2. Lead Developer with ThoughtWorks for 9 Years pvenk prasann #java #ruby #javascript #clojure prasann@thoughtworks.com
  3. 3. AGENDA Team and Tech- stack Introducing Micro- frontends Things to take care in Micro-frontends When to choose Micro-frontends
  4. 4. TEAM AND TECH-STACK Migrate a legacy application for selling cars by 2020 5teams with 30developers distributed over 2countries
  5. 5. AGENDA Team and Tech- stack Introducing Micro- frontends Things to take care in Micro-frontends When to choose Micro-frontends
  6. 6. INTRODUCING MICRO-FRONTENDS Monoliths aren’t a bad design choice Monolith web application
  7. 7. INTRODUCING MICRO-FRONTENDS Then came Microservices Monolith web application ● Strong module boundaries ● Independent deployment ● Technology diversity But...
  8. 8. INTRODUCING MICRO-FRONTENDS Microservices were like these Monolith web application Independent deployments !== Independent releases Frontend Monolith
  9. 9. INTRODUCING MICRO-FRONTENDS All of Microservices’ promises + Independent releases Frontend Monolith Monolith web application Micro-frontends
  10. 10. AGENDA Team and Tech- stack Introducing Micro- frontends Things to take care in Micro-frontends When to choose Micro-frontends
  11. 11. THINGS TO LOOK OUT IN MICRO-FRONTENDS ● Composing multiple frontends ● Sharing data between multiple frontends. ● Consistent UX across multiple frontends ● Testing strategy
  12. 12. INTRODUCING SERVICES Configure Search Order Frame A business-logic agonistic orchestrator service that knows how to download the rest of the services’ frontend
  13. 13. 1 3 Composing Multiple Frontends
  14. 14. COMPOSING MULTIPLE FRONTENDS Build time Composition Run-time Composition vs
  15. 15. BUILD TIME FRONTEND COMPOSITION Search Configure Order Package Registry Frame deploys to deploys to deploys to builds the app deploys App Server
  16. 16. BUILD TIME FRONTEND COMPOSITION Good dependency management resulting in smaller bundles Independent cross team development A monolith built by different teams Non atomic deployments
  17. 17. RUN TIME FRONTEND COMPOSITION Frame downloaded initially Search Configure Order downloaded later dow nloaded later downloadedlater Integration happens in browser
  18. 18. RUN TIME FRONTEND COMPOSITION - TOOLKIT Client Side ● JSPM ● SystemJS ● FrintJS ● Single-Spa Server Side ● SSI (Server side includes) ● Tailor (from Zalando)
  19. 19. RUN TIME FRONTEND COMPOSITION Independent teams with independent deployments. Atomic deployments, so no versioning issues. Too many network calls from client, with increased bundle size.
  20. 20. Sharing data between multiple frontends
  21. 21. SHARING DATA - COMPONENT INITIALIZATION
  22. 22. SHARING DATA - BROWSER STORE State Management Tools MobX
  23. 23. SHARING DATA - THROUGH DOM EVENTS
  24. 24. SHARING DATA - REDUX ACTIONS ● Reducers will receive all actions within a store. ● Dynamically possible to combine reducers after store initialization.
  25. 25. Design consistency
  26. 26. DESIGN CONSISTENCY Design Issues UX Consistency CSS Ambiguity
  27. 27. CSS AMBIGUITY
  28. 28. CSS AMBIGUITY
  29. 29. UX CONSISTENCY
  30. 30. UX CONSISTENCY Design Guild
  31. 31. UX CONSISTENCY Design Guild # 0 0 7 8 b f 0 ,1 2 0 ,1 9 1 # 0 0 b c c d 0 ,1 8 8 ,2 0 5 # 7 d c e d 5 1 2 5 ,2 0 6 ,2 1 3 # 0 0 a a 5 b 0 ,1 7 0 ,9 1 # 8 5 b 8 8 0 1 3 3 ,1 8 4 ,1 2 8 # b d b d 3 2 1 8 9 ,1 8 9 ,5 0 # f f f 3 5 0 2 5 5 ,2 4 3 ,8 0 # f b e 0 c e 2 5 1 ,2 2 4 ,2 0 6 # f 2 b a 9 7 2 4 2 ,1 8 6 ,1 5 1 # a 1 7 8 6 1 1 6 1 ,1 2 0 ,9 7 # 8 0 8 1 8 4 1 2 8 ,1 2 9 ,1 3 2 # e e e e e e 2 3 8 ,2 3 8 ,2 3 8 # e e 5 b a 0 2 3 8 ,9 1 ,1 6 0 # 7 0 2 2 6 9 1 1 2 ,3 4 ,1 0 5 # b 5 1 b 5 8 1 8 1 ,2 7 ,8 8 # e d 3 1 2 f 2 3 ` 7 ,4 9 ,4 7 # f 5 8 a 3 3 2 4 5 ,1 3 8 ,5 1 # 5 f 3 c 2 5 9 5 ,6 0 ,3 7 Styleguide
  32. 32. Testing strategy
  33. 33. TESTING STRATEGY 3 3 Integration Tests ● Consumer driven Contracts (CDC) ● Api journey tests
  34. 34. TESTING STRATEGY - CDC 3 4 ● Frame services is the consumer of all services ● Frame issues a contract that runs in all pipelines
  35. 35. TESTING STRATEGY - CDC 3 5 Sample of Frame’s contract
  36. 36. TESTING STRATEGY 3 6 Functional Tests
  37. 37. TESTING STRATEGY 3 7 Service level testing Application Smoke Test
  38. 38. AGENDA Team and Tech- stack Introducing Micro- frontends Things to take care in Micro-frontends When to choose Micro-frontends
  39. 39. WHEN MICRO-FRONTENDS ● Distributed self-contained teams, with a need for independent releases. ● Collaborate with different frameworks in the frontend. ● Teams have experience building Microservices application, and willing to take it to next step.
  40. 40. It’s not a sprint, it’s a marathon.
  41. 41. Questions? Prasanna N Venkatesan@pvenk

×