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

Micro Frontend The New Era of Frontend Edge Technology

Micro Frontend The New Era of Frontend Edge Technology

LINE Thailand Developer Conference 2019
https://www.facebook.com/events/410021356453349/

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers
PRO

June 04, 2019
Tweet

Transcript

  1. SIRAPHOB RHOMPO SOFTWARE ENGINEER LINE THAILAND MICRO FRONTEND: THE NEW

    ERA OF FRONTEND EDGE TECHNOLOGY
  2. Monolithic Microservices

  3. MICROSERVICES Technology Independent Availability Release and Deployment Scalability

  4. FRONTEND BACKEND

  5. FRONTEND ?

  6. ? FRONTEND

  7. MICRO FRONTEND

  8. TECHNOLOGY RADAR ADOPT TRIAL ASSESS HOLD April 2019 November 2016

  9. MICRO-FRONTEND.ORG What are Micro Frontends? Frontend Backend Database Team Inspire

    Team Search Team Product Team Checkout The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface. HTTPS://
  10. FRAMEWORKS Stencil single-spa Open Components Tailor What we have out

    there?
  11. High Resilience THE CONCEPT Development Autonomy Isolated Deployment Technology Agnostic

  12. THE ANATOMY

  13. None
  14. None
  15. None
  16. component component component component component

  17. fragment fragment fragment fragment fragment <slot> <slot> <slot> <slot> <slot>

  18. LAYOUT SERVICE

  19. TRANSCLUSION In computer science, transclusion is the inclusion of part

    or all of an electronic document into one or more other documents by hypertext reference. Transclusion is usually performed when the referencing document is displayed, and is normally automatic and transparent to the end user. wikipedia.org/Transclusion
  20. TRANSCLUSION iFrame AMD System.js single-spa HTML import ESI SSI Pre-rendered

    composition CLIENT SERVER
  21. FRAGMENT SERVICE

  22. None
  23. Presentation Layer Business Layer Persistant Layer CONCEPTUAL

  24. SERVER ASSETS HTML Javascript CSS Image ACTUAL

  25. ACTUAL REGISTRY CDN WEB SERVER

  26. ARCHITECTURE

  27. LAYOUT SERVICE FRAGMENT SERVICE FRAGMENT SERVICE FRAGMENT SERVICE

  28. None
  29. API

  30. BACKEND

  31. MICROSERVICES

  32. DEMO

  33. WHAT’S NEXT

  34. LAYOUT SERVICE FRAGMENT SERVICE FRAGMENT SERVICE FRAGMENT SERVICE

  35. LAYOUT SERVICE FRAGMENT SERVICE FRAGMENT SERVICE FRAGMENT SERVICE LAYOUT STORAGE

    FRAGMENT REGISTRY INTERCOMMUNICATION SERVICE
  36. THANK_YOU