Mumps

Mumps & Ajax

CAMTA 2008

Rob Tweed

M/Gateway Developments Ltd

The Ajax World

• Fast-moving and rapidly evolving– Ajax– Rich Internet Applications (RIA)

• Where most development is now focused

• It’s the place to be!

What is Ajax?

• A term coined by Jesse James Garrett in 2005 to describe a range of techniques and technologies that were starting to appear widely:– http://adaptivepath.com/publications/essays/archives/000385.php

• Ajax = Asynchronous Javascript and XML• Actually XML not often used at all!

– Broad and vague term that describes a style of application more than a set of technologies

What distinguishes an Ajax application?

• Not page-oriented, breaks away from:– Fill out a form– Click a button– Page refreshed with another

• Ajax is event-oriented - content dynamically changed within a single page– Some Ajax applications are just a single page of

HTML that the user interacts with for hours!– Looks and behaves much more like a typical

client/server VB or Java application

Ajax Key Technologies

• Javascript and Event Handlers• Cascading Style Sheets (CSS)• XMLHttpRequest Object

– “back-channel” built into the browser that allows a Javascript function to communicate externally via HTTP

• Standard HTTP request/response

• Browser’s Document Object Model (DOM)– Dynamic HTML

• JSON (JavaScript Object Notation)

Ajax Key Technologies

• Javascript Frameworks and Widgets

• Main players include:– ExtJS– Dojo– Yahoo YUI– JQuery– Script.aculo.us– Prototype

Javascript Frameworks

• Aim to provide two roles:– Abstraction and automation of the complex

event handling within the browser– Pre-packaged UI components (widgets):

• Layout managers– Viewports, tabbed panels, accordion panes

• Windowing managers• Rich forms• Drag and drop effects• etc

Ajax in Action

• Let’s take a look at some examples– DOM replacement– Rich UI using ExtJS

Javascript Frameworks

• What they can’t do:– Provide access to a database

• Another layer is needed for this– Programmatic layer– Mainstream products include:

• PHP• Java (JSP)• .Net• Python• Ruby

Ajax Architectures

DBMSWeb

ServerProgrammatic

Tier

ODBCJDBC

Custom connectors

Browser

XMLHttpRequestObject(XHR)

Javascript

PHP.NetJSPPythonRuby

How does it all work?

