Confidential – Oracle Internal/Restricted/Highly Restricted

Visual JavaScript Development: How We Do It [PRO4554] Brian Fry – Oracle John Ceccarelli – Oracle October 23, 2018 Confidential – Oracle Internal/Restricted/Highly Restricted

Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, timing, and pricing of any features or functionality described for Oracle’s products may change and remains at the sole discretion of Oracle Corporation. Confidential – Oracle Internal/Restricted/Highly Restricted

Program Agenda 1 JavaScript – Here for the Long Haul Introduction to Oracle JavaScript Extension Toolkit Productivity Boost! Oracle Visual Builder Cloud Service Demonstration Wrap Up 2 3 4 5

What Are Developers Doing Today? https://insights.stackoverflow.com/survey/2018#developer-roles Confidential – Oracle Internal

Full Stack Development – A To Do List Create Backend business objects (choose your weapon) Expose REST Services Create HTML UI Define variables Bind variables to UI Fetch REST, process it, put into variables Add client side business logic Confidential – Oracle Internal/Restricted/Highly Restricted

Creating Data REST Services Full CRUD Security Pagination Query Sorting Confidential – Oracle Internal/Restricted/Highly Restricted

Creating UI Responsive UI Data Visualization Internationalization Accessibility Validations and Dynamic UI Confidential – Oracle Internal/Restricted/Highly Restricted

Oracle Java Extension Toolkit (JET) Oracle JET is targeted at JavaScript developers working on client-side applications. It's a collection of open source JavaScript libraries along with a set of Oracle contributed JavaScript libraries that make it as simple and efficient as possible to build web and mobile applications that consume and interact with Oracle products and services, specifically Oracle Cloud Services.

jQuery is provided for those that want to use it, but it’s definitely not required. All UI components are wrapped as jQueryUI widgets. This allows a developer to reach out to the larger jQueryUI component repositories out there and use other components that they may not find in JET itself if they like. Knockout is used for two-way data binding. RequireJS is used for lazy loading of resources and the management of AMD (asynchronous module definition) modules. JET is also designed for Mobile development, in which case we use Cordova for hybrid compilation.

User Interface Basic Basic UI components that anyone would expect to find. Confidential – Oracle Internal/Restricted/Highly Restricted

User Interface Advanced Advanced UI components that can get very complex. The Oracle BI Visual Analyzer product uses Oracle JET charts for their scientific data analysis. Confidential – Oracle Internal/Restricted/Highly Restricted

Oracle JET - Value Proposition Enterprise ready - built-in accessibility, security, internationalization Rich components set - including data visualization Advance routing - for single page applications Common model – for simplified data binding with web services Built-in responsive UI - at both the CSS and JS level Fully Open-Source - leverage existing skills and community knowledge Modular architecture – use what you need, lightweight and fast Optimized for Oracle customers – Supports Oracle Alta UI and Oracle REST What Oracle bring to the toolkit

Oracle JET Architecture Web Components View Oracle JET UI Components (Web Components) JQueryUI (deprecated) Hammer SASS CCA Oracle JET Routing RequireJS View-Model Abstracted Binding Model Oracle JET Common Model API XHR AJAX WebSocket Client Web Services Server

JET 6.0.0 GA – Oct 15th, 2018 Features & bug fixes delivered every two months since October 2014 JET 6.0.0 is our 23rd on-schedule release Oct 2014 Feb 2016 Aug 2016 Sept 2017 Apr 2018 Jun 2018 Aug 2018 Oct 2018 JET 1.0.0 v0.5 JET 2.0.0 JET 2.1.0 JET 4.0.0 JET 5.0.0 JET 5.1.0 JET 5.2.0 JET 6.0.0 Open Source release! Move to SemVer Major release Minor release – Bug fixes Web Comp. intro Next Major 1st internal release

What’s The Problem? Confidential – Oracle Internal

Developers Spectrum Confidential – Oracle Internal

Oracle Visual Builder Cloud Service Build and host web and mobile applications in a faster and simpler way with zero install and visual development experience Confidential – Oracle Internal

What Is VBCS? Oracle JET JavaScript Toolkit A rapid application development environment for that toolkit A deployment platform that hosts the apps you A database for custom business objects REST connections for connecting to remote data Integration with IDCS/SIM for security and SSO with Oracle Cloud Integration with the rest of the Oracle SaaS/PaaS platform for additional functionality CRM, HCM, Integration Cloud connectors, Process Cloud processes, Content Cloud documents, etc. Oracle Confidential – Internal

