Mumps

1
Mumps AjaxCAMTA 2008

• Rob Tweed
• M/Gateway Developments Ltd

2
The Ajax World

• Fast-moving and rapidly evolving
• Ajax
• Rich Internet Applications (RIA)
• Where most development is now focused
• Its the place to be!

3
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/archiv
  es/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

4
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

5
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
• Browsers Document Object Model (DOM)
• Dynamic HTML
• JSON (JavaScript Object Notation)

6
Ajax Key Technologies

• Javascript Frameworks and Widgets
• Main players include
• ExtJS
• Dojo
• Yahoo YUI
• JQuery
• Script.aculo.us
• Prototype

7
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

8
Ajax in Action

• Lets take a look at some examples
• DOM replacement
• Rich UI using ExtJS

9
Javascript Frameworks

• What they cant do
• Provide access to a database
• Another layer is needed for this
• Programmatic layer
• Mainstream products include
• PHP
• Java (JSP)
• .Net
• Python
• Ruby

10
Ajax Architectures
PHP .Net JSP Python Ruby
DBMS
Programmatic Tier
Web Server
Browser
Javascript
ODBC JDBC Custom connectors
XMLHttpRequest Object (XHR)
11
How does it all work?

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

12
How it works
Javascript framework/widget library code loaded
DBMS
Programmatic Tier
Web Server
Browser
External Web Server
13
How it works
Data fetched from the database
DBMS
Programmatic Tier
Web Server
Browser
Javascript
PHP .Net JSP Python Ruby
14
How it works
Generate page of HTML and Javascript,
including Javascript code that creates/defines
widgets
DBMS
Programmatic Tier
Web Server
Browser
Javascript
PHP .Net JSP Python Ruby
15
How it works
User interactions generate XHR requests that
are sent back to and handled by the programmatic
tier
DBMS
Programmatic Tier
Web Server
Browser
Javascript
PHP .Net JSP Python Ruby
XMLHttpRequest Object (XHR)
16
How it works
Data sent from browser is validated and
saved back to the database
DBMS
Programmatic Tier
Web Server
Browser
Javascript
PHP .Net JSP Python Ruby
17
How it works
Process then repeats
DBMS
Programmatic Tier
Web Server
Browser
Javascript
18
How it works
Programs must ensure strict security
DBMS
Programmatic Tier
Web Server
Something generating HTTP requests
Are these requests coming from a
bona-fide user? Can they be actioned?
19
How it works
Programs must create an illusion of a stateful
session
DBMS
Programmatic Tier
Web Server
Rob Tweeds browser
I know what he was doing previously
stateless
20
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

21
Ajax Architecture Caché
Caché
Web Server
Browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
Javascript
XMLHttpRequest Object (XHR)
22
Ajax Architecture GTM Caché
GT.M Or Caché
Web Server
Browser
Programmatic Tier
MGWSI Gateway
MGWSI Interface Layer
Javascript
PHP .Net JSP Python Ruby
XMLHttpRequest Object (XHR)
23
Ajax Architecture GT.M
GT.M
Apache Web Server
Browser
MGWSI Interface Layer
MGWSI Gateway
Javascript
XMLHttpRequest Object (XHR)
New Apache/HTTP Connector
24
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

25
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

26
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

