Tweet
Tweet

Slide 1

Slide 1 text

Introduction To Micro Frontends

Slide 2

Slide 2 text

It’s brought to you by : Randy Vianda Putra Hello!

Slide 3

Slide 3 text

Let’s Start

Slide 4

Slide 4 text

What are Micro Frontends ?

Slide 5

Slide 5 text

Micro Frontends Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. 5

Slide 6

Slide 6 text

What are Micro Frontends ? The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. 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.

Slide 7

Slide 7 text

“ “Extending the microservice to frontend development.” 7

Slide 8

Slide 8 text

Core ideas behind micro frontends - Be technology agnostic - Isolate team code - Establish team prefixes - Favor Native Browser Features over Custom APIs - Build a Resilient Site

Slide 9

Slide 9 text

The concept of micro frontend ?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Advantages of a monolith - Easy and quick setup - Single CI/CD operation - Single codebase

Slide 12

Slide 12 text

Problem with monolith - Long development cycles - Long build time - Risk refactoring and cleanup (this works - don’t touch)

Slide 13

Slide 13 text

When they say “Micro Frontends” what do they mean? ?

Slide 14

Slide 14 text

Micro frontends aka micro apps - Breaking a web application to it’s page and / or feature - Each feature owned by a single team - Allow each feature to be developed, tested and deployed independently

Slide 15

Slide 15 text

Micro apps cons - Proprietary solution - Load time - Redudancy risk - UX consistency

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Implementation Approaches - Iframes - Component based architecture

Slide 18

Slide 18 text

Iframes implementation

Slide 19

Slide 19 text

Iframes summary - Easy A/B testing for features - Native support on most browsers - Enables high scale delivery (similar to micro services)

Slide 20

Slide 20 text

Component based architecture implementation

Slide 21

Slide 21 text

Component based architecture summary - Each micro app is a component - Orchestrator app - Shared component are extracted and reusable

Slide 22

Slide 22 text

The Native Solution : Web Components

Slide 23

Slide 23 text

Web Components Create custom reusable HTML tags - Custom Elements - Shadow DOM - HTML Imports - HTML Templates

Slide 24

Slide 24 text

Web Components Libraries - SlimJS - Polymer - SkateJS - X-Tag - Stencil

Slide 25

Slide 25 text

Runtime components with React / Angular / Vue etc, everything is a component

Slide 26

Slide 26 text

Study Case ?

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Custom element ?

Slide 31

Slide 31 text

this is the reference to the root DOM node of the custom element. All properties and methods of a standard DOM element like innerHTML or getAttribute() can be used.

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Parent - child communication / DOM modification ?

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Conclusion Micro Frontends can help big time, but they come at a cost

Slide 37

Slide 37 text

37 Thanks Any questions? You can find me on github : @randyviandaputra