Virtual DOM architecture is a different way of building apps and web components from the Model-View-ViewModel (MVVM) architecture that Oracle JET has offered to date. Both architectures are supported. You choose the architecture that you want to use.

Virtual DOM architecture is a programming pattern where a virtual representation of the DOM is kept in memory and synchronized with the live DOM by a JavaScript library. As a pattern, it has gained popularity for its ability to efficiently update the browser’s DOM (the live DOM). Preact is the JavaScript library that Oracle JET uses to synchronize changes in the virtual DOM to the live DOM.

The following diagram illustrates how virtual DOM architecture apps use the virtual DOM to compute the difference when a state change occurs so that only one action, a re-render of the DOM node(s) affected, occurs in the live DOM.

React, as one of the JavaScript libraries, to popularize the use of the virtual DOM architecture provides extensive documentation that describes many of the main concepts. To learn more about these concepts, consider reading the React documentation. Preact is the JavaScript library that Oracle JET uses to manage the virtual DOM and update the live DOM of apps and Web Components that you develop using Oracle JET’s virtual DOM architecture. For more information, see https://preactjs.com/.

You can build web apps and you can also build web components that you publish for inclusion in other Oracle JET web apps.

To accomplish either of these tasks, you must first install the Oracle JET tooling, as described in Install Oracle JET Tooling. Once you have installed the Oracle JET Tooling, you create a virtual DOM app using the following command:

ojet create your-First-JET-VDOM-app --template=basic --vdom

Once Oracle JET tooling creates the virtual DOM app for you, you can start to develop the functionality of the app. To do this, you write TypeScript and JavaScript XML (JSX). Use of JavaScript is not supported by the virtual DOM architecture.

If you are using the virtual DOM app that you created as a location to develop VComponent-based web components that you later publish to a component exchange, you’ll be familiar with the steps if you previously developed Composite Component Architecture-based web components using the Oracle JET tooling. That is, you do the following:

1. Use the Oracle JET tooling to create the component by running the following command:

   ojet create component oj-hello-world --vcomponent

   Use of the --vcomponent parameter is optional, unless you want to create a class-based VComponent, in which case you specify the class option with the --vcomponent parameter:

   ojet create component oj-hello-world --vcomponent=class

   By default, Oracle JET tooling creates function-based VComponents.

2. If creating multiple components, use JET Pack. The following commands illustrate how you create a JET Pack, yourJETPack, and add three components to it (two function components and one class component).

   ojet create pack yourJETPack
   ojet create component oj-class-component-1 --pack=yourJETPack 
   ojet create component oj-function-component --vcomponent=function --pack=yourJETPack 
   ojet create component oj-class-component-2 --vcomponent=class --pack=yourJETPack 

We'll go into more detail for these tasks later in this guide. This brief introduction is for those of you who are already familiar with Oracle JET web app and web component development.

To develop virtual DOM apps and components, you need to understand the following topics:

• Preact: Understand how Preact and, by extension, React works. To get started, read the Main Concepts section of the React documentation. If you are familiar with React concepts, read the Differences to React section of the Preact documentation.
• TypeScript and JSX: You write all virtual DOM apps and web components using TypeScript and JSX. If you previously developed Oracle JET apps using the MVVM architecture, you need to know that the virtual DOM architecture uses JSX to implement binding and conditional behavior that the MVVM architecture implemented in the View (HTML) layer. To learn more about TypeScript, see https://www.typescriptlang.org/ and to learn more about JSX, see JSX In Depth in React’s documentation.

You can develop virtual DOM apps in any integrated development environment (IDE) that supports TypeScript, HTML, and CSS. However, an IDE is not required, and you can use any text editor to develop your app.

You can use an IDE in conjunction with the Oracle JET Tooling, where you create a virtual DOM app by using the provided app template. You proceed to develop the app in the IDE of your choice by opening the project that was created using the Oracle JET Tooling, in that IDE. After saving changes to your app files in the IDE, you use the Oracle JET Tooling to build and run the app, as demonstrated in the following example from Microsoft Visual Studio Code.