Dynamic Web Client (DWC) Overview
The Dynamic Web Client (DWC), introduced in BBj 21.00, is the latest evolution of web app deployment from BASIS, providing the core benefits of BUI with even more enhancements. As a browser-based client built with web components, the DWC empowers developers to use modern web technologies to deploy their applications with improved speed and responsiveness, dynamic layouts, and the latest styling capabilities. For a broad overview of the benefits of the DWC and the motivation behind creating a new client, see the BASIS Advantage Article, What Makes a Web Client Dynamic, Anyway?
To get started with DWC App Deployment, see Registering and Launching a DWC App.
Benefits of Web Deployment
One of the primary benefits of web deployment is the absence of JVM prerequisites for end users, which simplifies deployment and accessibility. This means that your users don't have to install Java or BBj, and can simply open a web browser and navigate to the published app's URL.
DWC vs BUI
BUI (Browser User Interface), introduced in BBj 10.00, serves as a web-based deployment option specifically designed for BBj or VPRO/5 GUI applications. BUI offers a solution for deploying a legacy GUI app as a web app with minimal effort, often not requiring any code changes. It leverages the Google Web Toolkit (GWT) to function as a native HTML, JavaScript, and CSS application, running directly within web browsers. However, because BUI is dedicated to supporting legacy GUI app conversion, it is limited in its ability to create fully modern web applications.
The DWC, introduced in BBj 21.00, offers an alternative web-based deployment option with a more modern user experience and substantial improvements over BUI. It offers a better solution for creating dedicated web apps by eliminating the need to be compatible with GUI.
The DWC boasts faster load times, fewer round trips to the server, responsive and adaptive layouts, modern CSS customization, and integration with third-party web components through BBjWebComponent.
It achieves faster load times and improved performance by eliminating the reliance on GWT and sending JavaScript as needed rather than in bulk. Additionally, it reduces the need for server round trips to handle style and layout changes by using CSS layout technology on the client side. This allows applications to adapt to the user’s viewport size seamlessly.
The DWC also offers substantial improvements in user interface design. Because it is not constrained by the requirement to look identical to GUI apps, the default look and feel of DWC apps is much more modern, with larger text, adaptable layouts, and easy theming.
In addition to better default styles, the DWC offers full CSS support, so if you want to create custom styling, your DWC app can look almost any way you like. This CSS support includes advanced features such as CSS custom properties and theming capabilities, allowing developers to define properties like colors, typography, and spacing in a single place and apply them throughout the application.
Demos: DWC In Action
BASIS created the DWC TaskApp to showcase the capabilities of the DWC. You can see the published app here: https://us.bbx.kitchen/webapp/TaskApp
The TaskApp is a basic task-management app, with the ability to add, edit, and complete to-do items. This app demonstrates the great degree of flexibility that the DWC offers in both appearance and behavior. The following GIFs demonstrate some of its key features. For instance, it supports light mode and dark mode theme switching, which is built in to the DWC:
Light Mode and Dark Mode in the TaskApp
It also demonstrates the use of CSS Flex layouts, which can be used to create responsive layout designs:
Dynamic Layouts in the TaskApp
The app includes a third-party web component to switch between List View and Card View, which toggles a single CSS class to activate dramatically different styling. This serves as an example of how CSS can be used to completely change the appearance of BBj controls. For instance, in the List View, a BBjCheckbox is styled as a circle, while in the Card View, the same checkbox is styled to look like a button that says "Mark as Complete."
List View and Card View in the TaskApp
If you open the task editing window by creating a new task or clicking on an existing task, you can see many of the default styles and control appearances in the DWC, including text fields, dropdown lists, date pickers, and buttons.
DWC Default Styles in the TaskApp
By supplying good default styles and powerful customization, the DWC empowers any BBj developer to create modern web apps.
The DWC TaskApp demonstrates the power of the DWC with responsive layouts, CSS customization, theming support, third-party web components, icon pools, external font libraries, and more.
See Also
Registering and Launching a DWC App
DWC FAQ: Frequently Asked Questions about the Dynamic Web Client