Micro-Frontends JSVidCon

Micro Frontends
Myth or Reality?
Amir Zuker
Senior Software Architect
Founder, Web Division Leader
Twitter: @AmirZuker

About Me
2
Amir Zuker
 Senior software architect, instructor, speaker and developer
 Over 20 years of experience in the field
 Designed and developed various systems, both backend and frontend
 Mentored and lead large teams and R&D divisions
 Publications
 Book: HandsOn Full-Stack Web Development with ASP.NET Core
 Open source: WCF Contrib
 WCF Microsoft Official Curriculum (MOC)
 Leads the WEB division at CodeValue

5
"Extending the microservice idea
to frontend development"
https://micro-frontends.org/

Microservices
 A vast subject
 Out of scope
 In relevance to this talk
 Decompose the monolith to smaller parts
 Each part is independently managed, versioned and deployed
 Tailor parts together to form features
 And well.. polyglot
6

7
"Web app as a composition of
features which are owned by
independent teams.
..using different JavaScript
frameworks"
https://micro-frontends.org/
not necessarily

Why though? It's Frontend!
 It normally boils down to the same technology (JavaScript mostly)
 It all runs in the same host and process (browser mostly)
 It's.. well.. UI!
8

9
The bigger you are
and more versatile and
agile you need to be..
The more likely you are
to benefit from micro-frontends

Not an Entirely New Concept
 Having small parts which are managed independently
 ..plugged into the entire app
 ..able to integrate and interact
 Not a new concept
 Composite or Widget-based Apps
 Facebook
 WordPress
 SharePoint
10

Decomposition Strategies
 There are various ways to decompose apps
 Functional feature-based verticality
 Domain driven and business concerns
 Organizational, team structure and responsibility
 Can consider some parity with the backend
 It really depends
13
App Svc1 Svc2

Decomposition
 Effective decomposition is crucial
 Beware of the Big Ball of Mud (BBOM)
 A "distributed monolith" in backend semantics
 Difficult to get it completely right
 Observe and change accordingly
14

15
Checkout
Exploration
Decompose
Apps

No Single Truth
 There are always multiple ways to achieve your goal
 Essentially, determine the shared foundation for integration
 Key approaches
 Technology agnostic
 Technology specific
 A big spectrum in between
17

Technology Agnostic
 "New" interoperable standards have solidified
 Web Components!
 Basically, leverage the HTML DOM as the shared foundation
 Custom Elements
 Input and Events
 More complex
 Requires higher discipline
18
HTML DOM
JS, TS
Core SDK
Micro
App
Micro
App
Micro
App

19
Custom Elements
<shell>
<exploration-category-page category="art">
<checkout-offerings id="232">
offerElem.addEventListener(
'selected',
() => { … });
Input
Events

Technology Specific
 Expand the shared foundation
 Settle on a specific set of additional frameworks
 Manage it across teams and products
 Easier when applicable
 Less flexible
20
HTML DOM
JS, TS
Vue.js, Vuex, Vue Router
Core SDK
Micro App Micro App Micro App

21
Wait, does it mean that my Vue apps,
split into separate packages which are
independently managed and integrated..
Technically, in a sense, YES!
AM I DOING MICRO FRONTENDS?

Writing Web Components
 Controversial
 Can be tedious and convoluted
 Don't have to implement web components directly
 Higher level frameworks still provide incredible value
 Going with web components is not a problem free path
 Prefer to register components quickly
 Shadow DOM and theme-ability
 Server-side rendering (web components are a browser phenomenon)
 Accessibility
 SEO
23

Frameworks and Custom Elements
 Can be built using several frameworks, e.g. –
 Vue CLI Build Target / vue-web-component-wrapper / vue-custom-element
 Svelte 'customElement' compiler option
 Angular Elements
 Stencil
 Polymer
 Etc.
 Check integrability of frameworks with custom elements
 https://custom-elements-everywhere.com/
24

Crosscutting Concerns
 Data and State
 Separate / Namespaced / Shared
 Events BUS
 Routing and Links
 Internationalization
 Network
 Logging
 Error Handling
 Dialogs
28
 Busy / Spinner
 Undo / Redo
 Notifications
 Configuration
 AUTH
 Theming
 Responsiveness
 Style Guide
 Storage and cookies
 Etc..

Crosscutting Concerns
 Data and State
 Separate / Namespaced / Shared
 Events BUS
 Routing and Links
 Internationalization
 Network
 Logging
 Error Handling
 Dialogs
29
 Busy / Spinner
 Undo / Redo
 Notifications
 Configuration
 AUTH
 Theming
 Responsiveness
 Style Guide
 Storage and cookies
 Etc..

Core SDK (shared code)
 Keep it minimal and as needed
 Try to keep it on top of the chosen foundation
 HTML DOM or Frameworks
 Creates a technical debt
 Requires proper management and mandate control
30

Code Splitting
 Size matters in Web
 The more frameworks and code, the bigger the assets
 Consider effective..
 Tree-shaking
 Lazy loading
 Preloading
 Invest in code splitting enabler patterns and pick the right tools
 E.g. Webpack externals / Webpack module federation / Rollup for micro parts /
Webpack for shell / etc.
31

Encapsulation Isolation
 Micro apps still run in the same host (browser window)
 Think about different framework versions
 Require true isolation?
 Consider <iframe> and window.postMessage
 Caveats
 Integration is more complex
 More so in case of intertwined micro apps
 Shared assets can be downloaded multiple times
 Seamless UX is difficult
32

Server-side Rendering
 Working with <iframe> can get you there
 However, has its drawbacks
 Consider server-side includes (web server feature)
 Or other edge-side include (ESI) enabler frameworks
 E.g. Tailor, nodesi, ESI, compoxure
33
<checkout-offerings id="232">

</checkout-offerings>

Productivity
 Productivity is paramount
 Process, Collaboration, Integration, Sharing, Testing and Distribution
 Care about..
 Feature flags
 Repo management, methodologies and tools
 Test and Automation
 Showcases
 Self executable micro apps
 Versioning
 Releases
 DevOps
34

You're Not Alone
 Tools and frameworks can help of course
 Project Mosaic
 https://www.mosaic9.org/
 Single-SPA
 https://single-spa.js.org/
35

36
Micro Frontends
Comes at a cost..

37
Micro Frontends
Don't blindly ride hype trains

38
Micro Frontends
Do what is right for you..

Ask Yourself..
 Do you have an excessively large or multiple frontend products?
 Do you need to scale and effectively manage dozens of developers?
 Do you require high agility and versatility in your frontend products?
 Do you need to support flexible pluggability (widget / micro-apps style)
 Are you willing to invest and adjust?
 Organization-wise, process, development, ecosystem, DevOps pipelines, etc.
39

41
Micro Frontends
It's a journey..

Resources
 WebComponents.org
 https://www.webcomponents.org/
 Micro-Frontends.org
 https://micro-frontends.org/
 Integrability of frameworks with custom elements
 https://custom-elements-everywhere.com/
 Project Mosaic
 https://www.mosaic9.org/
 Single SPA
 https://single-spa.js.org/
 Demos
 https://github.com/azuker/micro-frontends
42

Amir Zuker
Senior Software Architect
Founder, Web Division Leader
Twitter: @AmirZuker

Micro-Frontends JSVidCon

Recommended

More Related Content

What's hot (19)

Similar to Micro-Frontends JSVidCon (20)

Recently uploaded (20)

Micro-Frontends JSVidCon

Editor's Notes