SlideShare a Scribd company logo
Microservice Approach for Web
Development With Micro Frontends
Andrejus Baranovskis, CEO andTechnical Expert, Red Samurai Consulting
Oracle ACE Director and Oracle Developer Champion
Oracle ExpertsTeam
ADF, JET, ORACLE FUSION, ORACLE CLOUD, MACHINE LEARNING
Oracle PaaS Partner Community Award for Outstanding Java Cloud
Service Contribution 2017
–ThoughtWorksTechnology Radar
“We've seen significant benefits from introducing microservice
architectures, which have allowed teams to scale the delivery of
independent deployed and maintained services. Our preferred (and
proven) approach is to split the browser-based code into micro frontends.
In this approach, the web application is broken down into its features, and
each feature is owned, frontend to backend, by a different team.”
AGENDA
• Gentle Introduction to Micro Frontends
• Technical Architecture
• Solution WalkThrough
• Implementation Points
GENTLE INTRODUCTIONTO
MICRO FRONTENDS
MICRO FRONTENDS IDEA
• Website or web app as a composition of features which are owned
by independent teams
• Each team has a distinct area of business or mission it cares about
and specialises in
• A team is cross functional and develops its features end-to-end, from
database to user interface
MONOLITHIC FRONTENDSDatabase
Human
Capital
Management
Team
BackendFrontend
Monolith
Database Backend /
DevOpsTeam
BackendFrontend
Front & Back
Frontend
Team
DatabaseBackendFrontend
Microservices
Frontend
Team
PayrollService
TalentService
PerformanceService
AnalyticsService
Aggregation Layer
MICRO FRONTENDSDatabase
Team Payroll
BackendFrontend
Payroll Data
Entry Widget
Database
TeamTalent
BackendFrontend
Talent Score
Widget
Database
Team
Performance
BackendFrontend
Performance
Search Widget
MICRO FRONTENDS
• Technology Agnostic
• Each team should be able to choose and upgrade their stack without having
to coordinate with other teams
• Team Code Isolation
• Don't share a runtime, even if all teams use the same framework. Build
independent apps that are self contained. Don't rely on shared state or global
variables
MICRO FRONTENDS -
WEB COMPONENTS SOLUTION
UI Shell
Micro Frontend
Web Component I
Micro Frontend
Web Component II
Micro Frontend
Web Component III
MICRO FRONTENDS
WEB COMPONENTS SOLUTION
• Solution relies on Remote Module Loading in RequireJS
• This allows to integrate Web Components hosted separately into
single UI Shell
• Remote Loading ensures independent behaviour, without runtime
dependencies between components. If one component fails - system
continues to work
WEB COMPONENTS IN ORACLE JET
• Oracle JET Composite Component - JET implementation of the
HTML5 Web Component Specification
• Can be loaded remotely
• Runs independently from other components in the same UI Shell -
doesn't block application, if component fails
TECHNICAL ARCHITECTURE
DatabaseBackendFrontend
Oracle ADF
Employees
Web Component
Widget
Micro Frontend I
DatabaseBackendFrontend
Jobs
Web Component
Widget
Micro Frontend II
UIShell
Event Method
Oracle JET Oracle JET Oracle JET
HTML HTML
Scripts Scripts
Web Component 1 Web Component II
JET Module
UI Shell
WebComponentI
WebComponentII
UIShell
SOLUTION WALKTHROUGH
IMPLEMENTATION POINTS
QUESTIONS
CONTACTS
• Andrejus Baranovskis
• Email: abaranovskis@redsamuraiconsulting.com
• Twitter: @andrejusb
• LinkedIn: https://www.linkedin.com/in/andrejus-baranovskis-251b392
• Web: http://redsamuraiconsulting.com
REFERENCES
• Source Code - https://github.com/abaranovskis-redsamurai/warsaw
• Micro Frontends - https://micro-frontends.org/
• Oracle JET Composite Components - https://bit.ly/2jrMh5m
• Oracle JET Remote Module Loading - https://bit.ly/2JRMVEh

