1. Confidential – Oracle Internal/Restricted/Highly Restricted

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

3. 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

4. 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

5. What Are Developers Doing Today?
Confidential – Oracle Internal

6. 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

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

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

9. 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.

10. 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.

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

12. 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

13. 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

14. 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

15. JET GA – Oct 15th, 2018
Features & bug fixes delivered every two months since October 2014
JET 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

16. What’s The Problem?
Confidential – Oracle Internal

17. Developers Spectrum
Confidential – Oracle Internal

18. 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

19. 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

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

21. 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

22. Breaking It Down
Confidential – Oracle Internal

23. 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

24. Confidential – Oracle Internal/Restricted/Highly Restricted

25. 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

26. 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

27. 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

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

29. Learn More at Oracle Open World
JET-Components Hands-On Lab [HOL5031] –
VBCS Hands-On Lab [HOL6269] –
VBCS-Mobile Hands-On Lab [HOL6879] –
VBCS – Meet the Experts [MTE6771/MTE6750] –
JET - Meet the Experts [MTE6742] –
Rapid Mobile Development [PRO3985] –
Custom Components In JavaScript [DEV4694] –
Extending SaaS [PRO3981] –
JET Offline Toolkit [DEV4295] –
JET for Beginners [DEV4938] –
Visit The Demo Booths at Moscone South open Daily until
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

31. 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

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

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

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

35. 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

36. 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

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

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

39. 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

40. 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

41. Confidential – Oracle Internal/Restricted/Highly Restricted

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

43. 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

44. 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

45. OpenWorld SF 2018 Event Logos and Lockups
Oracle OpenWorld Logo
Branded Programs
Date/Venue Lockup
Log in to Media Manager ( 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:
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

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

47. + Additional Resources Java Master Oracle Jiaguwen Oracle Master 16:9
How-To Guide
Log in to Media Manager ( 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
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
MiUzQSU1QyUyMmNvbS5hcnRlc2lhLnNlYXJjaC5mYWNldC5GYWNldFNpbXBsZUZpZWxkUmVzdHJpY3Rpb24lNUMlMjIlMkMlNUMlMjJmYWNldF9nZW5lcmF0aW9uX2JlaGF2aW9yJTVDJTIyJTNBJTVDJTIyRVhDTFVERSU1QyUyMiUyQyU1QyU yMmZpZWxkX2lkJTVDJTIyJTNBJTVDJTIyQ09MTEVDVElPTkNBVEVHT1JZJTVDJTIyJTJDJTVDJTIydmFsdWVfbGlzdCU1QyUyMiUzQSU1QiU1QyUyMk1hc3RlciU1QyUyMiU1RCU3RCUyQyU3QiU1QyUyMnR5cGUlNUMlMjIlM0ElNUMlMjJjb20uYXJ 0ZXNpYS5zZWFyY2guZmFjZXQuRmFjZXRTaW1wbGVGaWVsZFJlc3RyaWN0aW9uJTVDJTIyJTJDJTVDJTIyZmFjZXRfZ2VuZXJhdGlvbl9iZWhhdmlvciU1QyUyMiUzQSU1QyUyMkVYQ0xVREUlNUMlMjIlMkMlNUMlMjJmaWVsZF9pZCU1QyUyMiUz
Oracle Jiaguwen Master wZSU1QyUyMiUzQSU1QyUyMmNvbS5hcnRlc2lhLnNlYXJjaC5mYWNldC5GYWNldFNpbXBsZUZpZWxkUmVzdHJpY3Rpb24lNUMlMjIlMkMlNUMlMjJmYWNldF9nZW5lcmF0aW9uX2JlaGF2aW9yJTVDJTIyJTNBJTVDJTIyRVhDTFVERSU1QyUyMi UyQyU1QyUyMmZpZWxkX2lkJTVDJTIyJTNBJTVDJTIyU1VCQ0FURUdPUlklNUMlMjIlMkMlNUMlMjJ2YWx1ZV9saXN0JTVDJTIyJTNBJTVCJTVDJTIySmlhZ3V3ZW4lNUMlMjIlNUQlN0QlMkMlN0IlNUMlMjJ0eXBlJTVDJTIyJTNBJTVDJTIyY29tLmFydG VzaWEuc2VhcmNoLmZhY2V0LkZhY2V0U2ltcGxlRmllbGRSZXN0cmljdGlvbiU1QyUyMiUyQyU1QyUyMmZhY2V0X2dlbmVyYXRpb25fYmVoYXZpb3IlNUMlMjIlM0ElNUMlMjJFWENMVURFJTVDJTIyJTJDJTVDJTIyZmllbGRfaWQlNUMlMjIlM0ElNU
Oracle Master 16:9
7B%7D%22
Oracle Master 4:3
%7B%7D%22
How-To Guide
%22%7B%7D%22
Modules
JTdCJTVDJTIydHlwZSU1QyUyMiUzQSU1QyUyMmNvbS5hcnRlc2lhLnNlYXJjaC5mYWNldC5GYWNldFNpbXBsZUZpZWxkUmVzdHJpY3Rpb24lNUMlMjIlMkMlNUMlMjJmYWNldF9nZW5lcmF0aW9uX2JlaGF2aW9yJTVDJTIyJTNBJTVDJTIyRVhDTF VERSU1QyUyMiUyQyU1QyUyMmZpZWxkX2lkJTVDJTIyJTNBJTVDJTIyQ09MTEVDVElPTkNBVEVHT1JZJTVDJTIyJTJDJTVDJTIydmFsdWVfbGlzdCU1QyUyMiUzQSU1QiU1QyUyMkNoYXJ0cyUyME1vZHVsZSU1QyUyMiUyQyU1QyUyMkNsb3VkJTI 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