Exploring AJAX from afar

Exploring AJAX from Afar

A low tech guide to understanding

web based applications

Scott Wesley

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

replace this example sans inspect element

leave that for elsewhere

just showing simple id into table, refresh report region

wireframe basic report/form with submit

vs one page with just DA / modal

Where did the last 10 years go?

u/p

Who should be here?

evt

id

Who should be here?

{msg:"Titan"}

Agenda

{region_ppr:"<table>...</table>"}

space-nerd intro

Dynamic Actions

-> AJAX

how far?

single page applications

5.2 is coming

Libraries

with an undertone...

inspect element simple

is monitoring ajax just as easy?

I've done it without chrome's help for ages

email behaviour - queues

web service

Common Issues

What is AJAX?

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

and honour "afar"

common issue of session state

Session State - tell db what browser knows

DA - firing? doing? session state

Error handling

Debugging

AGENDA v2:

intro, cassini 5m

Look like 5m

Deep web 5m

interaction 10m

goal 5m

history 5m

Inline Dialogs

(not to scale)

enables web applications that behave like apps

Inspect Element

What is AJAX?

"don't wait for response"

"do stuff in the meantime"

"forget about page submission"

"make deep web more accessible to the world"

AJAX

WA Police

iPhone release

Google Suggest

What was first instance?

Sun: 8 light minutes

What does it look like for APEX?

"keep looking up"

concept is simple, so simple the first sample code is bleh

maybe show this later

Refresh Report

Dynamic Actions

Modals

What does it look like?

Interactive Report

Interactive Grid

OracleJET Charts

ugh!

#CassiniInspires

Imagery courtesy of NASA/ESA/JPL

Scott Wesley

grassroots-oracle.com

jQuery made it easier

// goto some URL

// show me the data it sends back

APEX made it "low code"

-- big data

</Presentation>

How does deep web work?

Read about RTG concerns

in newspaper

Watch launch

on TV

Watch Titan Descent

on desktop

Watch final descent

on mobile

2000 - Y2K

Google Suggest

iPhone release

Media aware of Cassini's impending doom

2000

1994

1986

1980

WA Police

1996

1990

Watch perspective

on VR

1984

1976

97 - Launch

94 - Political Hubhub

87 - Approved

84-86 Studied

82 Suggested

88 - ESA Officially Joined

98, 99 - Venus Flyby

83 Recommended

AJAX

99 - Earth Flyby

2000 Jupiter Flyby

Experience whatever next

generation invents

soccer?

jQuery

$ paying operations staff

ROI new tech; influencing next generation

1) Pages generated by PL/SQL

2) Conditions on render

3) APEX app is IDE

When did AJAX arrive?

probably beyond scope of this presentation

but show this as cycle. Forms segmented, apex cyclical

<

Oracle APEX

Oracle Forms

C# devs create Form Builder

Oracle devs create APEX Builder

Oracle devs use Form Builder

Oracle devs use APEX builder

10 years?

Oracle devs enhance APEX builder

Oracle devs use APEX builder

to enhance APEX builder

Oracle devs build APEX apps

How do we build

the user process

into a workflow

the user can self-learn

Submit entire page...

domain.com/index.html

Oracle JET

Web Service Integration

Universal Theme Evolution

Absorbing community effort

client

t

server

$64k

$64m

Oracle doing work for us

but re-usable

Plugin Framework

conditional

wysiwyg

- css

- javascript

- data -> html

They all bleed

client

server

Any website widget.

1 connection

per user

Oracle

WLS

Anything you've seen on the net.

Wants / Needs

apex.oracle.com/pls/apex/f?p=12345

mydomain.com/order/3141592

session_id

client

server

Tell the database what the browser knows

10k requests / hour

Test Plan

~10 connections

1) Dynamically generate a page

2) click a thing

3) set a value

4) instigate change

Know process

if A then B

PL/SQL

generates

HTML

"stateless"

anything you've seen a website do

requirements

Tester

Developer

Stakeholders

Business Analyst

a) click a thing

b) set a value

c) instigate change

don't think this is needed

Trigger Dynamic Action

OnChange: P50_MOON

JS: Call AJAX

Click Button

P50_MOON = 7782

$s('P50_MOON', "#EMPNO#");

See what's

produced

Toggle CSS

settings

(hidden)

data-id="#EMPNO#"

you have a RAD tool that can do this?!

running on your oracle data set?

change your business

really is like building lego

client

client

server

server

https://apex.oracle.com/pls/apex/f?p=27882:50:109550235194089::NO::

change your business!

1) Dynamically generate pages

2) click a thing

3) set a value

4) instigate change

We can manipulate most things

on an APEX web page

like we manipulate data in a table

no more jQuery mobile theme

5.2 User Interface changes

ok google,

pretend you're a mobile device

Render

Process

AJAX

How does this affect UI design?

Date User Elapsed

All APEX interaction logged