More Related Content

What's hot

Microfrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedMicrofrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased based
Vinci Rufus
 
Micro Frontends Architecture - Jitendra kumawat (Guavus)
Micro Frontends Architecture - Jitendra kumawat (Guavus)Micro Frontends Architecture - Jitendra kumawat (Guavus)
Micro Frontends Architecture - Jitendra kumawat (Guavus)
Tech Triveni
 
Globant development week / Micro frontend
Globant development week / Micro frontendGlobant development week / Micro frontend
Globant development week / Micro frontend
Globant
 
State of Micro Frontend
State of Micro FrontendState of Micro Frontend
State of Micro Frontend
Yugo Sakamoto
 
Mikrofrontend a Module Federation
Mikrofrontend a Module FederationMikrofrontend a Module Federation
Mikrofrontend a Module Federation
The Software House
 
Micro Frontend Platforms for Kubernetes
Micro Frontend Platforms for KubernetesMicro Frontend Platforms for Kubernetes
Micro Frontend Platforms for Kubernetes
Entando
 
Introduction To Micro Frontends
Introduction To Micro Frontends Introduction To Micro Frontends
Introduction To Micro Frontends
Meitar Karas
 
Microservice Architecture | Microservices Tutorial for Beginners | Microservi...
Microservice Architecture | Microservices Tutorial for Beginners | Microservi...Microservice Architecture | Microservices Tutorial for Beginners | Microservi...
Microservice Architecture | Microservices Tutorial for Beginners | Microservi...
Edureka!
 
"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych
Fwdays
 
Understanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring BootUnderstanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring Boot
Kashif Ali Siddiqui
 
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
DevDay.org
 
Micro services vs Monolith Architecture
Micro services vs Monolith ArchitectureMicro services vs Monolith Architecture
Micro services vs Monolith Architecture
MohamedElGohary71
 
Microservice Architecture
Microservice ArchitectureMicroservice Architecture
Microservice Architecture
tyrantbrian
 
Introduction To Microservices
Introduction To MicroservicesIntroduction To Microservices
Introduction To Microservices
Lalit Kale
 
Micro-frontend
Micro-frontendMicro-frontend
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Codemotion
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
KNOWARTH - Software Development Company
 
Micro-Frontend Architecture
Micro-Frontend ArchitectureMicro-Frontend Architecture
Micro-Frontend Architecture
Livares Technologies Pvt Ltd
 
Monoliths and Microservices
Monoliths and Microservices Monoliths and Microservices
Monoliths and Microservices
Bozhidar Bozhanov
 
Micro frontend architecture_presentation_ssoni
Micro frontend architecture_presentation_ssoniMicro frontend architecture_presentation_ssoni
Micro frontend architecture_presentation_ssoni
Sandeep Soni
 

What's hot (20)

Microfrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedMicrofrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased based
 
Micro Frontends Architecture - Jitendra kumawat (Guavus)
Micro Frontends Architecture - Jitendra kumawat (Guavus)Micro Frontends Architecture - Jitendra kumawat (Guavus)
Micro Frontends Architecture - Jitendra kumawat (Guavus)
 
Globant development week / Micro frontend
Globant development week / Micro frontendGlobant development week / Micro frontend
Globant development week / Micro frontend
 
State of Micro Frontend
State of Micro FrontendState of Micro Frontend
State of Micro Frontend
 
Mikrofrontend a Module Federation
Mikrofrontend a Module FederationMikrofrontend a Module Federation
Mikrofrontend a Module Federation
 
Micro Frontend Platforms for Kubernetes
Micro Frontend Platforms for KubernetesMicro Frontend Platforms for Kubernetes
Micro Frontend Platforms for Kubernetes
 
Introduction To Micro Frontends
Introduction To Micro Frontends Introduction To Micro Frontends
Introduction To Micro Frontends
 
