presentations.microfrontends

Presentation from CodeOne 2019 (in San Francisco, CA) about Micro front ends.

Get Started. It's Free
or sign up with your email address
Rocket clouds
presentations.microfrontends by Mind Map: presentations.microfrontends

1. Testing

1.1. Each app should do unit and functional testing

1.2. For combined application

1.2.1. Functional testing

1.2.2. Contract testing

2. Technologies

2.1. Sever-side templating

2.1.1. What about Eclipse Krazo (Jakarata MVC spec) or Spring MVC with a template engine?

2.1.1.1. Facelets

2.1.1.2. Thymeleaf

2.1.1.3. Mustache

2.1.1.4. Velocity

2.1.1.5. ...

2.1.2. Server side includes (SSI)

2.1.2.1. NGINX

2.1.2.2. Apache

2.1.3. Edge Side Includes (ESI)

2.1.4. Zalando's Project Mosaic

2.1.4.1. Several Components

2.1.4.1.1. Tailor

2.2. Client-side

2.2.1. Single SPA

2.2.2. Client-side includes

2.2.2.1. h-include

2.2.3. Web Components

2.2.4. Angular Extensions Elements

3. Overview

3.1. What is a Micro frontend?

3.1.1. "An architectural style where independently deliverable frontend applications are composed into a greater whole"

3.1.2. ThoughtWorks Radar source: https://martinfowler.com/articles/micro-frontends.html

3.1.3. Evolution of the Monolith source: https://micro-frontends.org/

3.1.4. Source: https://martinfowler.com/articles/micro-frontends.html

3.1.4.1. Source: https://martinfowler.com/articles/micro-frontends.html

3.1.5. Team organization Source: https://micro-frontends.org/

3.2. Basic Architecture Source:https://martinfowler.com/articles/micro-frontends.html

3.3. Who's your BFF?

3.3.1. Source: https://samnewman.io/patterns/architectural/bff/

4. Background

4.1. Personal journey

4.2. Benefits of Microservices

4.3. Drawbacks of Microservices

5. Concerns

5.1. Integration

5.1.1. iframes

5.1.2. Links to different apps with common look and feel

5.1.3. Single page app (SPA) with different pages/sections that contain encapsulated apps

5.1.4. Server-side includes (SSI) or Server-Side Templating

5.2. Consistency

5.2.1. Styling

5.2.2. Common components

5.2.3. Common assets

5.2.4. Design guild, design/style guide

5.3. Communication

5.3.1. Central store (redux, etc)

5.3.2. Properties and browser events

5.3.3. App shell provides coordination

5.3.4. Is it necessary?

6. Me

6.1. Principal Consultant at Virtua: Consulting, training, mentoring on front-end and back-end Java

6.2. Java Champion

6.3. Google Developer Expert on Web Technologies

6.4. Co-host of Enterprise Java Newscast (enterprisejavanews.com)

7. You

8. Demo

9. Resources