Flexibility Through Coding Directly access code Add your own logic Extendable platform UI Components JavaScript Libraries Styles Confidential – Oracle Internal

VBCS Quick Demo – The 5 Minutes App This is an event branded Section Header with Graphic slide ideal for including a picture with a brief title and optional subtitle. This slide can also be used as a Q and A slide. Do not customize this slide with your own background. Subtitle Confidential – Oracle Internal/Restricted/Highly Restricted

Breaking It Down Confidential – Oracle Internal

Typical Git Workflow vs VBCS DevCS Remote Repository DevCS Remote Repository Clone Push Pull Import Project (Clone) Push Pull Local Clone VBCS Project Add Remove Commit Changes Auto-saved (Commit) Local Working Directory

Confidential – Oracle Internal/Restricted/Highly Restricted

Collaborative Development via Git VBCS DevCS Live Website John Project Angelo Project Duncan Clone John and Angelo each have a separate VBCS project checked out from Git. Each project is a “local clone” that lives on VBCS server Can push and pull, switch branches, rebase from master, etc. Duncan is primarily working on custom components. He clones project, edits locally in Visual Code, and tests locally He pushes code back in and rest of team pulls to use his components

CI/CD VBCS DevCS Continuous Integration managed on DevCS Staging John Project Duncan Clone Angelo Project Continuous Integration managed on DevCS Run unit tests on DevCS builder Stage new version on VBCS Run Selenium tests against staged application

Summary Make JavaScript/HTML5/REST development simpler and more productive Provide best-of-class tooling for modern JavaScript UI Allow coders and low-code developers to work in harmony Reduce IT backlog and build solutions faster

http://cloud.oracle.com/visual-builder http://oraclejet.org Free Trial Tutorials Documentation Blogs Discussion Forum Demos

Learn More at Oracle Open World JET-Components Hands-On Lab [HOL5031] – Tue @2:45 VBCS Hands-On Lab [HOL6269] – Wed @12:45 VBCS-Mobile Hands-On Lab [HOL6879] – Wed @9:00, Thu @12:45 VBCS – Meet the Experts [MTE6771/MTE6750] – Tue @10:00/3:00 JET - Meet the Experts [MTE6742] – Wed @10:00 Rapid Mobile Development [PRO3985] – Wed @4:45 Custom Components In JavaScript [DEV4694] – Thu @10:00 Extending SaaS [PRO3981] – Thu @10:00 JET Offline Toolkit [DEV4295] – Thu @12:00 JET for Beginners [DEV4938] – Thu @1:00 Visit The Demo Booths at Moscone South open Daily until Wed @4:45 Usability Testing (sign up at oracle.com/openworld) Demo booth are at the same location for JET/ADF/MAF, DevCS, VBCS, Forms For more, see complete listing at: bit.ly/DevToolsOOW2018

Oracle OpenWorld 2018 Event Logos and Lockups Oracle OpenWorld Logo Date/Venue Lockup October 22-25, 2018 San Francisco Please note, the red backgrounds above are for staging purposes only and are not part of the actual logo assets. Confidential – Oracle Internal/Restricted/Highly Restricted

Program Agenda 1 First topic Second topic Third topic Fourth topic Fifth topic 2 3 4 5 Confidential – Oracle Internal/Restricted/Highly Restricted

Program Agenda with Highlight 1 First topic Second topic Third topic Fourth topic Fifth topic 2 3 4 5 Confidential – Oracle Internal/Restricted/Highly Restricted

Program Agenda with Highlight 1 First topic Second topic Third topic Fourth topic Fifth topic 2 3 4 5 Confidential – Oracle Internal/Restricted/Highly Restricted

Title and Content Layout Line 1 Title and Content Layout Line 2 First-level bulleted text is Calibri 28 pt Second-level text (press tab key) is 24 pt Third-level text (press tab key) is 20 pt Fourth-level text (press tab key) is 18 pt Calibri is the only font used in the template All bulleted text is sentence case (capitalize first letter of first word) Use bold, red, or both to highlight ONLY KEY text Confidential – Oracle Internal/Restricted/Highly Restricted

Title, Subtitle, and Content Layout Subtitle text is Calibri bold 24 pt First-level bulleted text is Calibri 28 pt Second-level text (press tab key) is 24 pt Third-level text (press tab key) is 20 pt Fourth-level text (press tab key) is 18 pt Calibri is the only font used in the template All bulleted text is sentence case (capitalize first letter of first word) Use bold, red, or both to highlight ONLY KEY text Confidential – Oracle Internal/Restricted/Highly Restricted

