Code Talks 24 - The Quest for Immortality

In the heart of developers software is a throw-away product - quickly iterate over a solution, improve it over time, and if there is a better solution: start from scratch again. However, that conflicts with business goals - building something that lasts essentially forever; at least until its phased out due to business objectives. How to get out of this dilemma?

It turns out the solution is modularization. By writing software with a module-first approach we can ensure that the software as a whole might be immortal, while the individual parts are changing all the time. Developers can then start new features like green-field projects - not caring about the old world of the other modules.

One organizational pattern to make full use of modules is micro frontends. In this talk Dr. Florian Rappl will introduce the basic properties of micro frontends that make it such an outstanding solution with proven durability. He will provide insights into companies and projects using micro frontends for years and go into details how you can successfully implement micro frontends in your project.

1. linkedin.com/in/florian-rappl/
2024-09-20
Dr. Florian Rappl

2. linkedin.com/in/florian-rappl/
Solution Architect at smapiot
IoT / Embedded Computing
Digital Transformation
Distributed Web Applications
Open-Source Enthusiast
Microsoft MVP Development Tools
Projects for .NET and JS
Articles for various blogs and magazines

3. linkedin.com/in/florian-rappl/

4. linkedin.com/in/florian-rappl/
Graphic by Christiaan Verwijs

5. linkedin.com/in/florian-rappl/
Graphic by Egon Wuchner

6. linkedin.com/in/florian-rappl/

7. linkedin.com/in/florian-rappl/

8. linkedin.com/in/florian-rappl/
Decoupling?

9. linkedin.com/in/florian-rappl/
M1 M2
M3 M4

10. linkedin.com/in/florian-rappl/
M1 M2
M3 M4

11. linkedin.com/in/florian-rappl/
M1 M2
M3 M4
SB

12. linkedin.com/in/florian-rappl/
Reduce
Cycles!

13. linkedin.com/in/florian-rappl/
Backend AreaBackend
Potentially exposing APIs
Access to DBs and other systems
Not involved in user experience
Single technology
Frontend Area
Frontend
Responsible for the user experience
Generates HTML
Delivers other web assets such as CSS
Receive data from backend area

14. linkedin.com/in/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 BService C
Service XService Y

15. linkedin.com/in/florian-rappl/
Service A
Distributed Web Application
Service BService C
Frontend
A
Frontend
B
Frontend
C
Service D
Frontend
D
Frontend
Micro Frontend
Backend
Microservice

16. linkedin.com/in/florian-rappl/
Best of both worlds for a modular distributed web application
Microservices aspectsAspects of a monolithic approach
Business capabilities
as modules
Development by
independent teams
Shared architecture
foundation
Loose coupling with
dynamic loading
Consistent
UI & UX

17. linkedin.com/in/florian-rappl/
Distributed Web Application
Frontend
A
Frontend
B
Frontend
C
Frontend
D
Service A
Modular Distributed Web Application
Service BService C
Module A
Shared LibrariesPattern Library
Module BModule C
Core and Common Capabilities
Service D
Module D
Frontend
App Shell Component
Business Capability Module
Backend
Microservice

18. linkedin.com/in/florian-rappl/
Use DDD!

19. linkedin.com/in/florian-rappl/
Service AService BService C
Single Frontend Solution (Monolith)
Service D
FrontendDevelopment Team
Backend ServiceDevelopment Teams
Frontend
Backend

20. linkedin.com/in/florian-rappl/
Service AService BService C
Module AModule BModule C
Application Shell
Service D
Module D
FrontendDevelopment Team
FullstackDevelopment Teams
Frontend
Backend

21. linkedin.com/in/florian-rappl/
V1
Dev V1
App Shell Development
</>
Module Development
</>
</>
</>
V1
V1
Version 2
V2V3
V2
V4
V3V4
V2V3
Prod V1
Module A
Module B
Module C

22. linkedin.com/in/florian-rappl/
Example

23. linkedin.com/in/florian-rappl/

24. linkedin.com/in/florian-rappl/
“Inspire”“Users”“Movies”
BrowseFavoritesSearchProfilePlayerPreview

25. linkedin.com/in/florian-rappl/

26. linkedin.com/in/florian-rappl/
FavoritesPreview

27. linkedin.com/in/florian-rappl/
Browse
Favorites
Search
Profile
Preview

28. linkedin.com/in/florian-rappl/

29. linkedin.com/in/florian-rappl/
Case Study

30. linkedin.com/in/florian-rappl/

31. linkedin.com/in/florian-rappl/

32. linkedin.com/in/florian-rappl/

33. linkedin.com/in/florian-rappl/
smapiot
smapiot.com
github.com/smapiot
Florian Rappl
[email protected]
@FlorianRappl
Piral
piral.io
docs.piral.io
github.com/piral-samples