Microservice Architecture | Microservices Tutorial for Beginners | Microservi...
Microservice Architecture | Microservices Tutorial for Beginners | Microservi...Microservice Architecture | Microservices Tutorial for Beginners | Microservi...
Microservice Architecture | Microservices Tutorial for Beginners | Microservi...
 
"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych
 
Understanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring BootUnderstanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring Boot
 
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
 
Micro services vs Monolith Architecture
Micro services vs Monolith ArchitectureMicro services vs Monolith Architecture
Micro services vs Monolith Architecture
 
Microservice Architecture
Microservice ArchitectureMicroservice Architecture
Microservice Architecture
 
Introduction To Microservices
Introduction To MicroservicesIntroduction To Microservices
Introduction To Microservices
 
Micro-frontend
Micro-frontendMicro-frontend
Micro-frontend
 
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
 
Micro-Frontend Architecture
Micro-Frontend ArchitectureMicro-Frontend Architecture
Micro-Frontend Architecture
 
Monoliths and Microservices
Monoliths and Microservices Monoliths and Microservices
Monoliths and Microservices
 
Micro frontend architecture_presentation_ssoni
Micro frontend architecture_presentation_ssoniMicro frontend architecture_presentation_ssoni
Micro frontend architecture_presentation_ssoni
 

Similar to Microservice Approach for Web Development with Micro Frontends

Micro Frontends
Micro FrontendsMicro Frontends
Micro Frontends
Talentica Software
 
Micro frontends with react and redux dev day
Micro frontends with react and redux   dev dayMicro frontends with react and redux   dev day
Micro frontends with react and redux dev day
Prasanna Venkatesan
 
Tools and Recipes to Replatform Monolithic Apps to Modern Cloud Environments
Tools and Recipes to Replatform Monolithic Apps to Modern Cloud EnvironmentsTools and Recipes to Replatform Monolithic Apps to Modern Cloud Environments
Tools and Recipes to Replatform Monolithic Apps to Modern Cloud Environments
VMware Tanzu
 
Ora_Case_Study_Oracle Application Development Framework
Ora_Case_Study_Oracle Application Development FrameworkOra_Case_Study_Oracle Application Development Framework
Ora_Case_Study_Oracle Application Development FrameworkNeha Singh
 
MicroserviceArchitecture in detail over Monolith.
MicroserviceArchitecture in detail over Monolith.MicroserviceArchitecture in detail over Monolith.
MicroserviceArchitecture in detail over Monolith.
PLovababu
 
Transforming to Microservices
Transforming to MicroservicesTransforming to Microservices
Transforming to Microservices
Kyle Brown
 
Micro-frontends – is it a new normal?
Micro-frontends – is it a new normal?Micro-frontends – is it a new normal?
Micro-frontends – is it a new normal?
Lohika_Odessa_TechTalks
 
Micronaut Framework Guide Framework Basics and Fundamentals.pdf
Micronaut Framework Guide Framework Basics and Fundamentals.pdfMicronaut Framework Guide Framework Basics and Fundamentals.pdf
Micronaut Framework Guide Framework Basics and Fundamentals.pdf
Inexture Solutions
 
TransitioningToMicroServonDocker_MS
TransitioningToMicroServonDocker_MSTransitioningToMicroServonDocker_MS
TransitioningToMicroServonDocker_MSLana Kalashnyk
 
Micro Frontends.pptx
Micro Frontends.pptxMicro Frontends.pptx
Micro Frontends.pptx
ShanAli738907
 
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
 
Top 5 backend frameworks for web development in.pptx
Top 5 backend frameworks for web development in.pptxTop 5 backend frameworks for web development in.pptx
Top 5 backend frameworks for web development in.pptx
SilverClouding Consultancy Pvt Ltd
 
JAVA J2EE LEAD coming out of CITI
JAVA J2EE LEAD coming out of CITIJAVA J2EE LEAD coming out of CITI
JAVA J2EE LEAD coming out of CITI
vravi123
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
IRJET Journal
 
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Lucas Jellema
 