Title-Only Layout Confidential – Oracle Internal/Restricted/Highly Restricted

Title and Subtitle Layout Subtitle text is Calibri bold 24 pt Confidential – Oracle Internal/Restricted/Highly Restricted

Two Content Layout First-level bulleted text is Calibri 28 pt Second-level text (press tab key) is 24 pt Calibri is the only font used in the template All bulleted text is sentence case (capitalize first letter of first word) Use bold, red, or both to highlight ONLY KEY text First-level bulleted text is Calibri 28 pt Second-level text (press tab key) is 24 pt Calibri is the only font used in the template All bulleted text is sentence case (capitalize first letter of first word) Use bold, red, or both to highlight ONLY KEY text Confidential – Oracle Internal/Restricted/Highly Restricted

Three Content Layout First-level bulleted text is Calibri 24 pt Calibri is the only font used in the template All bulleted text is sentence case (capitalize first letter of first word) Use bold, red, or both to highlight ONLY KEY text First-level bulleted text is Calibri 24 pt Calibri is the only font used in the template All bulleted text is sentence case (capitalize first letter of first word) Use bold, red, or both to highlight ONLY KEY text First-level bulleted text is Calibri 24 pt Calibri is the only font used in the template All bulleted text is sentence case (capitalize first letter of first word) Use bold, red, or both to highlight ONLY KEY text Confidential – Oracle Internal/Restricted/Highly Restricted

Confidential – Oracle Internal/Restricted/Highly Restricted

Visual JavaScript Development: How We Do It [PRO4554] Brian Fry – Oracle John Ceccarelli – Oracle October 23, 2018 Confidential – Oracle Internal/Restricted/Highly Restricted

OpenWorld 2018 Branded Title Slide Subtitle This is a Title Slide with Picture and Logo slide ideal for including a partner or product logo with a brief title, subtitle and presenter information. To Replace the LOGO on this sample slide: Right-click the sample LOGO and choose Change Picture. Navigate to the location where the new logo is stored, select desired logo file and click on the Open button to replace the sample logo. The Presented with FPO logo placeholder box can be copy and paste to any of the Title Slides. Presenter’s Name Presenter’s Title Organization, Division or Business Unit Month 00, 2018 Presented with Note: The speaker notes for this slide include detailed instructions on how to customize this Title Slide with your own partner or product logo. Tip! Remember to remove this text box. Confidential – Oracle Internal/Restricted/Highly Restricted

OpenWorld 2018 Branded Title Slide Subtitle This is a Title Slide with Picture and Product, Service, or Industry Logo slide ideal for including a picture and product/service/industry or org logo with a brief title, subtitle and presenter information. To Replace the LOGOs on this sample slide: Right-click a sample LOGO and choose Change Picture. Navigate to the location where the new logo is stored, select desired logo file and click on the Open button to replace the sample logo. The Presented with FPO logo placeholder box can be copy and paste to any of the Title Slides. Presenter’s Name Presenter’s Title Organization, Division or Business Unit Month 00, 2018 Note: The speaker notes for this slide include detailed instructions on how to customize this Title Slide with your own partner or product logo. Tip! Remember to remove this text box. Confidential – Oracle Internal/Restricted/Highly Restricted

