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. THE NEXT GENERATION OF
    MICRO-FRONTENDS WITH
    REMOTE DEVELOPMENT

    View full-size slide

  2. • What is Micro-frontends?


    • Success journey


    • Is everything going well…?


    • Remote development


    • What’s next?
    AGENDA

    View full-size slide

  3. MICRO-FRONTENDS IN
    5 MINUTES
    How does micro-frontends works

    View full-size slide

  4. Large Single Page Application

    View full-size slide

  5. Technology

    Agnostic
    Development

    Autonomy
    Isolated

    Deployment
    Resilience
    Large Single Page Application Problems

    View full-size slide



  6. layout
    fragment
    fragment
    fragment
    fragment

    View full-size slide

  7. MENU CHAT WIDGET
    LAYOUT SERVICE
    LAYOUT SERVICE
    Layout service is a service that
    compose a web page from
    fragment services.
    MENU

    View full-size slide

  8. 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

    View full-size slide


  9. layout

    fragment
    fragment

    View full-size slide

  10. SUCCESS JOURNEY OF
    MICRO-FRONTENDS
    WITH OAPLUS PLATFORM
    Success stories of LINE micro-frontends

    View full-size slide

  11. OAPlus Plugins

    View full-size slide

  12. IS EVERYTHING GOING
    WELL…?
    Our problems

    View full-size slide

  13. Local Development
    Hash Collision
    Fragment Communication
    Error Tracking
    Bundle Size
    ETC…

    View full-size slide

  14. Fragment

    Development

    Difficulties
    Fragment service development
    process is not easy. How does
    developers integrate with layout
    service?
    MENU CHAT WIDGET
    LAYOUT SERVICE
    MENU

    View full-size slide

  15. 1st Version

    CLI for Local
    Development
    We uses CLI to run both
    Layout service and Fragment
    Service on local machine.

    View full-size slide

  16. localhost:xxxx
    MENU CHAT WIDGET
    LAYOUT SERVICE
    MENU

    View full-size slide

  17. However, CLI is NOT AVAILABLE
    for everybody
    We can’t give a source code of Layout Service and related
    Fragment Service to everybody.

    View full-size slide

  18. THE NEXT GENERATION OF
    MICRO-FRONTENDS WITH
    REMOTE DEVELOPMENT
    Remote development solution

    View full-size slide

  19. 2nd Version

    Remote Development
    What if we can develop a new
    Fragment Service by integrating
    with our service.
    WIDGET
    MENU CHAT
    LAYOUT SERVICE
    MENU

    View full-size slide

  20. 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

    View full-size slide

  21. Our 2nd Version has been IMPROVED !!!
    However, we can reduce manual works and improve our
    securities

    by using combination between CLI and Remote Development.

    View full-size slide

  22. 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

    View full-size slide

  23. 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

    View full-size slide

  24. WHAT’S NEXT?
    The next step of remote development.

    View full-size slide

  25. Now There are Endless Possibilities
    UI service and role management system is able to implement
    on top of our latest architecture.

    View full-size slide

  26. 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 คืออิหยังห
    ว่
    า?

    View full-size slide

  27. THE NEXT GENERATION OF
    MICRO-FRONTENDS WITH
    REMOTE DEVELOPMENT

    View full-size slide