Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Exploring AJAX from afar

A guide for managers and developers, within Oracle Application Express #orclapex
by

Scott Wesley

on 29 November 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Exploring AJAX from afar

Middle Tier
(ORDS
/ WLS
/ Tomcat)

Database Tier
(Oracle DB)
Client
(Browser)
90s
Future
Now
1) Dynamically generate a page
2) click a thing
3) set a value
4) instigate change
Refresh: Moon collection report
Partial Page Refresh
3 second lag
JInitiator
Cassini (NASA)
Huygens Lander (ESA)
1.3 billion km
9-11 AU

> 70 light minutes
Scott Wesley
Exploring AJAX from Afar
@swesley_perth
iPhone release
Google Suggest
AJAX
jQuery
WA Police
Media aware of Cassini's impending doom
soccer?
2000
1996
1994
1990
1986
1984
1980
1976
82 Suggested
83 Recommended
84-86 Studied
87 - Approved
88 - ESA Officially Joined
94 - Political Hubhub
97 - Launch
98, 99 - Venus Flyby
99 - Earth Flyby
July 2004 - Saturn Orbital Insertion
Jan 2005 - Titan Lander
1999 Mars Climate Orbiter
Disintegrated on entry due to
feet vs metres calculation
Orbiting Saturn
Cassini Project Length
Most IT projects
JavaScript
CSS
Images
APEX
Data
Cloud
Big Data
Broadband
Behaviour
(JavaScript)
// goto some URL
// show me the data it sends back
5.0 Locked browser
5.1 Truly Asynchronous
-- big data
-- behaviour
-- "broadband"
concept is simple, so simple the first sample code is bleh

maybe show this later
jQuery made it easier
enables web applications that behave like apps
Enabled by what
AGENDA:
intro, cassini 5m
Concept -> diagrams 10m
Use Cases -> keyrelease, button w data-id, modal pages 10m
Debugging -> interactions 5m
Common issues 5m
Fav outcome -> inline dialogs 5m
jInitiator
1) Pages generated by PL/SQL
2) Conditions on render
3) APEX app is IDE
Hubble 400km
L2 Lagrange point
(not to scale)
~384,000 km
1.5m km
1.3 light seconds
Sun: 8 light minutes
What
does
it look like?
How does deep web work?
apex.oracle.com/pls/apex/f?p=12345
domain.com/index.html
Dynamic Actions
-> AJAX
Debugging
Common Issues
Inline Dialogs
#CassiniInspires
Imagery courtesy of NASA/ESA/JPL

u/p
id
evt
{msg:"Titan"}
ok google,
pretend you're a mobile device
{region_ppr:"<table>...</table>"}
What does it look like for APEX?
Refresh Report
Dynamic Actions
Modals
Session State - tell db what browser knows
DA - firing? doing? session state
Error handling

Libraries
email behaviour - queues
web service

wireframe basic report/form with submit
vs one page with just DA / modal
aims
- understand what ajax is
- understand how this affects interface design
- see what tools/capabilities available to developers
- occasional sneak peak under hood, because everyone's curious
- nerd up with cassini, because great analogy

