presentations.microfrontends
Presentation about Micro frontends. Given at from CodeOne 2019 (in San Francisco, CA) and Codemash 2020 (in Sandusky, OH).
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.3.1. Content Delivery Networks (CDNs)
2.1.3.1.1. Akamai
2.1.3.2. Caching Proxy Servers
2.1.3.2.1. Varnish
2.1.3.2.2. Squid
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.1.1. Mooa (Angular )
2.2.2. Client-side includes
2.2.2.1. h-include
2.2.3. Web Components
2.2.4. Angular Extensions Elements
2.2.5. ngx-planet (Angular only)
2.2.6. OpenComponents
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/
3.4. OK, but who does this?
3.4.1. Amazon
3.4.2. Buzzfeed
3.4.3. HelloFresh
3.4.4. UpWork
3.4.5. Spotify
3.4.6. Zalando
3.4.7. IKEA
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?