SlideShare a Scribd company logo
Micro Frontends as a
solution to legacy JS
William Brander
William Brander
@williambza
Particular Software
2019   devconfza - legacy js
2019   devconfza - legacy js
2019   devconfza - legacy js
2019   devconfza - legacy js
2019   devconfza - legacy js
Our examples:
• Complete Isolation
• Componentization
• Web Components
• Hybrid Multi-Framework
Let’s look at Isolation
2019   devconfza - legacy js
2019   devconfza - legacy js
Pros and Cons of Isolation
• Technology Isolation
• Deployment Isolation
• Runtime Isolation
• Fast load times
• Easy cache management
• Code reuse
• Shared branding identity
• Smooth user experience
• Technology Isolation
• Deployment Isolation
• Runtime Isolation
• Fast load times
• Easy cache management
• No code reuse
• No shared branding identity
• Not a smooth user experience
<body>
<!--#include virtual="/navbar" -->
<!--#include virtual="/footer" -->
<!--#include virtual="/userprofile" -->
</body>
Pros and Cons of Isolation + Embedding
• Technology Isolation
• Deployment Isolation
• Runtime Isolation
• Fast load times
• Easy cache management
• Code reuse
• Shared branding identity
• Smooth user experience
• Technology Isolation
• Deployment Isolation
• Runtime Isolation
• Slow load times
• Easy cache management
• Code reuse
• Shared branding identity
• Smooth user experience
Let’s look at Componentization
Pros and Cons of Components
• Technology Isolation
• Deployment Isolation
• Runtime Isolation
• Fast load times
• Easy cache management
• Code reuse
• Shared branding identity
• Smooth user experience
• No technology Isolation
• Deployment Isolation
• No runtime Isolation
• Slow load times
• Easy cache management
• Code reuse
• Shared branding identity
• Smooth user experience
WebComponents
Pros and Cons of WebComponents
• Technology Isolation
• Deployment Isolation
• Runtime Isolation
• Fast load times
• Easy cache management
• Code reuse
• Shared branding identity
• Smooth user experience
• No technology Isolation
• No deployment Isolation
• No runtime Isolation
• Slow load times
• Hard cache management
• Code reuse
• Shared branding identity
• Smooth user experience
Multiple Frameworks
Pros and Cons of Framework Isolation
• Technology Isolation
• Deployment Isolation
• Runtime Isolation
• Fast load times
• Easy cache management
• Code reuse
• Shared branding identity
• Smooth user experience
• Technology Isolation
• Deployment Isolation
• Runtime Isolation
• Fast load times
• Easy cache management
• Code reuse
• Shared branding identity
• Smooth user experience
Recap
Themes:
• Hosting things separately
• Or package and bundle components in the same application
• Each implementation has a set of pros and cons
• There are quite likely many other ways of doing it too
• There is no perfect answer 
Required reading
• https://www.devconf.co.za/rate
• Finding your service boundaries (https://vimeo.com/284707733)
• http://single-spa.js.org/
• https://developer.mozilla.org/en-US/docs/Web/Web_Components
• https://github.com/WilliamBZA/microfrontends-cruises
• https://github.com/WilliamBZA/Microfrontends-demo
William Brander
@williambza
Particular Software
Ad

More Related Content

What's hot (15)

WSO2 Intro Webinar - Scale your business with the cloud enabled WSO2 Applica...
WSO2 Intro Webinar -  Scale your business with the cloud enabled WSO2 Applica...WSO2 Intro Webinar -  Scale your business with the cloud enabled WSO2 Applica...
WSO2 Intro Webinar - Scale your business with the cloud enabled WSO2 Applica...
WSO2
 
Implementing a Paywall on WordPress.com VIP
Implementing a Paywall on WordPress.com VIPImplementing a Paywall on WordPress.com VIP
Implementing a Paywall on WordPress.com VIP
Gabriel Koen
 
Knock out Introduction with samples (jsfiddle.net)
Knock out Introduction with samples (jsfiddle.net)Knock out Introduction with samples (jsfiddle.net)
Knock out Introduction with samples (jsfiddle.net)
Balakrishnanan Ganesan
 
LFC DjangoCon EU
LFC DjangoCon EULFC DjangoCon EU
LFC DjangoCon EU
diefenbach
 
Weblogic server short
Weblogic server shortWeblogic server short
Weblogic server short
Samatha Kamuni
 
JavaEE 8 Introduction - Session 1
JavaEE 8 Introduction - Session 1JavaEE 8 Introduction - Session 1
JavaEE 8 Introduction - Session 1
Amin Arab
 
Caching with windows azure
Caching with windows azureCaching with windows azure
Caching with windows azure
Richard Conway
 
Making Multisite Work for You
Making Multisite Work for YouMaking Multisite Work for You
Making Multisite Work for You
drywallbmb
 
Better Enterprise Integration With the WSO2 ESB 4.5.1
Better Enterprise Integration With the WSO2 ESB 4.5.1Better Enterprise Integration With the WSO2 ESB 4.5.1
Better Enterprise Integration With the WSO2 ESB 4.5.1
WSO2
 
Upgrading from vss to tfs jan 19 - microsoft
Upgrading from vss to tfs   jan 19 - microsoftUpgrading from vss to tfs   jan 19 - microsoft
Upgrading from vss to tfs jan 19 - microsoft
Spiffy
 
Ibm websphere server administration training
Ibm websphere  server administration trainingIbm websphere  server administration training
Ibm websphere server administration training
FuturePoint Technologies
 
Website Auto scraping with Autoit and .Net HttpRequest
Website Auto scraping with Autoit and .Net HttpRequestWebsite Auto scraping with Autoit and .Net HttpRequest
Website Auto scraping with Autoit and .Net HttpRequest
Chen-Tien Tsai
 
ApacheCon North America - Introduction to FlexJS
ApacheCon North America - Introduction to FlexJSApacheCon North America - Introduction to FlexJS
ApacheCon North America - Introduction to FlexJS
Yishay Weiss
 
1 - demo lab using vmware workstation
1 - demo lab using vmware workstation1 - demo lab using vmware workstation
1 - demo lab using vmware workstation
Mangat R K
 
опыт использования схемы Drupal+varnish+nginx руслан исай
опыт использования схемы Drupal+varnish+nginx руслан исайопыт использования схемы Drupal+varnish+nginx руслан исай
опыт использования схемы Drupal+varnish+nginx руслан исай
drupalconf
 
WSO2 Intro Webinar - Scale your business with the cloud enabled WSO2 Applica...
WSO2 Intro Webinar -  Scale your business with the cloud enabled WSO2 Applica...WSO2 Intro Webinar -  Scale your business with the cloud enabled WSO2 Applica...
WSO2 Intro Webinar - Scale your business with the cloud enabled WSO2 Applica...
WSO2
 
Implementing a Paywall on WordPress.com VIP
Implementing a Paywall on WordPress.com VIPImplementing a Paywall on WordPress.com VIP
Implementing a Paywall on WordPress.com VIP
Gabriel Koen
 
Knock out Introduction with samples (jsfiddle.net)
Knock out Introduction with samples (jsfiddle.net)Knock out Introduction with samples (jsfiddle.net)
Knock out Introduction with samples (jsfiddle.net)
Balakrishnanan Ganesan
 
LFC DjangoCon EU
LFC DjangoCon EULFC DjangoCon EU
LFC DjangoCon EU
diefenbach
 
JavaEE 8 Introduction - Session 1
JavaEE 8 Introduction - Session 1JavaEE 8 Introduction - Session 1
JavaEE 8 Introduction - Session 1
Amin Arab
 
Caching with windows azure
Caching with windows azureCaching with windows azure
Caching with windows azure
Richard Conway
 
Making Multisite Work for You
Making Multisite Work for YouMaking Multisite Work for You
Making Multisite Work for You
drywallbmb
 
Better Enterprise Integration With the WSO2 ESB 4.5.1
Better Enterprise Integration With the WSO2 ESB 4.5.1Better Enterprise Integration With the WSO2 ESB 4.5.1
Better Enterprise Integration With the WSO2 ESB 4.5.1
WSO2
 
Upgrading from vss to tfs jan 19 - microsoft
Upgrading from vss to tfs   jan 19 - microsoftUpgrading from vss to tfs   jan 19 - microsoft
Upgrading from vss to tfs jan 19 - microsoft
Spiffy
 
Ibm websphere server administration training
Ibm websphere  server administration trainingIbm websphere  server administration training
Ibm websphere server administration training
FuturePoint Technologies
 
Website Auto scraping with Autoit and .Net HttpRequest
Website Auto scraping with Autoit and .Net HttpRequestWebsite Auto scraping with Autoit and .Net HttpRequest
Website Auto scraping with Autoit and .Net HttpRequest
Chen-Tien Tsai
 
ApacheCon North America - Introduction to FlexJS
ApacheCon North America - Introduction to FlexJSApacheCon North America - Introduction to FlexJS
ApacheCon North America - Introduction to FlexJS
Yishay Weiss
 
1 - demo lab using vmware workstation
1 - demo lab using vmware workstation1 - demo lab using vmware workstation
1 - demo lab using vmware workstation
Mangat R K
 
опыт использования схемы Drupal+varnish+nginx руслан исай
опыт использования схемы Drupal+varnish+nginx руслан исайопыт использования схемы Drupal+varnish+nginx руслан исай
опыт использования схемы Drupal+varnish+nginx руслан исай
drupalconf
 

Similar to 2019 devconfza - legacy js (20)

Stay productive while slicing up the monolith
Stay productive while slicing up the monolith Stay productive while slicing up the monolith
Stay productive while slicing up the monolith
Markus Eisele
 
Preparing your dockerised application for production deployment
Preparing your dockerised application for production deploymentPreparing your dockerised application for production deployment
Preparing your dockerised application for production deployment
Dave Ward
 
DrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an AfterthoughtDrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an Afterthought
Nick Santamaria
 
Finding The Weak Link in Windows Binaries
Finding The Weak Link in Windows BinariesFinding The Weak Link in Windows Binaries
Finding The Weak Link in Windows Binaries
Ollie Whitehouse
 
Introduction of vertical crawler
Introduction of vertical crawlerIntroduction of vertical crawler
Introduction of vertical crawler
Jinglun Li
 
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Denim Group
 
be the captain of your connections deployment
be the captain of your connections deploymentbe the captain of your connections deployment
be the captain of your connections deployment
Sharon James
 
System hardening - OS and Application
System hardening - OS and ApplicationSystem hardening - OS and Application
System hardening - OS and Application
edavid2685
 
ThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.jsThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.js
Brad Williams
 
Designing a Highly Available Management Cluster for the Cloud
Designing a Highly Available Management Cluster for the CloudDesigning a Highly Available Management Cluster for the Cloud
Designing a Highly Available Management Cluster for the Cloud
Arron Stebbing
 
Magento 2 Workflows
Magento 2 WorkflowsMagento 2 Workflows
Magento 2 Workflows
Ryan Street
 
Top 10 web application development frameworks 2016
Top 10 web application development frameworks 2016Top 10 web application development frameworks 2016
Top 10 web application development frameworks 2016
iMOBDEV Technologies Pvt. Ltd.
 
stackconf 2020 | Replace your Docker based Containers with Cri-o Kata Contain...
stackconf 2020 | Replace your Docker based Containers with Cri-o Kata Contain...stackconf 2020 | Replace your Docker based Containers with Cri-o Kata Contain...
stackconf 2020 | Replace your Docker based Containers with Cri-o Kata Contain...
NETWAYS
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
FITC
 
USG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using DrupalUSG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using Drupal
Eric Sembrat
 
Java Concurrency and Performance | Multi Threading | Concurrency | Java Conc...
Java Concurrency and Performance | Multi Threading  | Concurrency | Java Conc...Java Concurrency and Performance | Multi Threading  | Concurrency | Java Conc...
Java Concurrency and Performance | Multi Threading | Concurrency | Java Conc...
Anand Narayanan
 
Continuous Integration for OpenVMS with Jenkins
Continuous Integration for OpenVMS with JenkinsContinuous Integration for OpenVMS with Jenkins
Continuous Integration for OpenVMS with Jenkins
ecubemarketing
 
MyHeritage - QA Automations in a Continuous Deployment environment
MyHeritage -  QA Automations in a Continuous Deployment environmentMyHeritage -  QA Automations in a Continuous Deployment environment
MyHeritage - QA Automations in a Continuous Deployment environment
MatanGoren
 
Wasserman Keynote at ICSSP 2013
Wasserman Keynote at ICSSP 2013Wasserman Keynote at ICSSP 2013
Wasserman Keynote at ICSSP 2013
twasserman
 
Understanding container security
Understanding container securityUnderstanding container security
Understanding container security
John Kinsella
 
Stay productive while slicing up the monolith
Stay productive while slicing up the monolith Stay productive while slicing up the monolith
Stay productive while slicing up the monolith
Markus Eisele
 
Preparing your dockerised application for production deployment
Preparing your dockerised application for production deploymentPreparing your dockerised application for production deployment
Preparing your dockerised application for production deployment
Dave Ward
 
DrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an AfterthoughtDrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an Afterthought
Nick Santamaria
 
Finding The Weak Link in Windows Binaries
Finding The Weak Link in Windows BinariesFinding The Weak Link in Windows Binaries
Finding The Weak Link in Windows Binaries
Ollie Whitehouse
 
Introduction of vertical crawler
Introduction of vertical crawlerIntroduction of vertical crawler
Introduction of vertical crawler
Jinglun Li
 
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Denim Group
 
be the captain of your connections deployment
be the captain of your connections deploymentbe the captain of your connections deployment
be the captain of your connections deployment
Sharon James
 
System hardening - OS and Application
System hardening - OS and ApplicationSystem hardening - OS and Application
System hardening - OS and Application
edavid2685
 
ThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.jsThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.js
Brad Williams
 
Designing a Highly Available Management Cluster for the Cloud
Designing a Highly Available Management Cluster for the CloudDesigning a Highly Available Management Cluster for the Cloud
Designing a Highly Available Management Cluster for the Cloud
Arron Stebbing
 
Magento 2 Workflows
Magento 2 WorkflowsMagento 2 Workflows
Magento 2 Workflows
Ryan Street
 
stackconf 2020 | Replace your Docker based Containers with Cri-o Kata Contain...
stackconf 2020 | Replace your Docker based Containers with Cri-o Kata Contain...stackconf 2020 | Replace your Docker based Containers with Cri-o Kata Contain...
stackconf 2020 | Replace your Docker based Containers with Cri-o Kata Contain...
NETWAYS
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
FITC
 
USG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using DrupalUSG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using Drupal
Eric Sembrat
 
Java Concurrency and Performance | Multi Threading | Concurrency | Java Conc...
Java Concurrency and Performance | Multi Threading  | Concurrency | Java Conc...Java Concurrency and Performance | Multi Threading  | Concurrency | Java Conc...
Java Concurrency and Performance | Multi Threading | Concurrency | Java Conc...
Anand Narayanan
 
Continuous Integration for OpenVMS with Jenkins
Continuous Integration for OpenVMS with JenkinsContinuous Integration for OpenVMS with Jenkins
Continuous Integration for OpenVMS with Jenkins
ecubemarketing
 
MyHeritage - QA Automations in a Continuous Deployment environment
MyHeritage -  QA Automations in a Continuous Deployment environmentMyHeritage -  QA Automations in a Continuous Deployment environment
MyHeritage - QA Automations in a Continuous Deployment environment
MatanGoren
 
Wasserman Keynote at ICSSP 2013
Wasserman Keynote at ICSSP 2013Wasserman Keynote at ICSSP 2013
Wasserman Keynote at ICSSP 2013
twasserman
 
Understanding container security
Understanding container securityUnderstanding container security
Understanding container security
John Kinsella
 
Ad

Recently uploaded (20)

Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
Ad

2019 devconfza - legacy js

  • 1. Micro Frontends as a solution to legacy JS William Brander William Brander @williambza Particular Software
  • 7. Our examples: • Complete Isolation • Componentization • Web Components • Hybrid Multi-Framework
  • 8. Let’s look at Isolation
  • 11. Pros and Cons of Isolation • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • No code reuse • No shared branding identity • Not a smooth user experience <body> <!--#include virtual="/navbar" --> <!--#include virtual="/footer" --> <!--#include virtual="/userprofile" --> </body>
  • 12. Pros and Cons of Isolation + Embedding • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • Technology Isolation • Deployment Isolation • Runtime Isolation • Slow load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience
  • 13. Let’s look at Componentization
  • 14. Pros and Cons of Components • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • No technology Isolation • Deployment Isolation • No runtime Isolation • Slow load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience
  • 16. Pros and Cons of WebComponents • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • No technology Isolation • No deployment Isolation • No runtime Isolation • Slow load times • Hard cache management • Code reuse • Shared branding identity • Smooth user experience
  • 18. Pros and Cons of Framework Isolation • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience
  • 19. Recap
  • 20. Themes: • Hosting things separately • Or package and bundle components in the same application • Each implementation has a set of pros and cons • There are quite likely many other ways of doing it too • There is no perfect answer 
  • 21. Required reading • https://www.devconf.co.za/rate • Finding your service boundaries (https://vimeo.com/284707733) • http://single-spa.js.org/ • https://developer.mozilla.org/en-US/docs/Web/Web_Components • https://github.com/WilliamBZA/microfrontends-cruises • https://github.com/WilliamBZA/Microfrontends-demo William Brander @williambza Particular Software

Editor's Notes

  • #5: August 26, 2006
  • #16: npm install --save git+https://[email protected]/WilliamBZA/microfrontends-cruises.git import { Cruise, CruiseNavButton } from 'microfrontends-cruises'; <div id="cruises" className="tab-pane fade"> <Cruise></Cruise> </div>