Similar to Microservice Approach for Web Development with Micro Frontends (20)

Micro Frontends
Micro FrontendsMicro Frontends
Micro Frontends
 
Micro frontends with react and redux dev day
Micro frontends with react and redux   dev dayMicro frontends with react and redux   dev day
Micro frontends with react and redux dev day
 
Arun Kumar(7.8Yrs).DOC
Arun Kumar(7.8Yrs).DOCArun Kumar(7.8Yrs).DOC
Arun Kumar(7.8Yrs).DOC
 
Tools and Recipes to Replatform Monolithic Apps to Modern Cloud Environments
Tools and Recipes to Replatform Monolithic Apps to Modern Cloud EnvironmentsTools and Recipes to Replatform Monolithic Apps to Modern Cloud Environments
Tools and Recipes to Replatform Monolithic Apps to Modern Cloud Environments
 
Ora_Case_Study_Oracle Application Development Framework
Ora_Case_Study_Oracle Application Development FrameworkOra_Case_Study_Oracle Application Development Framework
Ora_Case_Study_Oracle Application Development Framework
 
MicroserviceArchitecture in detail over Monolith.
MicroserviceArchitecture in detail over Monolith.MicroserviceArchitecture in detail over Monolith.
MicroserviceArchitecture in detail over Monolith.
 
Transforming to Microservices
Transforming to MicroservicesTransforming to Microservices
Transforming to Microservices
 
Micro-frontends – is it a new normal?
Micro-frontends – is it a new normal?Micro-frontends – is it a new normal?
Micro-frontends – is it a new normal?
 
KaranDeepSinghCV
KaranDeepSinghCVKaranDeepSinghCV
KaranDeepSinghCV
 
Micronaut Framework Guide Framework Basics and Fundamentals.pdf
Micronaut Framework Guide Framework Basics and Fundamentals.pdfMicronaut Framework Guide Framework Basics and Fundamentals.pdf
Micronaut Framework Guide Framework Basics and Fundamentals.pdf
 
TransitioningToMicroServonDocker_MS
TransitioningToMicroServonDocker_MSTransitioningToMicroServonDocker_MS
TransitioningToMicroServonDocker_MS
 
Micro Frontends.pptx
Micro Frontends.pptxMicro Frontends.pptx
Micro Frontends.pptx
 
Alaguraja.Ramasamy
Alaguraja.RamasamyAlaguraja.Ramasamy
Alaguraja.Ramasamy
 
ThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.jsThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.js
 
Top 5 backend frameworks for web development in.pptx
Top 5 backend frameworks for web development in.pptxTop 5 backend frameworks for web development in.pptx
Top 5 backend frameworks for web development in.pptx
 
JAVA J2EE LEAD coming out of CITI
JAVA J2EE LEAD coming out of CITIJAVA J2EE LEAD coming out of CITI
JAVA J2EE LEAD coming out of CITI
 
spring
springspring
spring
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
 
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
 
Spring framework
Spring frameworkSpring framework
Spring framework
 

More from andrejusb

Machine Learning Applied - Tabular Dataset Models and Sentiment Analysis
Machine Learning Applied - Tabular Dataset Models and Sentiment AnalysisMachine Learning Applied - Tabular Dataset Models and Sentiment Analysis
Machine Learning Applied - Tabular Dataset Models and Sentiment Analysis
andrejusb
 
JavaScript Development on Steroids with Oracle Visual Builder
JavaScript Development on Steroids with Oracle Visual BuilderJavaScript Development on Steroids with Oracle Visual Builder
JavaScript Development on Steroids with Oracle Visual Builder
andrejusb
 
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorFlow
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorFlowMachine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorFlow
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorFlow
andrejusb
 
Reliable, Fast, Engaging Offline-First Architecture for JavaScript Applications
 Reliable, Fast, Engaging Offline-First Architecture for JavaScript Applications Reliable, Fast, Engaging Offline-First Architecture for JavaScript Applications