• Applications are written in the programming tier environment, eg:– PHP– JSP (Java)– .Net (eg VB.Net, C#)– Python– Ruby

ExternalWeb

Server

How it works

DBMSWeb

ServerProgrammatic

TierBrowser

Javascript framework/widget library code loaded

How it works

DBMSWeb

ServerProgrammatic

TierBrowser

Javascript

Data fetched from the database

PHP.NetJSPPythonRuby

How it works

DBMSWeb

ServerProgrammatic

TierBrowser

Javascript

Generate page of HTML and Javascript, includingJavascript code that creates/defines widgets

PHP.NetJSPPythonRuby

How it works

DBMSWeb

ServerProgrammatic

TierBrowser

Javascript

User interactions generate XHR requests that aresent back to and handled by the programmatic tier

XMLHttpRequestObject(XHR)

PHP.NetJSPPythonRuby

How it works

DBMSWeb

ServerProgrammatic

TierBrowser

Javascript

Data sent from browser is validated and savedback to the database

PHP.NetJSPPythonRuby

How it works

DBMSWeb

ServerProgrammatic

TierBrowser

Javascript

Process then repeats

How it works

DBMSWeb

ServerProgrammatic

Tier

Somethinggenerating

HTTPrequests

Programs must ensure strict security

Are these requestscoming from a bona-fideuser?

Can they be actioned?

How it works

DBMSWeb

ServerProgrammatic

Tier

Programs must create an illusion of a stateful session

Rob Tweed’sbrowser

I know what he wasdoing previously

stateless

How about Mumps and Caché?

• The programmatic layer can be provided by Mumps/Caché directly

• Still need a gateway to the web server• Several gateway options:

– Caché:• WebLink (the original gateway)• CSP

– GT.M or Caché• MGWSI

Ajax Architecture: Caché

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

Browser

XMLHttpRequestObject(XHR)

Javascript

We

bL

ink / C

SP

Ga

tew

ay

Ajax Architecture: GTM & Caché

WebServer

Pro

gra

mm

atic T

ier

Browser

XMLHttpRequestObject(XHR)

Javascript

PHP.NetJSPPythonRuby

MG

WS

IG

ate

wa

yGT.M

OrCaché

MG

WS

IIn

terfa

ce L

aye

r

Ajax Architecture: GT.M

GT.M

ApacheWeb

Server

MG

WS

IIn

terfa

ce L

aye

r

Browser

XMLHttpRequestObject(XHR)

Javascript

MG

WS

IG

ate

wa

y

NewApache/HTTP

Connector

Ajax Technologies for Mumps & Caché

• Complex Javascript programming• Widget programming in Javascript• XHR request/response handling• Gateway handling• Session management• Security handling

• All adds up to a lot of complex code

Ajax Technologies for Mumps & Caché

• To simplify/abstract Ajax development:– Enterprise Web Developer (EWD)

• Caché and GTM• Works with CSP, MGWSI and WebLink• Can work with PHP, JSP, .Net, Python and Ruby• Can work with any 3rd-party Javascript framework• Design-focused

Ajax Technologies for Mumps & Caché

• To simplify/abstract Ajax development:– Enterprise Web Developer (EWD)

• Caché and GTM

• Works with CSP, MGWSI and WebLink

• Can work with PHP, JSP, .Net, Python and Ruby

• Can work with any 3rd-party Javascript framework

• Design-focused

– Zen• Caché only

• CSP only

• Locked into its own widget library

• Programming focused

Compiler

Caché routines

PHP Pages

VB.Net Pages

Python .py files

Application defined as highly abstracted

EWD Pages

How EWD works

etc…

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

Browser

Javascript

We

bL

ink / C

SP

Ga

tew

ay

Generated routines run within Caché

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

BrowserW

eb

Lin

k / CS

PG

ate

wa

y

ExternalWeb

Server

Javascript framework/widget library code loaded

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

Browser

Javascript

We

bL

ink / C

SP

Ga

tew

ay

Data fetched from the database

EWDRoutine

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

Browser

Javascript

We

bL

ink / C

SP

Ga

tew

ay

Generate page of HTML and Javascript, includingJavascript code that creates/defines widgets

EWDRoutine

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

Browser

Javascript

We

bL

ink / C

SP

Ga

tew

ay

User interactions generate XHR requests that aresent back to and handled by the EWD routines

XMLHttpRequestObject(XHR)

EWDRoutine

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

Browser

Javascript

We

bL

ink / C

SP

Ga

tew

ay

Data sent from browser is validated and savedback to the database

EWDRoutine

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

Browser

Javascript

We

bL

ink / C

SP

Ga

tew

ay

Process then repeats

EWDRoutine

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

We

bL

ink / C

SP

Ga

tew

ay

EWD routines must ensure strict security

Somethinggenerating

HTTPrequests

Are these requestscoming from a bona-fideuser?

Can they be actioned?

EWDRoutine

How EWD Works: Caché + CSP/WebLink

CachéWeb

Server

We

bL

ink / C

SP

Inte

rface

La

yer

We

bL

ink / C

SP

Ga

tew

ay

Rob Tweed’sbrowser

EWD routines must create an illusion of a stateful session

I know what he wasdoing previously

stateless

EWDRoutine

How EWD Works:Caché/GT.M + MGWSI + PHP

How EWD Works:Caché/GT.M + MGWSI + PHP

WebServer

PH

PBrowser

Javascript

MG

WS

IG

ate

wa

yGT.M

orCaché

MG

WS

IIn

terfa

ce L

aye

r

EWD applicationruns as a set of

PHP pages

How EWD Works:Caché/GT.M + MGWSI + PHP

WebServer

PH

PBrowser

Javascript

MG

WS

IG

ate

wa

yGT.M

orCaché

MG

WS

IIn

terfa

ce L

aye

r

HTML + Javascriptgenerated by these

pages

How EWD Works:Caché/GT.M + MGWSI + PHP

WebServer

PH

PBrowser

XMLHttpRequestObject(XHR)

Javascript

MG

WS

IG

ate

wa

yGT.M

orCaché

MG

WS

IIn

terfa

ce L

aye

r

User interactions generate XHR requests that are

sent back to and handled by the EWD PHP pages

How EWD Works:Caché/GT.M + MGWSI + PHP

WebServer

PH

PBrowser

Javascript

MG

WS

IG

ate

wa

yGT.M

orCaché

MG

WS

IIn

terfa

ce L

aye

r

Pre-page andAction scriptsfetch, validateand save data

How EWD Works:GT.M + MGWSI HTTP adaptor

How EWD Works:GT.M + MGWSI HTTP adaptor

GT.M

ApacheWeb

Server

MG

WS

IIn

terfa

ce L

aye

r

Browser

Javascript

MG

WS

IG

ate

wa

y

Generated routines will run within GT.M

How EWD Works:GT.M + MGWSI HTTP adaptor

GT.M

ApacheWeb

Server

MG

WS

IIn

terfa

ce L

aye

r

Browser

Javascript

MG

WS

IG

ate

wa

y

Otherwise it will behave just like CSP/WebLink

Ajax is dead! Long live RIA

• Ajax has demonstrated the amazing capabilities of browsers

• But Ajax has many shortcomings:– Very complex Javascript needed to define widgets

and UI effects– Difficult cross-browser dependencies– Pushing the browser to the limit– Some things can’t be handled

• Video• Audio• Complex graphics

Ajax is dead! Long live RIA

• Rich Internet Applications (RIA)

• The next generation of browser-based application development– Make use of a separate run-time plug-in– Adobe Flash– Microsoft Silverlight

RIA benefits

• True cross-browser compatibility

• Breaks free of the browser/Javascript limitations– Very rich UI components– Video– Audio– Advanced graphics

• Making use of the PC’s GPU

RIA Development

• Adobe:– Flex

• XML-based development platform (MXML)• MXML Compiled into Flash files• Flex Designer Eclipse plug-in to make MXML

development easy

• Microsoft– Silverlight

• Microsoft’s alternative to Flex

RIA: Which to choose?

• My money is on Adobe and Flex– Web/RIA applications are all about design– Adobe owns the design space:

• Photshop• Indesign• Dreamweaver

– Flex 3 Designer has inherited much of the Adobe knowledge of the designer’s mindset

RIA + SOA

• Flex widgets map to XML data (E4X)

• Flex can make REST calls for E4X data

• Almost all of the application’s logic can now be in Flex– ActionScript (almost identical to Javascript)

RIA + SOA

• Where does the programmatic layer fit?– ie PHP, Python, Java, Ruby, EWD, Zen?

• It doesn’t!

• But Flex must not talk to the database directly– Transport is still over HTTP and therefore

inherently insecure– Flash can be decompiled

RIA Architecture

DBMSWeb

Server

SecurityProxyTier

Browser

XMLHttpRequestObject(XHR)

Flashor

Silverlight

REST

RESTODBC

Custom connectorsApplication

logic is now here

RIA + Cloud

CloudDatabase

(eg SimpleDB)

WebServer

SecurityProxyTier

Browser

XMLHttpRequestObject(XHR)

Flashor

Silverlight

REST

REST

Applicationlogic is

now here

RIA + Cloud: Where do Mumps & Caché fit?

• It’s clear that EWD and Zen are no longer state of the art technologies

• The next generation of RIA architectures for Mumps & Caché?

• Come back next year for an update…!