![export const methodsList = [
log,
alert,
freeze,
unfreeze,
updateShellUrl,
showFeedbackFloatingMessage,
showFeedbackMessage,
resetFeedBackMessage,
removeFloatingFeedBackMessage
];
Shell Utils](https://image.slidesharecdn.com/presentationmeetup-toupload-180809122745/85/Introduction-To-Micro-Frontends-42-320.jpg)
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
- 11. Revolution
- 12. Frontend Teams are getting bigger
- 13. dav the Frontend Ninja Client Team riel the Backend Ninja Backend Team API Functional teams
- 15. Microservices
- 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
- 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
- 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
- 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
- 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
- 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!