OpenWorld SF 2018 Event Logos and Lockups Oracle OpenWorld Logo Branded Programs Date/Venue Lockup Log in to Media Manager (https://omm.us.oracle.com) using your SSO and select the ASSETS tab from the main top navigation bar. From there you can use the faceted navigation provided under the filter to go to: Media Manager > Event Branding > Oracle OpenWorld. Or copy the URL below and paste into a browser that functions properly with Media Manager: https://omm.us.oracle.com:11443/otmm/ux-html/?p=collection%2Furl_selection%2F30586139 Please note, the background boxes are for staging purposes only and are not part of the actual assets. Access OpenWorld Logos and Lockups assets at: Media Manager > Event Branding > Oracle OpenWorld (Click on the link in Slide Show mode to go directly to the assets page. Complete URL is available in the speaker notes.) Confidential – Oracle Internal/Restricted/Highly Restricted

OpenWorld SF 2018 Event Photography Confidential – Oracle Internal/Restricted/Highly Restricted

+ Additional Resources Java Master Oracle Jiaguwen Oracle Master 16:9 How-To Guide Log in to Media Manager (https://omm.us.oracle.com) using your SSO and select the ASSETS tab from the main top navigation bar. From there you can use the faceted navigation provided under the filter to go to: Corporate Collateral > Presentation Or copy the following URL and paste into your browser: The entire suite of presentation masters and modules https://omm.us.oracle.com:11443/otmm/ux- html/index.html?p=searchResults%2Fpresentation%2520masters%2520and%2520modules%400x100xascxOTMM_SEARCH_ID_RELEVANCE%40Mw%253D%253D%40ZW5fVVM%253D%40Mg%253D%253D%40dW5kZWZpbmVk%40JTIyJT dCJTVDJTIyZmFjZXRzJTVDJTIyJTNBJTVCJTVEJTdEJTIy%40%2522%257B%257D%2522 Java Master 16:9 https://omm.us.oracle.com:11443/otmm/ux- html/index.html?p=searchResults/Java_Master@0x100xascxOTMM_SEARCH_ID_RELEVANCE@Mw%3D%3D@ZW5fVVM%3D@Mg%3D%3D@dW5kZWZpbmVk@JTIyJTdCJTVDJTIyZmFjZXRzJTVDJTIyJTNBJTVCJTdCJTVDJTIydHlwZSU1QyUy MiUzQSU1QyUyMmNvbS5hcnRlc2lhLnNlYXJjaC5mYWNldC5GYWNldFNpbXBsZUZpZWxkUmVzdHJpY3Rpb24lNUMlMjIlMkMlNUMlMjJmYWNldF9nZW5lcmF0aW9uX2JlaGF2aW9yJTVDJTIyJTNBJTVDJTIyRVhDTFVERSU1QyUyMiUyQyU1QyU yMmZpZWxkX2lkJTVDJTIyJTNBJTVDJTIyQ09MTEVDVElPTkNBVEVHT1JZJTVDJTIyJTJDJTVDJTIydmFsdWVfbGlzdCU1QyUyMiUzQSU1QiU1QyUyMk1hc3RlciU1QyUyMiU1RCU3RCUyQyU3QiU1QyUyMnR5cGUlNUMlMjIlM0ElNUMlMjJjb20uYXJ 0ZXNpYS5zZWFyY2guZmFjZXQuRmFjZXRTaW1wbGVGaWVsZFJlc3RyaWN0aW9uJTVDJTIyJTJDJTVDJTIyZmFjZXRfZ2VuZXJhdGlvbl9iZWhhdmlvciU1QyUyMiUzQSU1QyUyMkVYQ0xVREUlNUMlMjIlMkMlNUMlMjJmaWVsZF9pZCU1QyUyMiUz QSU1QyUyMlNVQkNBVEVHT1JZJTVDJTIyJTJDJTVDJTIydmFsdWVfbGlzdCU1QyUyMiUzQSU1QiU1QyUyMkphdmElNUMlMjIlNUQlN0QlNUQlN0QlMjI%3D@%22%7B%7D%22 Oracle Jiaguwen Master https://omm.us.oracle.com:11443/otmm/ux- html/index.html?p=searchResults/Oracle_Jiaguwen_Master@0x100xascxOTMM_SEARCH_ID_RELEVANCE@Mw%3D%3D@ZW5fVVM%3D@Mg%3D%3D@dW5kZWZpbmVk@JTIyJTdCJTVDJTIyZmFjZXRzJTVDJTIyJTNBJTVCJTdCJTVDJTIydHl wZSU1QyUyMiUzQSU1QyUyMmNvbS5hcnRlc2lhLnNlYXJjaC5mYWNldC5GYWNldFNpbXBsZUZpZWxkUmVzdHJpY3Rpb24lNUMlMjIlMkMlNUMlMjJmYWNldF9nZW5lcmF0aW9uX2JlaGF2aW9yJTVDJTIyJTNBJTVDJTIyRVhDTFVERSU1QyUyMi UyQyU1QyUyMmZpZWxkX2lkJTVDJTIyJTNBJTVDJTIyU1VCQ0FURUdPUlklNUMlMjIlMkMlNUMlMjJ2YWx1ZV9saXN0JTVDJTIyJTNBJTVCJTVDJTIySmlhZ3V3ZW4lNUMlMjIlNUQlN0QlMkMlN0IlNUMlMjJ0eXBlJTVDJTIyJTNBJTVDJTIyY29tLmFydG VzaWEuc2VhcmNoLmZhY2V0LkZhY2V0U2ltcGxlRmllbGRSZXN0cmljdGlvbiU1QyUyMiUyQyU1QyUyMmZhY2V0X2dlbmVyYXRpb25fYmVoYXZpb3IlNUMlMjIlM0ElNUMlMjJFWENMVURFJTVDJTIyJTJDJTVDJTIyZmllbGRfaWQlNUMlMjIlM0ElNU MlMjJDT0xMRUNUSU9OQ0FURUdPUlklNUMlMjIlMkMlNUMlMjJ2YWx1ZV9saXN0JTVDJTIyJTNBJTVCJTVDJTIyTWFzdGVyJTVDJTIyJTVEJTdEJTVEJTdEJTIy@%22%7B%7D%22 Oracle Master 16:9 https://omm.us.oracle.com:11443/otmm/ux- html/index.html?p=searchResults/Oracle_Master_16x9@0x100xascxOTMM_SEARCH_ID_RELEVANCE@Mw%3D%3D@ZW5fVVM%3D@Mg%3D%3D@dW5kZWZpbmVk@JTIyJTdCJTVDJTIyZmFjZXRzJTVDJTIyJTNBJTVCJTVEJTdEJTIy@%22% 7B%7D%22 Oracle Master 4:3 https://omm.us.oracle.com:11443/otmm/ux- html/index.html?p=searchResults/Oracle_Master_4x3@0x50xdescxARTESIA.FIELD.DATE%20IMPORTED@Mw%3D%3D@ZW5fVVM%3D@Mg%3D%3D@dW5kZWZpbmVk@JTIyJTdCJTVDJTIyZmFjZXRzJTVDJTIyJTNBJTVCJTVEJTdEJTIy@%22 %7B%7D%22 How-To Guide https://omm.us.oracle.com:11443/otmm/ux- html/index.html?p=searchResults/Presentation_HowToGuide@0x50xdescxARTESIA.FIELD.ASSET%20NAME@Mw%3D%3D@ZW5fVVM%3D@Mg%3D%3D@dW5kZWZpbmVk@JTIyJTdCJTVDJTIyZmFjZXRzJTVDJTIyJTNBJTVCJTVEJTdEJTIy@ %22%7B%7D%22 Modules https://omm.us.oracle.com:11443/otmm/ux- html/index.html?p=searchResults/Master%20Templates%20and%20Modules@0x50xdescxARTESIA.FIELD.ASSET%20NAME@Mw%3D%3D@ZW5fVVM%3D@Mg%3D%3D@dW5kZWZpbmVk@JTIyJTdCJTVDJTIyZmFjZXRzJTVDJTIyJTNBJTVC JTdCJTVDJTIydHlwZSU1QyUyMiUzQSU1QyUyMmNvbS5hcnRlc2lhLnNlYXJjaC5mYWNldC5GYWNldFNpbXBsZUZpZWxkUmVzdHJpY3Rpb24lNUMlMjIlMkMlNUMlMjJmYWNldF9nZW5lcmF0aW9uX2JlaGF2aW9yJTVDJTIyJTNBJTVDJTIyRVhDTF VERSU1QyUyMiUyQyU1QyUyMmZpZWxkX2lkJTVDJTIyJTNBJTVDJTIyQ09MTEVDVElPTkNBVEVHT1JZJTVDJTIyJTJDJTVDJTIydmFsdWVfbGlzdCU1QyUyMiUzQSU1QiU1QyUyMkNoYXJ0cyUyME1vZHVsZSU1QyUyMiUyQyU1QyUyMkNsb3VkJTI wTW9kdWxlJTVDJTIyJTJDJTVDJTIySWNvbnMlMjBNb2R1bGUlNUMlMjIlMkMlNUMlMjJUaGVtZWQlMjBNb2R1bGUlNUMlMjIlMkMlNUMlMjJUaXRsZSUyMFNsaWRlcyUyME1vZHVsZSU1QyUyMiU1RCU3RCU1RCU3RCUyMg%3D%3D@%22% 7B%7D%22 Java Master 16:9 Oracle Jiaguwen Master 16:9 Oracle Master 16:9 Oracle Master 4:3 How-To Guide 1: Title Slides Module 2: Charts/Graphs Module 3: Icons Module 4: Cloud Module Themed Modules* + Title Slides Charts, Graphs and Tables Brand Icon Collection Cloud Visualizations Themed Modules *Future branded theme and event modules will be added to Media Manager as they become available. (Click on the link in Slide Show mode to go directly to the assets page. Complete URL is available in the speaker notes.) Confidential – Oracle Internal/Restricted/Highly Restricted