This document provides an introduction to the Oracle JET framework from the perspective of John Sim and Lauren Beatty of Fishbowl Solutions. It discusses what Oracle JET is, its key features and benefits including its modularity and use of popular JavaScript libraries. It also demonstrates how to get started with Oracle JET using the QuickStart template and Yeoman generator, and provides an example of building a simple JET application that integrates with the Oracle Cloud Documents REST API.

1. Session ID:
Prepared by:
A Designer’s Introduction to
the Oracle JET Framework
4392
@JRSim_UIX @LaurenBeatty13
John Sim and Lauren Beatty

2. 2
About Fishbowl Solutions
Experience
■ 800+ projects since founding in 1999
■ Oracle Gold Partner
■ Oracle Cloud Standard Partner
■ Google for Work Partner
Expertise
■ Portals and Content Management
■ User Experience
■ Enterprise Search

3. 3
Fishbowl Consulting Services
+ WebCenter Content
̶ Document Mgmt
̶ Records Mgmt
̶ Digital Asset Mgmt
̶ Web Content Mgmt
+ WebCenter Portal
̶ Employee Intranets
̶ Vendor or Partner Extranets
̶ Customer Portal
+ Google Search
– Connectors for WebCenter, Liferay Portal and YouTube
– Resale, Implementations, Optimizations
+ Enterprise Support
+ Installations, Configurations, Performance Tuning,
Solution Design, Development, Implementations…
̶ Image & Process Mgmt
̶ Document Capture
̶ Forms Recognition
̶ Content Consolidation

4. 4
Business Solutions We Deliver
Enterprise Search across Business Systems
Jumpstart services and software leveraging the Google Search Appliance
Enterprise Information Strategy
Consulting services for discovery and go-forward recommendations on
repositories, integrations, delivery channels, and business process flow
Quality Document Management & Control
Simple, robust software to streamline document authoring and review
and automate overall policy and procedure management
Self-Service Portals
Jumpstart services and software for Employee Intranets, Partner Extranets
and Global Customer/Supplier Portals
User Experience & Mobile Design and Development
Responsive and adaptive design for desktop and mobile

5. Who we are:
• John---Oracle ACE
• Senior Developer at Fishbowl Solutions
• Expertise in UX/UI
• Associate Software Consultant
• MEAN stack
• Expertise in Learning/Exploring

6. Overview
• What is Oracle JET?
• Features and Benefits
• JET’s modularity
• Using Oracle JET QuickStart Template and Yeoman
• JET app with Oracle Cloud Documents REST API
6

7. What is Oracle JET?
• JavaScript Extension Toolkit
• Modular Front-End Framework
• Tried and True JS Libraries
• Pre-Built UI Components

8. Features and Benefits
• Utilizes popular Open Source Libraries
• Flexible!
• Accessibility and Internationalization
• 70 UI Components
• 2-way Data Binding with Knockout
• Powerful Routing System
8

9. Oracle JET Framework
Based on MVVM design:
9

10. JET’s Modularity
JET is built on a number of battle-tested
JS libraries:
10

11. Knockout
11
• 2-way Data Binding: Model View View-Model (MVVM)
• Automatic UI refresh—when the data changes, UI refreshes
automatically (and vice-versa)
• Straightforward, readable syntax

12. RequireJS
12
• JavaScript file and module loader
• Loads only the libraries and modules needed
• As applications get larger, loading of
resources gets more complicated
• Improves speed and quality of code
• Essentially: loads your modules and files only
when they’re needed!

13. RequireJS Configuration
13

14. Top-level RequireJS
14
• In Main.js of QuickStart
• Similar code in individual ViewModel JS files
• Loads the components you need

15. Oracle JET QuickStart Template
15

16. 90% of Oracle JET

17. Download NetBeans
17

18. Oracle JET Plugin
18

19. Getting Started with Oracle Jet
npm install ALL OF THE THINGS!
19
• Grunt
• Grunt-cli
• Bower
• Git
• Yeoman
• generator-oraclejet (Yeoman generator)
Need help? http://www.npmjs.com

20. Create and Grunt!

21. OR: Create a New JET Project
in NetBeans
21

22. Video Magic
22

23. OOTB Project!

24. Responsive
24

25. Using The Cookbook
Find the UI Component:
25

26. Copy the HTML
26

27. Copy the JS
27

28. Pro tip!
QS template syntax in ViewModel is different:
“define” vs. “require” and just return the ViewModel
28

29. Routing for SPA in JET
29

30. Routing part II
30
index.html

31. Routing Part III
31
In Header and off-canvas templates

32. Routing Part IV
32
In header.js

33. JET with Oracle Docs API
33

34. Oracle DoCS REST API

35. 35

36. The ViewModel
36

37. The ViewModel Part II
37

38. The ViewModel Part III
38

39. The View
39

40. Learning Resources
• Knockoutjs.com
• Knockmeout.net
• Oracle JET cookbook!
• Oracle JET QuickStart Template
• JET videos
• Oracle JET community
• Oracle JET dev guide
• Geertjan Wielenga’s blog
• Github repo
40

41. Thank you!
41
• Please complete the session evaluation
• Use the mobile app
• We appreciate your feedback and insight!
Come Visit Fishbowl Solutions at Booth #1028!