Micro front ends introduction

1. MICRO FRONTENDS
1
rparthas
in/rajagopalparthasarathi

2. ©ThoughtWorks 2018 Commercial in Confidence
What is this shiny thing ?
2

3. ©ThoughtWorks 2018 Commercial in Confidence
Microservices
3
● Improve fault isolation
● Make Change less expensive
● Separation of Concerns
● Scalable

4. ©ThoughtWorks 2018 Commercial in Confidence
Why Micro Front ends ?
● Small Autonomous Teams(BFF)
4

5. ©ThoughtWorks 2018 Commercial in Confidence
What we need ?
1. A shared codebase in pure JavaScript e.g. managing routing and user sessions. Also
some shared CSS. Both should be as thin as possible.
1. A collection of separate modules, “mini-apps”, built in various frameworks. Stored
in different code repositories.
1. A deployment system that bundles all the modules together from different
repositories and deploys to a server, as and when needed.
5

6. ©ThoughtWorks 2018 Commercial in Confidence
Web Components
● Custom Elements
- Own Tags with lifecycle
● Shadow DOM
- Encapsulate JS,CSS and HTML
● HTML Imports
- Package for web components
● HTML Templates
6

7. ©ThoughtWorks 2018 Commercial in Confidence
Are Web Components the only way ?
7

8. ©ThoughtWorks 2018 Commercial in Confidence
Documents to Application
8
Server Side -> PWA -> Client Side
Web Server Integration ------> Integration at Browser level with custom events

9. THANK YOU
For questions or suggestions:
Rajagopal
psraja@ThoughtWorks.com
9