Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Development (Oracle OpenWorld 2018, San Francisco)

Oracle JavaScript
Extension Toolkit
Web Components
Bring Agility to
App Development
Oracle JET Web Components Bring Agility to App Development 1
Lucas Jellema, CTO of AMIS
Oracle OpenWorld 2018, San Francisco, USA

Lucas Jellema
Architect / Developer
1994 started in IT at Oracle
2002 joined AMIS
Currently CTO & Solution Architect
Developed applications with Forms, Mod PL/SQL (Database), ADF, JET, …

I suffer from JET lag…
(my demos are on JET 5.2, not yet 6.0)

Demo - preparation
• Create fresh new JET application
• Copy in a Node application skeleton for runtime serving

Introducing JET WebComponents

Beauty of Composite Components

Introducing JET Web Component Architecture (JWCA):
“A JET Web Component is a reusable piece
of UI that can be embedded as a custom
HTML element and can be composed of
other JET Web Components, JET
components, HTML, JavaScript, and CSS.”

JET Web Component
• A reusable building block – encapsulated with a well defined interface
• Created using HTML, CSS, JavaScript, JET resources, other JET Web components
• Packaged in a Zip file that can be shared with any application and any team
• Easily ‘injected’ into a JET application
• copy contents of zip-file to specific directory
• And easily used in a page
• Add tag to View
• Load module in ViewModel
JET WC
InputSmiley
My JET Application Your JET Application
JET WC
InputSmiley
JET WC
InputSmiley
Page A Page B
<input-
smiley>
<input-smiley>
<input-smiley>
<input-smiley>
Page 1 Page 2
<input-
smiley>
<input-smiley>
<input-smiley>

Introducing the
JET
WebComponent
Manager
Managing dependencies on
JET Web Components at
design | build | deploy | run |
request time
Oracle JET Web Components Bring Agility to App Development21