Reliable, Fast, Engaging Offline-First Architecture for JavaScript Applications
andrejusb
 
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensor...
 Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensor... Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensor...
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensor...
andrejusb
 
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensorflow
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorflowMachine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensorflow
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensorflow
andrejusb
 
Oracle Development Cloud Service
Oracle Development Cloud ServiceOracle Development Cloud Service
Oracle Development Cloud Service
andrejusb
 
Oracle Java Cloud Service: How to Estimate Production System Performance
Oracle Java Cloud Service: How to Estimate Production System PerformanceOracle Java Cloud Service: How to Estimate Production System Performance
Oracle Java Cloud Service: How to Estimate Production System Performance
andrejusb
 
Essential Kit for Oracle JET Programming
Essential Kit for Oracle JET ProgrammingEssential Kit for Oracle JET Programming
Essential Kit for Oracle JET Programming
andrejusb
 
Oracle JET and ADF BC REST Production Experience with Oracle Java Cloud
Oracle JET and ADF BC REST Production Experience with Oracle Java CloudOracle JET and ADF BC REST Production Experience with Oracle Java Cloud
Oracle JET and ADF BC REST Production Experience with Oracle Java Cloud
andrejusb
 
Offline Web with Oracle JET
Offline Web with Oracle JETOffline Web with Oracle JET
Offline Web with Oracle JET
andrejusb
 
End-to-End Cloud: Oracle Java Cloud, Oracle Mobile Cloud Service, Oracle MAF,...
End-to-End Cloud: Oracle Java Cloud, Oracle Mobile Cloud Service, Oracle MAF,...End-to-End Cloud: Oracle Java Cloud, Oracle Mobile Cloud Service, Oracle MAF,...
End-to-End Cloud: Oracle Java Cloud, Oracle Mobile Cloud Service, Oracle MAF,...
andrejusb
 
Forms, ADF and JET a Non-Aggression Pact
Forms, ADF and JET a Non-Aggression PactForms, ADF and JET a Non-Aggression Pact
Forms, ADF and JET a Non-Aggression Pact
andrejusb
 
Oracle JET CRUD and ADF BC REST
Oracle JET CRUD and ADF BC RESTOracle JET CRUD and ADF BC REST
Oracle JET CRUD and ADF BC REST
andrejusb
 
Oracle JET and WebSocket
Oracle JET and WebSocketOracle JET and WebSocket
Oracle JET and WebSocket
andrejusb
 
Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support
Oracle Alta UI Patterns for Enterprise Applications and Responsive UI SupportOracle Alta UI Patterns for Enterprise Applications and Responsive UI Support
Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support
andrejusb
 
ADF Mythbusters UKOUG'14
ADF Mythbusters UKOUG'14ADF Mythbusters UKOUG'14
ADF Mythbusters UKOUG'14
andrejusb
 
Data Caching Strategies for Oracle Mobile Application Framework
Data Caching Strategies for Oracle Mobile Application FrameworkData Caching Strategies for Oracle Mobile Application Framework
Data Caching Strategies for Oracle Mobile Application Framework
andrejusb
 
ADF Development Survival Kit
ADF Development Survival KitADF Development Survival Kit
ADF Development Survival Kitandrejusb
 
ADF Anti-Patterns: Dangerous Tutorials
ADF Anti-Patterns: Dangerous TutorialsADF Anti-Patterns: Dangerous Tutorials
ADF Anti-Patterns: Dangerous Tutorials
andrejusb
 

More from andrejusb (20)

Machine Learning Applied - Tabular Dataset Models and Sentiment Analysis
Machine Learning Applied - Tabular Dataset Models and Sentiment AnalysisMachine Learning Applied - Tabular Dataset Models and Sentiment Analysis
Machine Learning Applied - Tabular Dataset Models and Sentiment Analysis
 
