This document discusses micro front ends for microservices. It defines micro front ends as autonomous user experiences that are independently developed, tested, and deployed. The document outlines principles of domain-driven design and modularization for developing micro front ends. It also discusses tools and techniques for developing, testing, deploying, and managing micro front ends, including a component server, API gateway, and continuous integration/delivery pipelines.

2. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
DEV - 4702
Micro Front Ends for Micro Services
Vijay Nair – Director of Platform Engineering (Oracle Corporate Banking Solutions)

3. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Safe Harbor Statement
The following is intended to outline our general product direction. It is intended for
information purposes only, and may not be incorporated into any contract. It is not a
commitment to deliver any material, code, or functionality, and should not be relied upon
in making purchasing decisions. The development, release, and timing of any features or
functionality described for Oracle’s products remains at the sole discretion of Oracle.
3

4. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
About Myself
• Working with Oracle for 17 years focused on Banking Solutions !
• Seen most iterations of UI Frameworks within Oracle (Forms / ADF / JET)
• Currently Director of Platform Engineering (Oracle Corporate Banking
Solutions)
• Twitter Handle -> @FusionVJ, Github Handle -> oravj
4

5. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Agenda
• Micro Front Ends – An overview
• Design Thinking – An approach to modeling Micro Front End(s)
• Development – Tools / Techniques and Design Patterns
• Testing – Tools
• Deployment – Tools
5

6. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | 6
Micro Front End(s) – 3 Main Principles
Micro Front Ends
Independently
Developed
Independently
Tested
Independently
Deployed
Micro Front Ends are autonomous user experiences that provide a solution that is unique & distinct within the eco-system
• Independently Developed: Build the Micro Front End to handle the request independently
• Independently Tested: Test the Micro Front End including its dependencies independently
• Independently Deployed: Microservices are based on distinct features with zero overlap with
other functions
Single Responsibility Principle : Each micro front end is responsible for a
specific feature or a functionality or aggregation of cohesive functionality

7. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | 7
Domain Driven Design -> The center piece of our design thinking and fundamental to a sustainable micro service/front end architecture
Problem Space Identification i.e.
Domain Identification
OBTFPM
OBCLPM
OBLM
Teams split by Domain Responsibility
led by the Domain Owner
Domain Exploration
workshops
Workshop outcomes
Identification of autonomous capabilities within the complex domain
i.e.
Identification of the sub-domains/bounded contexts
i.e.
Identification of the microservices/microfrontends
Design Canvas per Micro Front End
Qualities Data
Dependencies Validations
The Micro Front End Design Canvas is a simple tool that captures
just enough design thinking in order to help deal with the
complexity of a front end within a distributed systems
architecture
Interface
Identify Micro Services
Capture Information
Micro Front Ends - Design Thinking
Identify Micro Front Ends
Security

8. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Micro Front Ends – Simplified Architecture
8
Application Shell
Virtual Page
Top Navigational WC User Info WC
Info WC
NavigationalWC
Train WC
Wizard WC
WC A
WC B
WC C
Switcher WC
Application Shell Layer
Handling Overall Application Logic and
provision of canvas to render individual pages
Virtual Page Layer
Virtual Pages compose and render
individual Web Components –
The actual micro front end
Custom WC’s JET WC’s
Custom Modules
JET Libraries

9. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Micro Front Ends – Developer Tooling
9
Shared Kernel Team
Domain Teams
Application Shell(s)
Common WC’s
Virtual Pages
Domain Specific WC’s
App Shell Builder
WC Builder
VP Builder
oj-cli
extension
oj-cli
extension

10. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Micro Front Ends – Developer Tooling
10
Source Code
Templates
Unit Tests
Reports
Integration Tests

11. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Micro Front Ends – Testing
Component Level
Unit Testing using Jasmine
Functional Testing using Selenium/Cucumber
Virtual Page Level
Functional Testing using Selenium/Cucumber
Mock Server
Used by developers to mimic API responses
Provided as a Docker Image
Developers create Mock Scripts

12. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Micro Front Ends - Pipelines
16
Based upon the standard 3 phases -> Continuous Integration, Continuous Delivery and Continuous Deployment
Standard Jenkins pipeline -> Unit / Integration / Functional / Acceptance / Performance
RELEASE
MANAGEMENT
TESTING
QUALITY
SECURITY
LIFECYCLE
MANAGEMENT
SCM BUILD CI REPO MGMT DEPLOY
COMPONENT
SERVER
TESTSTAGEPROD
APPLICATION
RUNTIME

13. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Micro Front Ends – Component Server
Component Server
Centralized service/registry for all web components
Reduces the cost of development and
maintenance
Increases the reliability of the system
Extreme reusability as it treats a component as an
object
Helps to maintain principle of independent
deployment

14. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |
Micro Front Ends – API Gateway
14
• Registration - Microservices on deployment will auto-
register themselves with to make themselves available to
other microservice for consumption by the discovery
• Discovery – When any service (or external client) needs to
use a service it performs a call to the (API) Gateway as if it
were the service endpoint
• Routing – The (API) Gateway is the single entry point for all
clients. It uses the service registration information and
routes the request to the actual service endpoint
• Security – The API Gateway handles the security aspects
(Oauth + JWT) centrally including expiry / refresh / logging
Routing
Security
Logging
Discovery ServerRouter
Microservice DC Microservice DC Microservice DC
API Clients
*DC- Discovery Client

15. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | 15