Mumps
-
Upload
sampetruda -
Category
Documents
-
view
1.616 -
download
0
Transcript of 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…!