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

1. BUILDING FRONT
END APPS THAT
MICROSERVICES ON THE FRONT-
END

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

8. GITHUB.COM / JPREECEDEV

9. BUILDING FRONT
END APPS THAT
MICROSERVICES ON THE FRONT-
END

11. SCALABILI
TY

12. PROJECT

13. PROJECT

14. PROJECT

15. PROJECT

16. PROJECT

17. PROJEC
T
PROJEC
T
PROJEC
T
PROJEC
T

18. PERFORM
ANCE

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

21. FRONT END
HEADER
FOOTER
MENU

22. FRONT END
HEADER
FOOTER
MENU

23. PERFORM
ANCE

24. MENU API HEADER API
AWS
TRUST PILOT
FRONT END Client requests data, possibly on page load

25. MENU API HEADER API
AWS
TRUST PILOT
FRONT END
GATEWAY

26. MENU API HEADER API
AWS
TRUST PILOT
FRONT END
GATEWAY

27. SOURCE
CONTROL

28. MULTI
REPO

29. SOURCE CONTROL
WE HAVE A LOT OF REPOSITORIES
▸Shell
▸Footer
▸Head
▸Jumbotron
▸Listing
▸Results
▸Styling
▸Web Gateway
▸Back-end API(s)

30. MONO
REPO

31. SOURCE CONTROL
WE HAVE ONE REPOSITORY
▸Buy my house

37. TOOLING

38. YARN
WORKSPACES
COMBINED WITH
LERNA
IS AMAZINGJon
Preece
21st November
QUOTE OF THE DAY

40. STATE

43. WRAP UP

44. MICROSER
VICE ENVY
https://www.thoughtworks.com/radar/techniques/microservice-envy

45. PROS

46. CONS

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

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