To understand Visual Builder, you first need to distinguish it from Visual Builder Studio (VBS). Think of Visual Builder as the interactive workshop where you visually design and assemble your application. It’s a browser-based IDE focused on a drag-and-drop experience. Visual Builder Studio is the entire factory surrounding that workshop. VBS provides the complete DevOps lifecycle, including Git repositories for version control, agile project management boards, and CI/CD pipelines for automating builds and deployments. You work inside Visual Builder, but you manage the entire project and team collaboration through VBS.

At the core of every Visual Builder application is Oracle JET, or JavaScript Extension Toolkit. JET is a collection of open source JavaScript libraries and Oracle-contributed components that provide the building blocks for your user interface. When you drag a button, a chart, or a form onto your canvas in the design-time environment, you are actually working with a pre-built JET component. When the application is deployed, the VB runtime environment renders these JET components in the end-user's browser, creating a responsive and modern web or mobile experience. This component-based architecture is what makes rapid development possible.

Every project you create in Visual Builder is contained within a 'Visual Application'. This container holds all the resources for your app, including metadata, source files, and configurations. Within a Visual Application, you can create one or more modules, which are typically either Web Apps or Mobile Apps.

• Web Apps are designed for desktop and tablet browsers. They are built as single-page applications (SPAs) that offer a fluid, dynamic user experience without constant page reloads.
• Mobile Apps are optimized for smaller screens and can be packaged as Progressive Web Apps (PWAs) or native-style apps for iOS and Android. They can also access device features like the camera or GPS.

Regardless of the type, every module shares a common structure, including a place for service connections, which manage communication with backend data sources via REST APIs.

A key decision is whether you are building a standalone 'Visual Application' or an 'App Extension'.

An 'App Extension' is specifically designed to modify or extend an existing Oracle SaaS product like Fusion Cloud ERP or HCM. For example, you might build an extension to add a custom dashboard for sales managers inside the ERP system. These extensions are context-aware; they can securely access the SaaS application's data and adopt its look and feel automatically. They live inside the host application.

A 'Visual Application', on the other hand, is a completely standalone application. It runs independently and can connect to any data source, whether it's an Oracle database, a third-party API, or your own custom backend services.

To promote reuse and maintain consistency, Visual Builder integrates a Component Exchange. This is a private marketplace for your organization where developers can publish and share reusable components. If a team builds a specific data grid or a custom button for one project, they can publish it to the exchange. Other developers can then easily find and drop that exact component into their own applications, saving time and ensuring a unified look and functionality.

This principle of consistency is further enforced by the Redwood design system.

Redwood is Oracle’s modern and responsive design system. It's more than just a style guide; it dictates the look, feel, and even the behavior of UI components. Visual Builder's default components are built using Redwood principles. This ensures that any application you create automatically aligns with the user experience of Oracle's own cloud applications, providing a seamless and professional feel for the end user right out of the box. This built-in guidance helps you create applications that are not only functional but also intuitive and visually appealing.

Let's check your understanding of these architectural concepts.

Understanding this architecture is the first step. Next, you will explore how to put these pieces into motion by connecting to data.