Architecture for Modular Frontend Applications std::cout << - - PowerPoint PPT Presentation
16:50-17:35, 6 Nov / Hall A2 Architecture for Modular Frontend Applications std::cout << "Hello Berlin!"; Lothar Schttner Florian Rappl CEO and founder of smapiot Solution Architect at smapiot Worked for Accenture
16:50-17:35, 6 Nov / Hall A2
Lothar Schöttner Florian Rappl
Service A
Microservices
Scoped around business capabilities Developed by autonomous teams Own development & deployment lifecycle Loosely coupled Technology independent Single Frontend Solution
Frontend
Monolithic architecture Integrated and consistent user experience Developed by one central team Larger deployment releases Service B Service C Service X Service Y
Service A
Distributed Web Application
Service B Service C
Frontend A Frontend B Frontend C
Service D
Frontend
Microfrontend
Backend
Microservice
Best of both worlds for a modular distributed web application
Microservices Aspects Aspects of a Monolith Approach
Business capabilities as modules Development by independent teams Shared architecture foundation Loose coupling with dynamic loading Consistent UI & UX
Shared Libraries
NO YES
Application Shell
NO YES
Framework shared libs only Empty No basis
„MODULITH“ Architecture Foundation, Design & Shared Libraries
Layout Design only
Distributed Web Application
Frontend A Frontend B Frontend C
Service A Service B Service C
Modular Distributed Web Application
Module A Shared Libraries Pattern Library Module B Module C Core and Common Capabilities
Service D
Frontend
App Shell Component Business Capability Module
Backend
Microservice
First class development experience
“setup of local dev environment in minutes”
Comprehensive development tooling
e.g. scaffolding modules based on templates
Supporting Backend Services
e.g. feed for dynamic loading of modules
Support for multiple frameworks
e.g. React, Angular, Vue
Distributed development of modules
</>
</> </> </>Modular Frontend Solution
Frontend App
Application Shell Modules Modules Modules Users
Feed Service
Services Tooling Module Developer
</>
Module Storage
Module Assests
A framework for modular Microfrontends
https://piral.io https://docs.piral.io
CDN
Frontend App
Piral Instance Modules Modules Pilets Users
Feed Service
Module Feed Features Rules Module Assests Piral-CLI Module Developer API Key Management
</>
React & Other Libraries
Library
Piral Core
Library
Piral Ext
Library
Piral Instance
Application Shell
Piral
Framework Useful Extensions like translations, connectivity The core functionality for a Piral based microfrontend Foundation for Piral Provides standard patterns and backend integration
Layout
Pattern Library
Pilet
Feature
Pilet
Feature
Pilet
Feature Layout Patterns shared across pilets & app shell Implementation of the Piral
Instance Pilets as modular feature components
Service A Service B Service C
Single Frontend Solution (Monolith)
Service D
Frontend Development Team Backend Service Development Teams Frontend Backend
Service A Service B Service C
Module A Module B Module C Application Shell
Service D
Module D Frontend Development Team Fullstack Development Teams Frontend Backend
V1 Dev V1
App Shell Development
</>
Module Development
</> </> </>
V1 V1 Version 2 V2 V3 V2 V3 V2 V3 V2 V3 Prod V1 Module A Module B Module C
Modular Frontend Architecture Architecture for modular Web Applications Framework for modular Web Apps
Session page on conference website O’Reilly Events App
Lothar Schöttner
lothar.schoettner@smapiot.com
Florian Rappl
florian.rappl@smapiot.com
More information about Piral:
https://piral.io https://docs.piral.io @smapiot github.com/smapiot smapiot.com