Micro Frontend The New Era of Frontend Edge Technology

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

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