Talking about our Micro-Frontends Architecture

3. Introduction To
Micro
Frontends

7. We All Want To Work With
The Newest Technology

8. Meitar Karas
 Team Lead @ CyberArk
Technology Lover

9. What Are We Going To Talk
About?
 Motivation
 What is Micro Frontends?
 How to implement Micro Frontends?
 CyberArk proprietary solution
 Challenges
 Pros/Cons in Micro Frontends architecture

10. 2013
20132016 2015
2015

11. Revolution

12. Frontend Teams are
getting bigger

13. dav the Frontend Ninja Client Team
riel the Backend Ninja Backend Team
API
Functional teams

14. Cross Functional
Teams

15. Microservices

16. Cross Functional
Teams

17. Web Architecture

18. Request
Monitoring
Accounts
Front-End Monolith
Gated API Server Side

19. The Monolith
Approach
Long deployment cycle
Single CI/CD operation
Single codebase
Easy and quick setup
Long build time
Don’t support our organization structure
Easy to share infrastructure
Great performance
We can’t change our technology stack

20. 2016
Microfrontends Architecture

21. Integration via
composition
ple components have to integrate due to the desire

22. `
`
`
Left Navigation Bar Team
Grid Team Top Bar Team
Header Team

23. Split into multiple pages or multiple SPAs, where each team
takes care of a page or a collection of pages, and there is no
integration on page level between teams
Integration by links

24. Monitoring Team
Accounts Team
Request team
``

25. How To Implement Micro
Frontend Architecture

26. Server side composition

27. Server side composition

29. Web Components
A standard component model for the Web,
consisting of several pieces
maintained in different places

30. Word count

31. Single-SPA
Build micro frontends that coexist and
can each be written with their own
framework.

32. Single-SPA

33. single-spa-angularjs
single-spa-angular
single-spa-angular-cli
single-spa-cycle
single-spa-ember
single-spa-inferno
single-spa-preact
single-spa-react
single-spa-svelte
single-spa-vue
Supported Frameworks

34. Iframes

36. Iframes
Iframe offers the simplest option which is
also supported by all browsers. Each
Iframe simply needs the endpoint URL and
the content is loaded from that URL

37. http://www.cyberark.com
http://www.cyberark.com/innerIframe
http://www.cyberark.com
Iframes
http://www. differentdomain.com/innerIframe

38. Don’t Use Non Friendly
Iframes
 CORS issues
 inject malicious code as an
iframe
 Clickjacking

39. Clickjacking

40. CyberArk proprietary solution
canSeeClientApplication()
true
getApplicationBundle()
Shell Server Application Server

41. CyberArk proprietary solution
 Based on friendly Iframes
 Shell Utils
 Communication between iframes
 Based on Injection objects on the iframe
window

42. export const methodsList = [
log,
alert,
freeze,
unfreeze,
updateShellUrl,
showFeedbackFloatingMessage,
showFeedbackMessage,
resetFeedBackMessage,
removeFloatingFeedBackMessage
];
Shell Utils

43. Application Life Cycle
• onCreate
• onStart
• onPause
• onResume
• onStop
• onDestroy

44. Challenges

45. Shell Code, Vanilla or
Framework?

46. Login

47. Dedicated Team

48. Performance

49. The Micro Frontend
Approach
Reduce time to market- release new features very quickly
Short build time
Complex CI/CD
Easy to share infrastructure- if you do it the right way
Team Autonomy – Technology and deployment
Maintaining consistency- Communication
Between apps is complex
Code consistency
Stop the breaking changes
Load time

50. Micro Frontends ===

51. The MicroFrontend
Approach
Short deployment cycles
Short build time
Easy and quick setup
Complex CI/CD
Easy to share infrastructure- if you do it the right way
Great performance- Can scale only what I need
Team Autonomy – Technology and deployment
Maintaining consistency- Communication
Between apps is complex
Code consistency
Thank you!