JavaScript Development on Steroids with Oracle Visual Builder
JavaScript Development on Steroids with Oracle Visual BuilderJavaScript Development on Steroids with Oracle Visual Builder
JavaScript Development on Steroids with Oracle Visual Builder
 
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorFlow
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorFlowMachine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorFlow
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorFlow
 
Reliable, Fast, Engaging Offline-First Architecture for JavaScript Applications
 Reliable, Fast, Engaging Offline-First Architecture for JavaScript Applications Reliable, Fast, Engaging Offline-First Architecture for JavaScript Applications
Reliable, Fast, Engaging Offline-First Architecture for JavaScript Applications
 
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensor...
 Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensor... Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensor...
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensor...
 
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensorflow
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and TensorflowMachine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensorflow
Machine Learning Applied - Contextual Chatbots Coding, Oracle JET and Tensorflow
 
Oracle Development Cloud Service
Oracle Development Cloud ServiceOracle Development Cloud Service
Oracle Development Cloud Service
 
Oracle Java Cloud Service: How to Estimate Production System Performance
Oracle Java Cloud Service: How to Estimate Production System PerformanceOracle Java Cloud Service: How to Estimate Production System Performance
Oracle Java Cloud Service: How to Estimate Production System Performance
 
Essential Kit for Oracle JET Programming
Essential Kit for Oracle JET ProgrammingEssential Kit for Oracle JET Programming
Essential Kit for Oracle JET Programming
 
Oracle JET and ADF BC REST Production Experience with Oracle Java Cloud
Oracle JET and ADF BC REST Production Experience with Oracle Java CloudOracle JET and ADF BC REST Production Experience with Oracle Java Cloud
Oracle JET and ADF BC REST Production Experience with Oracle Java Cloud
 
Offline Web with Oracle JET
Offline Web with Oracle JETOffline Web with Oracle JET
Offline Web with Oracle JET
 
End-to-End Cloud: Oracle Java Cloud, Oracle Mobile Cloud Service, Oracle MAF,...
End-to-End Cloud: Oracle Java Cloud, Oracle Mobile Cloud Service, Oracle MAF,...End-to-End Cloud: Oracle Java Cloud, Oracle Mobile Cloud Service, Oracle MAF,...
End-to-End Cloud: Oracle Java Cloud, Oracle Mobile Cloud Service, Oracle MAF,...
 
Forms, ADF and JET a Non-Aggression Pact
Forms, ADF and JET a Non-Aggression PactForms, ADF and JET a Non-Aggression Pact
Forms, ADF and JET a Non-Aggression Pact
 
Oracle JET CRUD and ADF BC REST
Oracle JET CRUD and ADF BC RESTOracle JET CRUD and ADF BC REST
Oracle JET CRUD and ADF BC REST
 
Oracle JET and WebSocket
Oracle JET and WebSocketOracle JET and WebSocket
Oracle JET and WebSocket
 
Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support
Oracle Alta UI Patterns for Enterprise Applications and Responsive UI SupportOracle Alta UI Patterns for Enterprise Applications and Responsive UI Support
Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support
 
ADF Mythbusters UKOUG'14
ADF Mythbusters UKOUG'14ADF Mythbusters UKOUG'14
ADF Mythbusters UKOUG'14
 
Data Caching Strategies for Oracle Mobile Application Framework
Data Caching Strategies for Oracle Mobile Application FrameworkData Caching Strategies for Oracle Mobile Application Framework
Data Caching Strategies for Oracle Mobile Application Framework
 
ADF Development Survival Kit
ADF Development Survival KitADF Development Survival Kit
ADF Development Survival Kit
 
ADF Anti-Patterns: Dangerous Tutorials
ADF Anti-Patterns: Dangerous TutorialsADF Anti-Patterns: Dangerous Tutorials
ADF Anti-Patterns: Dangerous Tutorials
 

Recently uploaded

