Applying microservices principles to front end
Download as PPTX, PDF1 like515 views
This document discusses community partners and how to build a frontend architecture using microservices and single page applications. It proposes using an API gateway to route requests to backend services and hosting frontend code and single page applications to improve isolation, ownership, and integration. Cross-domain communication between components is enabled through postMessage while maintaining security.
Applying microservices principles to front end
- 3. Frontend (SPA) API Gateway svc svc svc svc
- 5. API Gateway svc svc svc svc APP APP APP APP
- 9. • Composition reduces complexity
- 10. • One flow on information
- 11. • Different domains • Different technologies • Different release cycles • Isolation • Ownership • Easy integration
- 13. • Iframes and popups • Too much static. • Difficult communication. • Doesn’t inherit styles. • Browsers behaving very differently, i.e. popups open in a full page. • Slower to load. • window.postMessage • Browsers behaving differently, i.e. IE 11 < will prevent window-to-window. • Fire and forget. • One huge event handler where all messages are delivered. • Difficult to secure communication.
- 14. window.parent.postMessage( ‘Get user token’, ‘*’); https://www.mysite.com https://product.mysite.com
- 15. https://www.mysite.com https://product.mysite.com message.source.postMessage(‘User token: XYZ’, *); window.parent.postMessage( ‘Get user token’, ‘*’);
- 16. https://www.mysite.com https://product.mysite.comhttps://www.hacker-site.com window.parent.postMessage( ‘Send user token’, ‘*’); window.parent.postMessage( ‘Get user token’, ‘*’);
- 17. • Safely allow cross-origin communication between different pages.
- 18. • Safely allow cross-origin communication between different pages.
- 20. • Abstract rendering into: • Iframe • Window • Provides a simple component-like contract. • Supporting passing properties down, actions up. • Securely handle communication. • Technology specific adapters.
- 25. • Host pass down props. • Component bubble up events. • Component subscribe to props change to update internal state. • Updating component internal state trigger UI changes. • Host can update props based on events. One flow of data
- 26. Set Props On Props Raise event On event Set Props On Props Raise event On event Host Component
- 28. 1 3 2
- 29. 1 2 3
- 42. • Xcomponent is not meant to replace native components. • Use it to share complete functionality. • Keeps contract simple.
- 43. • Bundle Xcomponent library with component definition in one script. • Simple integration. • UseWebpack for bundling.
- 44. • Angular digest cycle, change detection. • Event handlers (functions) are executed outside of angular context. • Native drivers helps to avoid the problem.
- 45. • Xcomponent uses some built-in props. • onEnter • onRender • onClose • LogLevel
- 46. • “this” in event handlers (functions). • Bound to component instance even if you don’t think so, i.e. inside a class.
- 47. • IE < 11 prevent communication with popups in a different domain. • Iframe bridge is required (configuration)
- 48. • Xcomponent brings the best of both worlds of: • Native components • Simple contract • Communication style • Cross domain components • Isolation • Flexibility • Technology independence
Editor's Notes
- #4: Existing system that is using microservices architecture only on the backend.
- #5: Existing system that is using microservices architecture only on the backend. Frondend is more complicated to work on, yet, don’t benefit from applying microservices principals that could reduce complexity
- #6: Our goal is to apply microservices principals on frontend. - Separately deployable components - Isolated and decoupled - Focused - Technology agnostic
- #8: Sharing css Then sharing DOM components UI only Then sharing css, UI and functionality Then making component communication right Then having all this in HTML standards
- #22: Reference: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/client-side-REST-integration/
- #23: Reference: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/client-side-REST-integration/
- #24: Reference: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/client-side-REST-integration/