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 Schöttner Florian Rappl • CEO and founder of smapiot • Solution Architect at smapiot • Worked for Accenture and Microsoft • Previously at ZEISS and innogy • IoT and Security Architecture • Digital Transformation Architecture

System Architecture Example Frontend Monolithic architecture Integrated and consistent user experience Single Frontend Solution Developed by one central team Larger deployment releases Microservices Scoped around business capabilities Service A Service B Service C Developed by autonomous teams Own development & deployment lifecycle Service X Service Y Loosely coupled Technology independent

Examples Distributed Web Applications

Microfrontend Architecture

Microfrontend Architecture Distributed Web Application Frontend Frontend Frontend Frontend Microfrontend A B C Backend Service A Service B Service C Service D Microservice

Desired Solution Microservices Aspects Aspects of a Monolith Approach Best of both worlds for a modular distributed web application Business capabilities Loose coupling with Shared architecture Consistent Development by as modules dynamic loading foundation UI & UX independent teams

Application Shell NO YES „MODULITH“ Framework YES Shared Libraries Architecture Foundation, shared libs only Design & Shared Libraries Empty Layout NO No basis Design only

Proposed Frontend Architecture Modular Distributed Web Application Distributed Web Application Frontend Shared Libraries Core and Common Capabilities Pattern Library App Shell Component Frontend Frontend Frontend Business Capability Module Module A Module B Module C A B C Backend Service A Service B Service C Service D Microservice

Principles and Challenges </> Supporting Backend Services First class development experience e.g. feed for dynamic loading of modules “setup of local dev environment in minutes” Modular Frontend Solution Comprehensive development tooling Support for multiple frameworks e.g. scaffolding modules based on templates e.g. React, Angular, Vue </> </> </> Distributed development of modules

Realized Architecture

High Level Architecture </> Tooling Module Developer Feed Service Application Services Shell Modules Modules Module Storage Modules Users Module Frontend App Assests

piral.io A framework for modular Microfrontends https://piral.io https://docs.piral.io

High Level Architecture with Piral Feed Service </> Piral-CLI Module Feed Module Developer Features Piral Rules Instance API Key Modules Modules Management Pilets Users Frontend App Module Assests CDN

Components of a Piral Frontend Pilets as modular feature Pilet Pilet Pilet Pattern Library components Layout Feature Feature Feature Layout Patterns shared across pilets & app shell Implementation of the Piral Piral Instance Instance Application Shell Provides standard patterns Piral and backend integration Framework The core functionality for a Useful Extensions like Piral Core Piral Ext Piral based microfrontend translations, connectivity Library Library React & Other Libraries Foundation for Piral Library

Demo Piral Samples https://docs.piral.io/samples

Development Approach Single Frontend Solution (Monolith) Frontend Development Team Service A Service B Service C Service D Frontend Backend Backend Service Development Teams

Development Approach Frontend Development Team Application Shell Module A Module B Module C Module D Service A Service B Service C Service D Frontend Backend Fullstack Development Teams

Development Lifecycles App Shell Development Version 2 </> Dev V1 Prod V1 Module Development </> Module A V1 V2 V3 V3 </> V1 V2 V2 V3 Module B </> Module C V1 V2 V3

Conclusion Modular Architecture for modular Framework for Frontend Web Applications modular Web Apps Architecture

Rate today ’s session O’Reilly Events App Session page on conference website

@smapiot Thank You! github.com/smapiot smapiot.com Lothar Schöttner Florian Rappl lothar.schoettner@smapiot.com florian.rappl@smapiot.com More information about Piral: https://piral.io https://docs.piral.io