30000 ft
youtu.be/dF2HG1PVZok
"George Hrab - Far"
500+ kms
Afar
how far?
What is AJAX?
"don't wait for response"
javascript
and XML
AJAJ
and JSON
<probe>
cassini
</probe>
{"probe" : "cassini"}
How does this affect UI design?
User eXperience (UX)
Oracle devs build APEX apps
Fax
Calendar
Telex
Camera
Recorder
Radio
GPS
Oracle devs
use
Form Builder
Client runs Applet with jInitiator
Interactive Report
Interactive Grid
OracleJET Charts
Inspect Element
A low tech guide to understanding
web based applications
"do stuff in the meantime"
Launch
When did AJAX arrive?
3
technologies?
C# devs
create
Form Builder
APEX made it "low code"
Oracle devs
use
APEX builder
to
enhance
APEX builder
CGI-bin
Oracle devs
create
APEX Builder
Oracle devs
use
APEX builder
Oracle devs
enhance
APEX builder
Oracle devs
create
APEX apps
within
APEX apps
Everyone uses browser
inspect element simple
is monitoring ajax just as easy?
I've done it without chrome's help for ages
replace this example sans inspect element
leave that for elsewhere
just showing simple id into table, refresh report region
probably beyond scope of this presentation
but show this as cycle. Forms segmented, apex cyclical
common issue of session state
Analysing 635GB Data
Analysing Defects
Agenda
What's AJAX?
How does it work?
Tools
What's in it for me?
space_nerd := 12
capability
history
comparisons
browser
debug
session state
User Experience (UX)
space_nerd := 3
1.5m km
10 AU
iPhone release
Google Suggest
AJAX
WA Police
What was first instance?
"make deep web more accessible to the world"
Watch launch
on TV
Watch Titan Descent
on desktop
Watch final descent
on mobile
$ paying operations staff
ROI new tech; influencing next generation
Watch perspective
on VR
Experience whatever next
generation invents
Read about RTG concerns
in newspaper
Video
Book
Forum
Day job
Who should be here?
Who should be here?
Don't fear nasty bits
Capabilities
Fundamentals
Business Analysts
Mechanics
Testers
Devop
5.2 is coming
Dreamworks
10k requests / hour
1 connection
per user
Oracle
WLS
Each
navigation
Each record
post-query
Each button
Every
event
stateful
"stateless"
Pessimistic locking
Managers
Understand how the
sausage is made
-des-admin-ba
c:\temp
conditional
wysiwyg
mydomain.com/order/3141592
~10 connections
Session ID
Item
Value
123456
P1_NAME
Marie Roach
741451
741451
P1_NICK
P1_NAME
Science Guy
Bill Nye
https://apex.oracle.com/pls/apex/f?p=27882:50:
109550235194089
::NO::
See what's
produced
Toggle CSS
settings
Click Button
P50_MOON = 7782
Trigger Dynamic Action
JS: Call AJAX
Session ID
Item
Value
741451
P1_MOON
-
data-id="#EMPNO#"
$s('P50_MOON', "#EMPNO#");
OnChange: P50_MOON
Session ID
Item
Value
741451
P1_MOON
7782
PL/SQL: add_member()
p_n001 => :P50_MOON
JavaScript
Console
Tell the database what the browser knows
"Page item to submit"
Date User Elapsed
Render
Process
AJAX

(hidden)
Phone type
Orientation
Network throttling
5.2 User Interface changes
no more jQuery mobile theme
requirements
Business Analyst
Stakeholders
Developer
User Experience
Wants / Needs
Know process
if A then B
Tester
Test Plan
Test Plan
a) click a thing
b) set a value
c) instigate change
James Webb Space Telescope
AGENDA v2:
intro, cassini 5m
Look like 5m
Deep web 5m
interaction 10m
goal 5m
history 5m

"forget about page submission"
you have a RAD tool that can do this?!
running on your oracle data set?
change your business
really is like building lego

submitting
entire
page
Where did the last 10 years go?
single page applications
Interactive
Applications
Time to
to asynchronous communication
What is AJAX?
and honour "afar"
1) Dynamically generate pages
2) click a thing
3) set a value
4) instigate change

Plugin Framework
but re-usable
Any website widget.
Anything you've seen on the net.
They all bleed
- css
- javascript
- data -> html
Oracle doing work for us
Oracle JET
Web Service Integration
Universal Theme Evolution
Absorbing community effort
How do we
build

the user
process
into a
workflow
the user can
self-learn

$64k
$64m
We can manipulate most things
on an APEX web page
like we manipulate data in a table

Submit entire page...
...Before next step
middle tier memory hog
PL/SQL
generates
HTML
session_id
don't think this is needed
anything
you've seen a website do
Developing with APEX
is like building lego
All APEX interaction logged
same same
add perspective
Oracle APEX
<
Oracle Forms
feature rich
with an undertone...
space_nerd := 11
space-nerd intro
(byo integration)
10 years?
2000 - Y2K
2000 Jupiter Flyby
</Presentation>
Scott Wesley
grassroots-oracle.com

"keep looking up"
t
client
server
client
server
client
server
client
server
client
server
change your business!
ugh!
Full transcript