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.

Microservices in the front end

78 views

Published on

This is a discussion around how to build a front-end microservice website and what the potential benefits and drawbacks are

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Microservices in the front end

  1. 1. BUILDING FRONT END APPS THAT MICROSERVICES ON THE FRONT- END
  2. 2. WHO AM I? JON PREECE, CONTRACT FRONT-END DEVELOPER ▸I’ve worked on many front-end applications over several years, started in .NET but now front-end specialist ▸I am fairly active on GitHub. GitHub.com/jpreecedev ▸I want to give back to the community that has helped me so much… I am open to speaking opportunities. ▸I am always learning, feedback is very (very) welcome ▸Email me on jonpreece@hotmail.co.uk
  3. 3. DISCUSSION POINTS OVERVIEW OF TONIGHTS TALK ▸What is microservice architecture? ▸How can the concept be applied to the front-end? ▸Pros and cons? ▸Repository structure and tooling ▸State management
  4. 4. GITHUB.COM / JPREECEDEV
  5. 5. BUILDING FRONT END APPS THAT MICROSERVICES ON THE FRONT- END
  6. 6. SCALABILI TY
  7. 7. PROJECT
  8. 8. PROJECT
  9. 9. PROJECT
  10. 10. PROJECT
  11. 11. PROJECT
  12. 12. PROJEC T PROJEC T PROJEC T PROJEC T
  13. 13. PERFORM ANCE
  14. 14. WHAT IS MICROSERVICE ARCHITECTURE? SCALABILITY, PERFORMANCE & OTHER BENEFITS ▸Small, fairly isolated applications ▸Can be scaled horizontally and vertically ▸Independently deployable ▸Continuous delivery and deployment ▸Lower risk ▸Simplified fallback strategy ▸Ability to use different frameworks on one page
  15. 15. FRONT END HEADER FOOTER MENU
  16. 16. FRONT END HEADER FOOTER MENU
  17. 17. PERFORM ANCE
  18. 18. MENU API HEADER API AWS TRUST PILOT FRONT END Client requests data, possibly on page load
  19. 19. MENU API HEADER API AWS TRUST PILOT FRONT END GATEWAY
  20. 20. MENU API HEADER API AWS TRUST PILOT FRONT END GATEWAY
  21. 21. SOURCE CONTROL
  22. 22. MULTI REPO
  23. 23. SOURCE CONTROL WE HAVE A LOT OF REPOSITORIES ▸Shell ▸Footer ▸Head ▸Jumbotron ▸Listing ▸Results ▸Styling ▸Web Gateway ▸Back-end API(s)
  24. 24. MONO REPO
  25. 25. SOURCE CONTROL WE HAVE ONE REPOSITORY ▸Buy my house
  26. 26. TOOLING
  27. 27. YARN WORKSPACES COMBINED WITH LERNA IS AMAZINGJon Preece 21st November QUOTE OF THE DAY
  28. 28. STATE
  29. 29. WRAP UP
  30. 30. MICROSER VICE ENVY https://www.thoughtworks.com/radar/techniques/microservice-envy
  31. 31. PROS
  32. 32. CONS
  33. 33. SUMMARY FRONT-END MICROSERVICE ARCHITECTURE ▸Break your front end into smaller pieces, which can be independently iterated, deployed and managed ▸An intermediate service called a Web Gateway may help reduce chatter and improve performance ▸Putting all your components/services into a single repo, called a Monorepo, may make developing easier ▸A general purpose solution for sharing state is required
  34. 34. WHO AM I? JON PREECE, CONTRACT FRONT-END DEVELOPER ▸I’ve worked on many front-end applications over several years, started in .NET but now front-end specialist ▸I am fairly active on GitHub. GitHub.com/jpreecedev ▸I want to give back to the community that has helped me so much… I am open to speaking opportunities. ▸I am always learning, feedback is very (very) welcome ▸Email me on jonpreece@hotmail.co.uk

×