Referencing JET Web Components
Design/Install time Build time Deployment time Run time Request time
jet-composites.json
Name
Version (min/max)
Git tag/commit/branch
URL (zip, Git Repo, Live JET app)
Phase (design, build, deploy, run, request
jwcm
(JET WebComponent
Manager CLI)
Use jwcm install to
fetch composite
components and
save in application
Before/ at the start of
ojet build, use jwcm
to add in Composite
Components
After launching node,
fetch composite
components and write
to local file system
before starting to serve
JET application
Manual, scheduled or
WebHook trigger (e.g. from
Git) to (re-)fetch the source of
the composite component
and write to local file system
Any request for artefacts of
the JET Web Component is
redirected – the artefact is
fetched live from a specified
location
(possibly with caching)
Meta data file describing JET Web
Components used in a JET application
and to be managed by jwcm. Located
in src/js/jet-composites
Command Line Interface that is
run for a specific phase (install,
build, deploy, run, request)
reads jet-composites.json and
fetches JET-Composites as
required – storing them in
/src/js/jet-composites/<name of
component>
Locations from where JET
Composites can be retrieved:
- Git (incl GitHub and BitBucket)
- the JET Web Components
showroom
- Live JET Application
- A zip-file at a URL

Demo of Referencing JET Web Components
jwcm
(JET WebComponent
Manager CLI)
jet-composites.json
name: Comp1
version : >= 1.2
commit: <git commit>
url : <github repo url>
phase : design
name: Comp2
version : 1.0
url : <showroom>
phase : deploy
name: Comp3
branch: master
url : <github repo url>
phase : runtime
name: Comp4
url : <live app url>
phase : request

From developer’s commit & push to
updated live application
Oracle JET Web Components Bring Agility to App Development
38
jwcm
JET sources
API
<public>, /update, /github/push
1
2
3
4

JWCM and Docker Container for JET with live reload
https://github.com/lucasjellema/docker-oracle-jet-run-live-reload

JET WebComponents
and Microservices Architecture
- decoupled development, composing at
build, deploy or even runtime

Microservices style
• Agile DevOps: flexible, fast, low effort, low risk, quick roll out
• Breaking product into small (not too complex) pieces – each owned by a DevOps Team
• Stand-alone, independent, encapsulated
• Well defined interfaces for controlled interactions –
preferably asynchronous (event based)
• What about the User Interface?
• When put before end-users:
all UIs should be fused into one UX
• How/when? Develop as one?
• Merge at design | build | deploy | run time?

Microservices Architecture - User Interface
• Is UI part of Microservice?
VS.

User Interface in a Microservices architecture
µ Customers µ Orders µ Products µ Loyalty µ Financeµ Logistics
Web Shop Portal
µ
Customers
µ Orders µ Products µ Loyalty µ Finance

Web Shop Portal Solution Design –
decoupled IFRAME based microservice front-ends
Web Shop – Customer User Interface
µ Customers
• Menu & Nav
• Marketing content
IFRAME
• Client Side (JS) Event Bus & Routing
• Context (user settings, navigation history, ..)
CustomerSignIn,
ChangedProfileSettings
IFRAME
µ Orders
IFRAME IFRAME
µ Loyalty
µ Billing &
Invoicing
IFRAME
µ Products
AddToBasket
API Gateway
ViewProduct
InspectInvoice

Web Shop Portal Solution Design –
decoupled JET Web Components – much smoother UX!
µ Customers
• Menu & Nav
Module
• JET Web
Component
CustomerSignIn,
JET Web
Component
Module
µ Orders
JET Web
Component
Module
JET Web
Component
Module
µ Loyalty
µ Billing &
Invoicing
ViewProduct
InspectInvoice
IFRAME
µ Products
AddToBasket
API Gateway

WebShop Portal Solution Design –
loading microservice frontends into a mash-up User Interface
• Menu & Nav
Module
• JET Web
Component
CustomerSignIn,
JET Web
Component
Module
JET Web
Component
Module
JET Web
Component
Module
Load JET Web Components
build
deploy
runtime
Deploy&
Liverefresh
IFRAME

http://andrejusb.blogspot.com/2018/05/microservice-approach-for-web.html

Creating a JET WebComponent

Constitution of a JET Web Component
JET
Web Component UI (HTML + CSS)
Events, Property
Updates, Function calls

JET
Events, Property
view.html
styles.css
viewModel.js
loader.js
component.json
Other
Resources

JET
Events, Property
view.html
styles.css
viewModel.js
loader.js
component.json
Other
Resources
Property values (can be
Observables and callback
functions), Function Calls

Creation of a component
• Identify scope of the component
• Create a regular JET application (ojet)
• Generate a composite component (ojet)
• Identify and separate two areas
• Test bed, sandbox – used for development & test
• Composite Component
• Iteratively
• Configure & Describe
• Develop
• Test
• Publish ( => Consume – many times)
Web
Component
View
View
Model
Sandbox JET Application

Develop Input Country Component
• Scope: display and select country on a map
• Zoom, pan, ..
• To be used instead of these horrible dropdown lists
• Later: possibly extend with
• multiple countries
• Regions, cities

Input Country
• Create a regular JET application input-country-testbed
• Generate Composite Component input-country
• Identify and separate two areas
• Test bed– used for development & test
• Composite Component
• Iteratively
• Configure & Describe
• Develop
• Test
• Publish
input-country
Web
ComponentView
View
Model
input-country-testbed
publish

Generate Sandbox JET application and
the skeleton JET Web Component

Prepare test bed
• Create directory src/js/views
• And file workarea.html
• Including the <input-country> tag
• Create directory src/js/viewModels
• And file workarea.js
• With references to composite
component input-country
• Include reference to module workarea
in index.html
• Include reference to ojModule in main.js
• Run testbed application with ojet serve

Prepare test bed
• Workarea.html
• Including the <input-country> tag
• Workarea.js
• With references to web
component input-country

Prepare test bed
• Include reference
to module workarea
in index.html
• Include reference to ojModule
in main.js
• Run testbed
application
with ojet serve

Define a property for the component and make it display
something
• Define property countryName in component.json
• Use value of property in output rendered by the component

Set property in test bed application
•
•
•

Show world map with country highlighting & selection

Introducing OpenLayers (open source, HTML5, JavaScript)

OpenLayers - Summary
• Initial release: 2006
• Most recent release: 5.2.0, August 2018
• Since 2007 under Open Source
GeoSpatial Foundation (OSGeo)
• Originally based on Prototype JavaScript Framework; still fully (client side)
JavaScript
• Support for GeoRSS, KML (Keyhole Markup Language), Geography
Markup Language (GML), GeoJSON and map data from any source
using OGC-standards as Web Map Service (WMS) or Web Feature
Service (WFS).
• Map sources include Bing, Open Street Map, MapBox, Stamen, ArcGis
(Esri)

Hello World Map

Add OpenLayers to JET Web Component
• Copy OpenLayers libraries into
jet-composites/input-country/libs
• Include OpenLayers resource in loader.js

Add OpenLayers to JET Web Component (2)
• Reference module input-country/ol in viewModel.js in order to leverage the
OpenLayers JavaScript objects

Show OpenLayers map in Web Component

Output from a Component
• (be inspected from the consuming application)
• (publish event explicitly on client side event bus)
JET
Web Component
UI (HTML + CSS)
Events, Property
Property values (can be
Observables and callback
functions), Function Calls
Set Observable,
Callback function

Define component
output in component.json
Writable
property
Callback
function
Event

Publish output from input-country component
Set writable
property
Invoke
Callback
function
Publish
Event

Leverage output in consuming application
Observable,
writable
property
Callback
function
Event
Handler

Handling Component Output in Consuming Application
Observable,
writable
property
Callback
function
Event
Handler

Publishing a JET Web Component

Publishing of JET Web Component
• Ensure properly documented
• Comments in …
• Additional instructions/documentation
• Setup govenernance
• Ownership, support, change process (breaking & backwards compatible)
• It is like releasing a product!
• Zip it up and distribute it
• Commit to Git repo
• Possibly public repository [in GitHub]
• Add to JET Web Component Exchange

Let’s Share!

JET Web Components and Visual Builder Cloud

JET Web Components and Visual Builder Cloud
• Visual Builder Cloud is semi-low code development & runtime environment
• Aka browser based JET IDE in the cloud
• Visual Builder supports visual & declarative development
• As well as high coding
• Visual Builder provides all JET assets out of the box
• Ready for drag & drop, property palette style configuration – and
straightforward coding with copy/paste, code completion, …
• JET Web Components can be imported into Visual Builder Cloud
• Custom JET Web Components can be made available for “visual builders”
• These custom components are treated like regular JET components by
IDE – visual editor, property palette, coding editor etc.

Summary
• JET Web Components are good:
• Reuse
• Productivity
• Best practices
• Clean design, well organized development
• The spirit of microservices – or even the actual microservice front end
• JET Web Components are straightforward
• Create them like small, structured, well documented JET applications
• Use them by copying a zip, configuring some properties and embedding in a view
• JET Web Components can be used in Oracle Visual Builder Cloud
• I envision (or at least hope for) a world with many shared community JET Web
Components
• Perhaps Using the JET Web Components Manager (jwcm) to manage components
at design & run time

Some resources
• Article: https://developer.oracle.com/javascript/reusable-jet-composite
• GitHub Resources:
• https://github.com/lucasjellema/jet-composite-component-showroom
• https://github.com/lucasjellema/input-country-composite-component
• https://github.com/lucasjellema/oracle-jet-web-component-manager

Thank you
Dank je wel
• Blog: technology.amis.nl
• Email: lucas.jellema@amis.nl
• : @lucasjellema
• : lucas-jellema
• : www.amis.nl, info@amis.nl
https://github.com/lucasjellema/jet-composite-component-showroom
https://github.com/lucasjellema/input-country-composite-component

Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Development (Oracle OpenWorld 2018, San Francisco)

Recommended

More Related Content

What's hot (20)

Similar to Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Development (Oracle OpenWorld 2018, San Francisco) (20)

More from Lucas Jellema (20)

Recently uploaded (20)

Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Development (Oracle OpenWorld 2018, San Francisco)

Editor's Notes