The Next Generation of Micro-Frontends with Remote Development

Transcript

2. THE NEXT GENERATION OF MICRO-FRONTENDS WITH REMOTE DEVELOPMENT
3. • What is Micro-frontends? • Success journey • Is everything going well…? • Remote development • What’s next? AGENDA
4. MICRO-FRONTENDS IN 5 MINUTES How does micro-frontends works
5. Large Single Page Application
6. Technology 
 Agnostic Development 
 Autonomy Isolated 
 Deployment Resilience Large Single Page Application Problems
7. <slot /> <slot /> <slot /> <slot /> layout fragment fragment fragment fragment
8. MENU CHAT WIDGET LAYOUT SERVICE LAYOUT SERVICE Layout service is a service that compose a web page from fragment services. MENU
9. FRAGMENT SERVICE Fragment service is an http(s) server that renders only the part of the page. 
 
 e.g. Single Page Application MENU CHAT WIDGET LAYOUT SERVICE MENU
10. <slot /> layout <slot /> fragment fragment
11. SUCCESS JOURNEY OF MICRO-FRONTENDS WITH OAPLUS PLATFORM Success stories of LINE micro-frontends
12. OAPlus Plugins
13. IS EVERYTHING GOING WELL…? Our problems
14. Local Development Hash Collision Fragment Communication Error Tracking Bundle Size ETC…
15. Fragment 
 Development 
 Difficulties Fragment service development process is not easy. How does developers integrate with layout service? MENU CHAT WIDGET LAYOUT SERVICE MENU
16. 1st Version 
 CLI for Local Development We uses CLI to run both Layout service and Fragment Service on local machine.
17. localhost:xxxx MENU CHAT WIDGET LAYOUT SERVICE MENU
18. However, CLI is NOT AVAILABLE for everybody We can’t give a source code of Layout Service and related Fragment Service to everybody.
19. THE NEXT GENERATION OF MICRO-FRONTENDS WITH REMOTE DEVELOPMENT Remote development solution
20. 2nd Version 
 Remote Development What if we can develop a new Fragment Service by integrating with our service. WIDGET MENU CHAT LAYOUT SERVICE MENU
21. WIDGET How Does 
 Remote Works? We use a bene fi t of Micro Frontend to swap fragment endpoint on the fl y. LAYOUT SERVICE WIDGET 1 Con fi g fi le 2 Local tunnel 3 Our service OAPlus WIDGET
22. Our 2nd Version has been IMPROVED !!! However, we can reduce manual works and improve our securities 
 by using combination between CLI and Remote Development.
23. 3rd Version 
 Developer Portal with CLI CLI will be an assistance for developer to manage con fi guration between our service and local machine via developer portal. WIDGET DEVELOPER 
 PORTAL MENU CHAT LAYOUT SERVICE MENU
24. WIDGET How Does 
 Developer Service 
 and CLI Works? We create a new developer 
 portal to be a middle layer between our service and local machine, then use CLI as client tools. LAYOUT SERVICE DEVELOPER 
 PORTAL 4 WIDGET 5 Our service CLI 1 Con fi g fi le 2 3 OAPlus WIDGET
25. WHAT’S NEXT? The next step of remote development.
26. Now There are Endless Possibilities UI service and role management system is able to implement on top of our latest architecture.
27. at LINE DEV TH More On Micro Frontend Micro Frontends — the New Era of Front-End Edge Micro Frontend: The New Era of Frontend Edge Technology Inside LINE OA Plus #2 Micro Frontends คืออิหยังห ว่ า?
28. THE NEXT GENERATION OF MICRO-FRONTENDS WITH REMOTE DEVELOPMENT