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

5.
GENTLE INTRODUCTIONTO
MICRO FRONTENDS

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

13.
TECHNICAL ARCHITECTURE

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

16.
WebComponentI
WebComponentII
UIShell

17.
SOLUTION WALKTHROUGH

18.
IMPLEMENTATION POINTS

19.
QUESTIONS

20.
CONTACTS
• Andrejus Baranovskis
• Email: abaranovskis@redsamuraiconsulting.com
• Twitter: @andrejusb
• LinkedIn: https://www.linkedin.com/in/andrejus-baranovskis-251b392
• Web: http://redsamuraiconsulting.com

21.
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