Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Next Generation of Micro-Frontends with Remote Development

The Next Generation of Micro-Frontends with Remote Development

B29f42636a5f1249b640473d49aa4514?s=128

LINE Developers Thailand

October 16, 2021
Tweet

Transcript

  1. None
  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