27
How EWD works
Application defined as highly abstracted EWD
Pages
etc
28
How EWD Works Caché CSP/WebLink
Caché
Web Server
Browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
Javascript
Generated routines run within Caché
29
How EWD Works Caché CSP/WebLink
Javascript framework/widget library code loaded
Caché
Web Server
Browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
External Web Server
30
How EWD Works Caché CSP/WebLink
Caché
Web Server
Browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
Javascript
EWD Routine
Data fetched from the database
31
How EWD Works Caché CSP/WebLink
Caché
Web Server
Browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
Javascript
EWD Routine
Generate page of HTML and Javascript,
including Javascript code that creates/defines
widgets
32
How EWD Works Caché CSP/WebLink
Caché
Web Server
Browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
Javascript
EWD Routine
XMLHttpRequest Object (XHR)
User interactions generate XHR requests that
are sent back to and handled by the EWD routines
33
How EWD Works Caché CSP/WebLink
Caché
Web Server
Browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
Javascript
EWD Routine
Data sent from browser is validated and
saved back to the database
34
How EWD Works Caché CSP/WebLink
Caché
Web Server
Browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
Javascript
EWD Routine
Process then repeats
35
How EWD Works Caché CSP/WebLink
EWD routines must ensure strict security
Caché
Web Server
Something generating HTTP requests
WebLink / CSP Interface Layer
WebLink / CSP Gateway
EWD Routine
Are these requests coming from a
bona-fide user? Can they be actioned?
36
How EWD Works Caché CSP/WebLink
EWD routines must create an illusion of a
stateful session
Caché
Web Server
Rob Tweeds browser
WebLink / CSP Interface Layer
WebLink / CSP Gateway
EWD Routine
I know what he was doing previously
stateless
37
How EWD WorksCaché/GT.M MGWSI PHP
38
How EWD WorksCaché/GT.M MGWSI PHP
GT.M or Caché
Web Server
Browser
PHP
MGWSI Gateway
MGWSI Interface Layer
Javascript
EWD application runs as a set of PHP pages
39
How EWD WorksCaché/GT.M MGWSI PHP
GT.M or Caché
Web Server
Browser
PHP
MGWSI Gateway
MGWSI Interface Layer
Javascript
HTML Javascript generated by these pages
40
How EWD WorksCaché/GT.M MGWSI PHP
GT.M or Caché
Web Server
Browser
PHP
MGWSI Gateway
MGWSI Interface Layer
Javascript
XMLHttpRequest Object (XHR)
User interactions generate XHR requests that
are sent back to and handled by the EWD PHP pages
41
How EWD WorksCaché/GT.M MGWSI PHP
GT.M or Caché
Web Server
Browser
PHP
MGWSI Gateway
MGWSI Interface Layer
Javascript
Pre-page and Action scripts fetch, validate and
save data
42
How EWD WorksGT.M MGWSI HTTP adaptor
43
How EWD WorksGT.M MGWSI HTTP adaptor
GT.M
Apache Web Server
Browser
MGWSI Interface Layer
MGWSI Gateway
Javascript
Generated routines will run within GT.M
44
How EWD WorksGT.M MGWSI HTTP adaptor
GT.M
Apache Web Server
Browser
MGWSI Interface Layer
MGWSI Gateway
Javascript
Otherwise it will behave just like CSP/WebLink
45
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 cant be handled
• Video
• Audio
• Complex graphics

46
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

47
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 PCs GPU

48
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
• Microsofts alternative to Flex

49
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 designers mindset

50
RIA SOA

• Flex widgets map to XML data (E4X)
• Flex can make REST calls for E4X data
• Almost all of the applications logic can now be
  in Flex
• ActionScript (almost identical to Javascript)

51
RIA SOA

• Where does the programmatic layer fit?
• ie PHP, Python, Java, Ruby, EWD, Zen?
• It doesnt!
• But Flex must not talk to the database directly
• Transport is still over HTTP and therefore
  inherently insecure
• Flash can be decompiled

52
RIA Architecture
REST
DBMS
Security Proxy Tier
Web Server
Browser
Flash or Silverlight
XMLHttpRequest Object (XHR)
REST ODBC Custom connectors
Application logic is now here
53
RIA Cloud
Cloud Database (eg SimpleDB)
REST
Security Proxy Tier
Web Server
Browser
Flash or Silverlight
REST
XMLHttpRequest Object (XHR)
Application logic is now here
54
RIA Cloud Where do Mumps Caché fit?

• Its 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!