This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
nirahealhty
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
JungkooksNonexistent
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
keoku
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
Gal Baras
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
eutxy
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
JeyaPerumal1
 
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdfJAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
Javier Lasa
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
Arif0071
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
laozhuseo02
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
natyesu
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
laozhuseo02
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Brad Spiegel Macon GA
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
Rogerio Filho
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
GTProductions1
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Sanjeev Rampal
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
3ipehhoa
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
3ipehhoa
 
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
3ipehhoa
 

Recently uploaded (20)

This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
 
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdfJAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
 
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
 

Microservice Approach for Web Development with Micro Frontends

  • 1. Microservice Approach for Web Development With Micro Frontends Andrejus Baranovskis, CEO andTechnical Expert, Red Samurai Consulting Oracle ACE Director and Oracle Developer Champion
  • 2. Oracle ExpertsTeam ADF, JET, ORACLE FUSION, ORACLE CLOUD, MACHINE LEARNING Oracle PaaS Partner Community Award for Outstanding Java Cloud Service Contribution 2017
  • 3. –ThoughtWorksTechnology Radar “We've seen significant benefits from introducing microservice architectures, which have allowed teams to scale the delivery of independent deployed and maintained services. Our preferred (and proven) approach is to split the browser-based code into micro frontends. In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team.”
  • 4. AGENDA • Gentle Introduction to Micro Frontends • Technical Architecture • Solution WalkThrough • Implementation Points
  • 6. MICRO FRONTENDS IDEA • Website or web app as a composition of features which are owned by independent teams • Each team has a distinct area of business or mission it cares about and specialises in • A team is cross functional and develops its features end-to-end, from database to user interface
  • 7. MONOLITHIC FRONTENDSDatabase Human Capital Management Team BackendFrontend Monolith Database Backend / DevOpsTeam BackendFrontend Front & Back Frontend Team DatabaseBackendFrontend Microservices Frontend Team PayrollService TalentService PerformanceService AnalyticsService Aggregation Layer
  • 8. MICRO FRONTENDSDatabase Team Payroll BackendFrontend Payroll Data Entry Widget Database TeamTalent BackendFrontend Talent Score Widget Database Team Performance BackendFrontend Performance Search Widget
  • 9. MICRO FRONTENDS • Technology Agnostic • Each team should be able to choose and upgrade their stack without having to coordinate with other teams • Team Code Isolation • Don't share a runtime, even if all teams use the same framework. Build independent apps that are self contained. Don't rely on shared state or global variables
  • 10. MICRO FRONTENDS - WEB COMPONENTS SOLUTION UI Shell Micro Frontend Web Component I Micro Frontend Web Component II Micro Frontend Web Component III
  • 11. MICRO FRONTENDS WEB COMPONENTS SOLUTION • Solution relies on Remote Module Loading in RequireJS • This allows to integrate Web Components hosted separately into single UI Shell • Remote Loading ensures independent behaviour, without runtime dependencies between components. If one component fails - system continues to work
  • 12. WEB COMPONENTS IN ORACLE JET • Oracle JET Composite Component - JET implementation of the HTML5 Web Component Specification • Can be loaded remotely • Runs independently from other components in the same UI Shell - doesn't block application, if component fails
  • 14. DatabaseBackendFrontend Oracle ADF Employees Web Component Widget Micro Frontend I DatabaseBackendFrontend Jobs Web Component Widget Micro Frontend II UIShell Event Method Oracle JET Oracle JET Oracle JET
  • 15. HTML HTML Scripts Scripts Web Component 1 Web Component II JET Module UI Shell
  • 18.
  • 19.
  • 20.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 28. CONTACTS • Andrejus Baranovskis • Email: abaranovskis@redsamuraiconsulting.com • Twitter: @andrejusb • LinkedIn: https://www.linkedin.com/in/andrejus-baranovskis-251b392 • Web: http://redsamuraiconsulting.com
  • 29. REFERENCES • Source Code - https://github.com/abaranovskis-redsamurai/warsaw • Micro Frontends - https://micro-frontends.org/ • Oracle JET Composite Components - https://bit.ly/2jrMh5m • Oracle JET Remote Module Loading - https://bit.ly/2JRMVEh