Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Denunciar
CodemotionSeguir
17 de May de 2019•0 gostou•673 visualizações
1 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Check these out next
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
17 de May de 2019•0 gostou•673 visualizações
1 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Baixar para ler offline
Denunciar
Tecnologia
The web is changing every day and it’s so hard to follow and implement all the new and fancy stuff that is being built. Cool new frameworks, libraries, methodologies and new approaches to solving problems. Usually is not that easy to deprecate some old technology and migrate to the new one. There are not many developers that still want to work with Angular 1 or Backbone and moving to something new is becoming necessary. If this sounds familiar to you, then this talk is for you! There is an innovative way to migrate from the old technology, to change the applications step by step
CodemotionSeguir
Recomendados
Micro frontendsAssaf Gannon
Globant development week / Micro frontendGlobant
Micro Frontends Architecture - Jitendra kumawat (Guavus)Tech Triveni
Micro-frontendMiguel Angel Teheran Garcia
Micro Frontends ArchitectureRag Dhiman
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSKNOWARTH - Software Development Company
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
- Micro Frontends Microservice Approach To The Modern Web @ivanjov96
- We want something new!
- But now we can!
- I present you The Micro Frontends! 🎉
- Ivan Jovanovic Founder https://ivanjov.com @ivanjov96 IJ Consulting https://jsremotely.com
- What are Micro Frontends?
- Micro Frontends - a microservice approach to the modern web
- What are Microservices?
- Microservices is an architectural style that structures an application as a collection of loosely coupled services
- Event bus
- Event bus allows publish-subscribe-style communication between components without requiring the components to explicitly register with one another
- Microservice principles • Lightweight protocol between services • Small services, one job per service • Service independence • Easier to understand, develop and test • Speeds up development • Enables continues delivery and deployment
- VS VS
- + +
- App Feature 3Feature 2Feature 1
- Root app App 3App 2App 1 Feature 1 Feature 2 Feature 3
- How did we get here? • Monolith full stack apps 😊 • Frontend and backend apps 😄 • Microservices in the backend 😅 • Components on the UI 😎 • Micro frontends 🤯
- We need to fight with the bad architecture!
- What problem does it solve? • Use new frontend framework on the old architecture • No more shared codebases and conflicts • Independent deployments • Each team can pick their own stack • You can easily scale your frontend app
- How to split apps? • By functionality on the page • By page • By section
- Implementation 🎉 • External app bootstrapping • IFrames • Single-spa library • Frint framework
- External app bootstrapping
- External app bootstrapping • Code lives on different server • Independent deployment • Communication is done through: • Window object • Event bus
- React app
- React app export
- Fetching React app in the Root app
- Event bus - Eev • https://github.com/chrisdavies/eev • Less than 500 bytes minified + zipped • Really fast • Zero dependencies • Simple
- IFrames
- IFrames • Code lives on different server • Independent deployment • Communication is done through browser “Event bus”
- Single-spa library
- Single-spa library • https://github.com/CanopyTax/single-spa • Use multiple frameworks on the same page without refreshing the page • Write code using a new framework, without rewriting your existing app • Lazy load code for improved initial load time
- Single-spa library • Code lives on the same server • Everything is bundled and deployed at the same time • Communication is done through: • Window object • Event bus • Shared state (Redux etc.) • Whatever works for you…
- Loading function
- Activity function
- Single-spa app
- Bootstrap
- Mount
- Unmount
- Frint
- Frint • https://frint.js.org/ • CLI • Routing • State management • Server side rendering supported
- Frint CLI
- Frint CLI
- Reactive Programming 🎉
- It works with React Native!!!
- Micro Frontends Cons • More code and dependencies to maintain • Big bundles • Performance, a lot of code in the browser
- Who is using Micro Frontends?
- And many more…
- Everyone! 😎
- Conclusion • Don’t use this if you have a simple app • Use micro frontends to make things easier, not complicated • Micro frontends architecture doesn’t mean to use every framework in the world • Don’t forget to make standards across micro apps
- Thank you! 😊 Blog ivanjov.com Twitter @ivanjov96