Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

E6c61f085d7aceaf97b7bd00e9195514?s=47 SQUER Solutions
May 06, 2021
Technology
0
230

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

JAX Mainz / Remote

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

May 06, 2021
Tweet

More Decks by SQUER Solutions

See All by SQUER Solutions
The Rise of Reactive Microservices
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
48
Apache Kafka — The Hard Parts
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
19
The Rise of Reactive Microservices
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
43
MicroFrontends — The Past, the Present, and the Future
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
71
The Rise of Reactive Microservices
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
190
Rethinking Reactive Architectures
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
29
Leveraging the power of Reactive Architectures
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
400
Rethinking Reactive Architectures
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
370
Rethinking Reactive Architectures with GraphQL
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
230

Other Decks in Technology

See All in Technology
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
7
3k
LINSTOR — это как Kubernetes, но для блочных устройств
93aef1d166a8a3536538eff713f80307?s=48 flant
0
3.7k
hey BOOK
69f5ab96892df4d8cbe32189f2ed2d9d?s=48 heyinc
26
290k
Dangerous attack paths: Modern Development Environment Security - Devices and CI/CD pipelines
Dc03bf56cb3157b6036f9818593d7e40?s=48 rung
PRO
0
140
Settlement simulation testing to ensure correct settlement processing
23e9a5be8e46efd1cf6a07694a047237?s=48 applepine1125
2
1.3k
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
Fc815be82d09a2e922d4000b65b9f83b?s=48 74th
0
200
森林情報のオープンデータと QGISでの利用
2a35cc4d9c9dd2672aba2f097980e5d1?s=48 kou_kita
0
320
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
8785139c395ce2345ce535822b522dde?s=48 kentosuzuki
1
510
MySQL v5.7 勉強会/study-mysql-ver-5-7
8847086af047cbf895ab3277b59529fe?s=48 andpad
0
2.1k
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
E96c81ea6ec9fc4258a1fba04ae7ca5e?s=48 ryook
5
2.7k
AWSを使う上で意識しておきたい、クラウドセキュリティ超入門（駆け足版）
Cc073a7c6b0a79918ff1da48acb709e7?s=48 kkmory
0
210
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
41202c03511a51064abb970da0ca9fad?s=48 owlinux1000
0
270

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
980
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
32
11k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.6k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
4k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.3k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k
Put a Button on it: Removing Barriers to Going Fast.
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.3k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.4k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k

Transcript

  1. @duffleit MicroFrontends Vergangenheit, Gegenwart & Zukunft JAX 2021 Mainz /

    Remote, Mai 2021

  2. @duffleit @duffleit @duffleit david.leitner@squer.at David Leitner Coding Architect

  3. @duffleit

  4. @duffleit Montag, 29.02.2016

  5. @duffleit

  6. @duffleit ~ 160 Views ~ 240 Models

  7. @duffleit Transactions Overview Payment Creation Self Service Console hyperlink hyperlink

  8. @duffleit MicroFrontends @ v0.0.1-alpha

  9. @duffleit https://bluepnume.medium.com/less-is-more-reducing-thousands-of-paypal-buttons-into-a-single-iframe-using-xcomponent-d902d71d8875

  10. @duffleit Transactions Overview Payment Creation Self Service Console iframe iframe

    hyperlink hyperlink

  11. @duffleit 2016 Hyperlink

  12. @duffleit hyperlink

  13. @duffleit 2016 Hyperlink Iframes ClientSide Integration > 50% of internet

    trafic from phones ServerSide Integration

  14. @duffleit Transactions Overview Payment Creation Self Service Console iframe hyperlink

    hyperlink SelfService μService

  15. @duffleit EdgeService Payment Creation fragment SelfService μService Payment Creation μService

  16. @duffleit Server Side Includes or Edge Side Includes Project Mosaic

  17. @duffleit

  18. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes

  19. @duffleit Round Trips

  20. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes

  21. @duffleit App Shell /create-payment template /overview template Payment μService Transactions

    Overview Self Service Console Self Service μService Payment Creation Transactions μService request Self Service Console Payment Creation navigation navigation

  22. @duffleit • Meta-Router • State Sharing • Authn/Authz

  23. @duffleit App Shell Payment μService Transactions Overview Self Service Console

    Self Service μService Payment Creation Transactions μService request /overview template /create-payment template Self Service Console Payment Creation navigation navigation

  24. @duffleit

  25. @duffleit

  26. @duffleit App Shell Payment μService Transactions Overview Self Service Console

    Self Service μService Payment Creation Transactions μService request /overview template /create-payment template Self Service Console Payment Creation navigation navigation Externals window.ng.core = @angular/core bundle

  27. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router First Meaningful Paint!

  28. @duffleit 0 sec 0.3 sec 0.5 sec 0.7 sec First

    Meaningful Paint JS

  29. @duffleit Progressive Enhancement

  30. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router Progressive Enhancement ?

  31. @duffleit App Shell Payment μService Transactions Overview Self Service Console

    Self Service μService Payment Creation Transactions μService request /overview template /create-payment template Self Service Console Payment Creation navigation navigation

  32. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router Progressive Enhancement

  33. @duffleit Host - Container <App /> Client - Container <

    Profile /> ProfileService <Profile />

  34. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router

  35. @duffleit David Leitner @ DevoxxUA 2018: Micro Frontends – a

    strive for fully Verticalized Systems https://www.youtube.com/watch?v=oxVRG71rF3w

  36. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router

  37. @duffleit Aber auch wenn mit Module Federation vieles besser wird*,

    oft ist ein Frontend Monolith für die gegebenen Anforderungen auch “cool genug”. 😎

  38. @duffleit by: twitter.com/swardley

  39. @duffleit David Leitner Coding Architect david.leitner@squer.at All das Präsentiert und

    vieles mehr:

  40. @duffleit Let’s talk about MicroFrontends: David Leitner Coding Architect david.leitner@squer.at