Download to read offline
![Intro to Meteor [Deprecated]](https://cdn.slidesharecdn.com/ss_thumbnails/meteor-intro-141113203821-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Micro front ends
- 1. Classification: Public MICRO-FRONTENDS IN THECLOUD From theory to practice
- 2. Classification: Public WAQAS ALI •Senior Cloud Software Engineer @ Maersk • Write cloud native applications. • Like to work with front-end especially ReactJS. • Loves TDD • Family Guy • Love to spend time with my family • Play computer games Waqas_ali47 https://www.linkedin.com/in/waqasali47/https://waqasali.me/
- 3. Classification: Public AGENDA Intro The Framework Introto Demo Application Code samples Creating a Micro-frontend app together Learning resources Wrap up
- 4. Classification: Public THE PROBLEM You madea fix on front end and you want to release is ASAP. When you are about to release, someone from your teams sends you a message. Which says, We have made a fix as well but that is not approved to go to production. So please don’t release anything yet. What would you do ?
- 5. Classification: Public WEB DEVELOPMENT TIMELINE Monolith Frontend& Backend Microservices
- 6.
- 7. Classification: Public THE SPLIT Frontend ApplicationUI BusinessLogic Backend
- 8.
- 9. Classification: Public THE FRONT-END MONOLITH ApplicationUI BusinessLogic Frontend Microservice
- 10. Classification: Public THE FRONT-ENDMONOLITH Difficult to maintain for big teams. Multiple merge conflicts. One architecture must fit all Code base gets more and more complicated
- 11. Classification: Public MICRO FRONT-ENDS Adapting themicroservices approach in the front-end smaller, more cohesive and maintainable codebases more scalable organisations with decoupled, autonomous teams Independently write different part of application Independent releases Be Technology Agnostic
- 12. Classification: Public MICRO FRONT- ENDS BusinessLogic FrontendA BusinessLogic Frontend B BusinessLogic Frontend C BusinessLogic Frontend D Vertical Splits
- 13. Classification: Public MICRO FRONT- ENDS MicroFront-end A Micro front- end B Micro front- end C Micro front- end C Example Page Horizontal Splits Header Footer Micro front- end C
- 14. Classification: Public INTRODUCING PIRAL CloudReady MIT Licensed High Convenience Great Performance Tooling first Data-Driven
- 15. Classification: Public CONCEPTS App Shellor Piral Instance Pilets
- 16. Classification: Public APP SHELL includesshared components that can be used by pilets brings the overall design of the application (e.g., header, footer, navigation, ...) defines how pilets are loaded and where pilets can integrate their components
- 17. Classification: Public PILET brings thecontent for the application (e.g., functionality, queries and mutations, ...) include their own assets and dedicated dependencies define where they want to integrate their components into (as given by the Piral instance)
- 18. Classification: Public OVERVIEW Module developeruses piral-cli to build pilets. Feed service is responsible to serving pilets. Piral Instance is responsible for serving pilets from feed service. Img: piral.io
- 19.
- 20. Classification: Public ARCHITECTURE Github Action StaticWebsite Developer
- 21. Classification: Public ARCHITECTURE PILETDEVELOPER Feed Service Pilet Storage Github Action Developer
- 22. Classification: Public APPLICATION ARCHITECTURE Front-End FeedService Pilet Storage Pilets Piral Instance Static Website Storage
- 23. Classification: Public THE PROBLEM You madea fix on front end and you want to release is ASAP. When you are about to release, someone from your teams sends you a message. Which says, We have made a fix as well but that is not approved to go to production. So please don’t release anything yet. What would you do ?
- 24. Classification: Public THE SOLUTION You justgo ahead and release your own fix. You won’t step onto anyone else’s toes.
- 25.
- 26.
- 27.