applying microservices principles to front end
TRANSCRIPT
![Page 1: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/1.jpg)
Community Partners
![Page 2: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/2.jpg)
![Page 3: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/3.jpg)
Frontend (SPA)
API Gateway
svc svc svc svc
![Page 4: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/4.jpg)
![Page 5: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/5.jpg)
API Gateway
svc svc svc svc
APP APP APP APP
![Page 6: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/6.jpg)
![Page 7: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/7.jpg)
![Page 8: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/8.jpg)
• Simple interface
![Page 9: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/9.jpg)
• Composition reduces complexity
![Page 10: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/10.jpg)
• One flow on information
![Page 11: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/11.jpg)
• Different domains• Different technologies• Different release cycles• Isolation• Ownership• Easy integration
![Page 12: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/12.jpg)
<iframe>
window.open
window.postMessage
![Page 13: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/13.jpg)
• 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.
![Page 14: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/14.jpg)
window.parent.postMessage(‘Get user token’, ‘*’);
https://www.mysite.com
https://product.mysite.com
![Page 15: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/15.jpg)
https://www.mysite.com
https://product.mysite.com
message.source.postMessage(‘User token: XYZ’, *);
window.parent.postMessage(‘Get user token’, ‘*’);
![Page 16: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/16.jpg)
https://www.mysite.com
https://product.mysite.comhttps://www.hacker-site.com
window.parent.postMessage(‘Send user token’, ‘*’);
window.parent.postMessage(‘Get user token’, ‘*’);
![Page 17: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/17.jpg)
• Safely allow cross-origin communication between different pages.
![Page 18: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/18.jpg)
• Safely allow cross-origin communication between different pages.
![Page 19: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/19.jpg)
![Page 20: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/20.jpg)
• Abstract rendering into:• Iframe• Window
• Provides a simple component-like contract.• Supporting passing properties down,
actions up.• Securely handle communication.• Technology specific adapters.
![Page 21: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/21.jpg)
![Page 22: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/22.jpg)
![Page 23: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/23.jpg)
![Page 24: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/24.jpg)
https://github.com/harouny/luxor
![Page 25: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/25.jpg)
• 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
![Page 26: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/26.jpg)
Set Props
On Props
Raise event
On event
Set Props
On Props
Raise event
On event
Host
Component
![Page 27: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/27.jpg)
![Page 28: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/28.jpg)
1
3
2
![Page 29: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/29.jpg)
1
2
3
![Page 30: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/30.jpg)
![Page 31: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/31.jpg)
![Page 32: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/32.jpg)
![Page 33: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/33.jpg)
![Page 34: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/34.jpg)
![Page 35: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/35.jpg)
![Page 36: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/36.jpg)
![Page 37: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/37.jpg)
![Page 38: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/38.jpg)
![Page 39: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/39.jpg)
![Page 40: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/40.jpg)
![Page 41: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/41.jpg)
![Page 42: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/42.jpg)
• Xcomponent is not meant to replace native components.• Use it to share complete functionality.• Keeps contract simple.
![Page 43: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/43.jpg)
• Bundle Xcomponent library with component definition in one script.• Simple integration.
• Use Webpack for bundling.
![Page 44: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/44.jpg)
• Angular digest cycle, change detection.• Event handlers (functions) are executed outside of angular
context.• Native drivers helps to avoid the problem.
![Page 45: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/45.jpg)
• Xcomponent uses some built-in props.• onEnter• onRender• onClose• LogLevel
![Page 46: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/46.jpg)
• “this” in event handlers (functions).• Bound to component instance even if you don’t think so, i.e.
inside a class.
![Page 47: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/47.jpg)
• IE < 11 prevent communication with popups in a different domain.• Iframe bridge is required (configuration)
![Page 48: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/48.jpg)
• Xcomponent brings the best of both worlds of:• Native components
• Simple contract• Communication style
• Cross domain components• Isolation• Flexibility• Technology independence
![Page 49: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/49.jpg)
![Page 50: Applying microservices principles to front end](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6ddd277f8b9a90468b49f7/html5/thumbnails/50.jpg)