Oracle Code One Simplifying Oracle JET Development with Visual Tooling [DEV4797]  By Chris Maggiulli Software Architect, Enterprise Applications Latham Pool Products, Inc.

About Latham North America’s largest pool product manufacturer Around 500 million in sales annually IT department containing 30 technical employees, 14 developers Organization runs on about 1,000 servers with a portfolio of over 200 separate codebases (ERP, CRM, Middleware, eCommerce, Identity Management, etc)

Background Currently in year 3 of 5 year cloud transformation Traditionally we are a Java shop, running a variety of platforms (Hybris, Liferay, ColdFusion, etc) Purchased Oracle Integration Cloud (OIC) as a replacement for our current middleware solution and as a further foray into our cloud-first strategy. OIC was purchased primarily for it’s BPMN, DMN and Integration engine, not for visual builder However – we quickly realized the power of VBCS and Oracle Jet and have shipped and/or currently developing 4 separate mobile, web, and hybrid projects.

Consumer Warranty Consumer Warranty App Convenient Registration Available in both iOS App store and Google Play Users take picture of Their product barcode, we use AI service to read and store value

Project Structure Solving Problems Convention over configuration VBCS structured but flexible directory hierarchy allows for simplified development such as the ability to add a dependency simply by dropping it in a specific location. Principle of least astonishment Need to use your dependency on a particular flow page? Drop it on that page. Is it needed by the entire flow? Drop it on the flow. RequireJS add your dependency easily

WYSIWYG?? Like all visual tooling VBCS code contain a drag and drop canvas. However VBCS is definitely not WYSIWYG. Oracle’s VBCS is more aptly described as an online IDE for web and mobile development, and a convention over configuration for Oracle JET

Variables, types, events, actions, imports, filters, sorting, are all configurable from the GUI, but the underline structure is simply stored in JSON format. The entire application is defined a by this underline JSON in a similar manner to how Spring operates for Java.

Code v. Configuration Underneath your project your, your canvas elements have turned into traditional Oracle JET elements. The rightmost image shows the design canvas, the leftmost shows the under line elements generated. You can toggle back and forth between the two views, and changes in one view replicate in the other

Traditional Oracle JET code is written in the JavaScript panel, then becomes available to use in the design panel (such as, in the example below, adding validation on a text input in design, and as a result is also generated in the oracle jet tag element in code view).

Use Cases Currently we have implemented and/or are currently developing the following solutions using Visual Tooling for Oracle JET (VBCS) A consumer warranty registration application An application to track inventory as it moves throughout our facilities (deployed on a COSU Android barcode scanner for internal use) As a front end for our companies Claims processes Credit processes Warranty and non Warranty processes Requisition Payroll Change

Time to market Visual Tooling with Oracle JET through VBCS has decreased our “time to market” (aka production) by 50% as compared to a similar solution written purely in Java