Oracle JET is Oracle's JavaScript UI framework that has evolved over time from data binding to web components. It is now built on Preact, a lightweight React alternative. React is now the dominant JavaScript framework, recommended by Oracle for new projects. A migration layer approach allows teams to start building new features in React while migrating existing applications, providing a path forward between technologies.

1. Oracle JET &
React Frontends
J AVA S C R I P T M I G R AT I O N S F O R T H E F U T U R E
D A N C U R T I S – U K O U G 2 0 2 3

2. Introduction
👋 Hi! I’m Dan Curtis
👉 UI Dev Manager at Griffiths Waite in Birmingham
📅 10 Years Enterprise Experience
👨💻 Worked with ADF, Sites, Portal, JET, React
📖 Author of ‘Practical Oracle JET’
daniel.curtis@griffiths-waite.co.uk
@danneh150

3. • Founded in 1994
• Over quarter of a century of award-winning innovation
• Situated in the heart of Birmingham, right next to New Street Station
• Enterprise JavaScript Specialists – TypeScript across the stack
• Experts in Oracle Forms, Oracle SOA, Oracle DB, ADF, WebCenter and Oracle JET
• Digital transformations and legacy migrations
Who are GW?

4. What is JET?

5. Oracle JET
Released
Oracle JET 4.0 Released
big changes from data-
bind to Web Components
JET v9 Released Redwood
support, initializing moving
from SASS to CSS Vars
JET v10 Released
IE11 de-support, Alta
theme deprecated
JET v11 Released VDOM &
Vcomponents using Preact –
no migration path
JET v12 Released
End-to-end
webpack support
2017
June 2020
Jan 2021
Oct 2022
2015
Early 2019
Practical Oracle JET Released
July 2021
GW Adopted
JET (v3)
2016
Mid 2019
Started work on Integration
layer of React into JET
Oracle CEC
Recommending React
for CEC Front End
Oct 2018
Oracle JET 6 Released
TypeScript and Webpack support
2019
2019 - 2020
JET 7 & 8 Released
Feb 2022
JET v13 Released
JET v14/15 Released
‘Core pack’ Preact
components released
2023

6. Oracle JET Released
Oracle JET 4.0 Released
Big changes from data-bind to Web Components
2017
2015 Early 2019
Practical Oracle JET Released
GW Adopted JET (v3)
2016 Oct 2018
Oracle JET 6 Released
TypeScript and Webpack support

7. Started work on Integration
layer of React into JET
JET 7 & 8 Released
2019 - 2020
Mid 2019
Oracle CEC Recommending
React for CEC Front End
2019
June 2020
JET v9 Released
Redwood support, initializing moving
from SASS to CSS Vars

8. JET v11 Released
VDOM & Vcomponents using Preact
(no migration path)
July 2021
JET v10 Released
IE11 de-support, Alta theme deprecated
Jan 2021
Feb 2022
JET v12 Released
End to end webpack support
JET v13 Released
Oct 2022
2023
JET v14/15 Released
‘Core pack’ Preact components released

9. React
W H AT I S R E A C T ?
• One way prop directional flow
• JSX / TSX
• Component based at its core
• Context API
• Server Components
• Opensource

10. Preact
W H AT I S P R E A C T ?
• 3kb React alternative – more performant
• Removes synthetic events, to use native events
• Similar API as React
• Will never have feature parity with React – patches React
• Won’t always have seamless compatibility with React components
• Smaller community compared to React (300 vs 1600)
• Less downloads than react (~3m compared to 22million)

11. 0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
50%
Node.js React.js jQuery Express Angular Next.js Vue.js ASP.NET
Core
ASP.NET
Stack Overflow Library Trends
2022 2023

12. Built for everyone
• React is stable
• Leader for 5 years and likely around 5 years more
• RSC and upcoming React 19 will continue to evolve React
• How can you get onto React?
• It is all JavaScript at runtime, by using build tools such as webpack we can compile down to pure JavaScript
Migration mindset

14. Trains
Ticket Barriers
Concourse
Shops

15. Microfrontends and
Migration Layers

16. What are Microfrontends?
"An architectural style where independently deliverable frontend applications are composed into a greater whole"
https://martinfowler.com/articles/micro-frontends.html

17. Issues with Microfrontends
• Increase in complexity both technically and operationally
• State sharing is tricky
• Time to value is high
• UX / UI Discrepancies
• Cross cutting concerns become tricky
• Can promote inconsistency in technical choices between teams and projects

20. Migration Layer
• Migration Layer is a lightweight build time layer, rather than runtime
• Get started from day 1 – drop in and start building
• TypeScript helps with compiling down to pure JS, little config required
• Can still get separation of concerns with good structuring
• Easier to share common code
• Useful if your host doesn’t support Module Federation

26. Where we are

27. Same approach with Preact, Solid, Vue

28. We are also exploring Angular

30. Built for everyone
• JET is in a better place with webpack & Preact support, but still lacking
• Web components as a concept still haven’t taken off
• JET has a rich component set, would be good to see that open sourced
• React is currently the lead and likely to continue that way, we will continue to
recommend using React
• Exciting future for React with v19, RSC and Next.js
• Migration Layer provides day 1 development in migrating to React
Summary

31. Dan Curtis
daniel.curtis@griffiths-waite.co.uk
@danneh150
www.wearegw.com