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

LINE Developers Thailand

October 16, 2021
Tweet

More Decks by LINE Developers Thailand

Other Decks in Technology

Transcript

  1. • What is Micro-frontends? • Success journey • Is everything

    going well…? • Remote development • What’s next? AGENDA
  2. MENU CHAT WIDGET LAYOUT SERVICE LAYOUT SERVICE Layout service is

    a service that compose a web page from fragment services. MENU
  3. 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
  4. Fragment 
 Development 
 Difficulties Fragment service development process is

    not easy. How does developers integrate with layout service? MENU CHAT WIDGET LAYOUT SERVICE MENU
  5. 1st Version 
 CLI for Local Development We uses CLI

    to run both Layout service and Fragment Service on local machine.
  6. However, CLI is NOT AVAILABLE for everybody We can’t give

    a source code of Layout Service and related Fragment Service to everybody.
  7. 2nd Version 
 Remote Development What if we can develop

    a new Fragment Service by integrating with our service. WIDGET MENU CHAT LAYOUT SERVICE MENU
  8. 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
  9. Our 2nd Version has been IMPROVED !!! However, we can

    reduce manual works and improve our securities 
 by using combination between CLI and Remote Development.
  10. 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
  11. 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
  12. Now There are Endless Possibilities UI service and role management

    system is able to implement on top of our latest architecture.
  13. 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 คืออิหยังห ว่ า?