Post on 15-Jan-2015
description
Mobile Interfaces to Mainframe Applications – Architecture Considerations
Louis JOLIBOIS
Patrick FOURNIER
(SysperTec Communication)
Monday, August 12, 2013 @ 1:30 PM
Session # 13455
Mobile 3270 TE
• Mobile devices are pervasive
• Will replace traditional workstations/PCs
• Work anywhere, anytime, using any mobile device
• Documents and spreadsheets
• Mobile access to mainframe applications
• Web user interfaces (WUI)
• Web services (WS)
• 3270 terminal emulation (TE) Focus of our development
2
Defining MOBILE
• Mobile devices
Different screen sizes, keyboards, touchscreens, track pads …
• Mobile access
• Internet access via WIFI, 3G/LTE, 4G or Ethernet
3
Tablets Phones/PDA Laptops Desktops
MOBILE = accessing application from anywhere,
with any type of connected device
Web browser environment
• Connecting
• Communicate with outside world
• HTTP/S
• Rendering
• End-user display
• HTML & CSS
• Scripting
• User interactivity, background computations, programmatic
access to HTTP and HTML layers
• Powerful JavaScript runtime
4
Common denominator supported by all mobile devices
Architectural options Traditional TN3270 technology
• Not portable TN3270 = incompatible with web browser technology
Need device-specific app for each current/future mobile device
• Not mobile TN3270 relies on a single persistent TCP connection Fragile
connection to host: mobile networks involve roaming, proxies, bad
reception…
5
✘
Host
TN3270 TN3270
Mobile device
WEB
Code
Browser-based 3270 TE
Accessing mainframe applications from the web browser:
What are the architectural options?
Where should the code reside?
6
Architectural options HTTP
HTTP server can reside on host or middle tier server
7
Host
HTTP
Middle tier server
HTTP
HTTP
Server
HTTP
Server
Mobile device
WEB
HTTP HTTP TN3270 WEB
Exposing 3270 data through HTTP
Proprietary HTTP server
• Bridge between 3270 VTAM sessions and HTTP sessions HTTP based on a Request/Reply behavior: one HTTP session
involves several requests
• Serves 3270 screen data to HTTP requests
8
3270 data stream
HTTP
Server
On-demand 3270 screen
images available in HTTP
Architectural options Mobile 3270 TE
9
What Where
HTTP connectivity Host (or Server)
User interactivity Client
Screen rendering ???
HTTP HTTP
Mobile device
WEB
UI
Host
HTTP Server
Architectural options: Mobile
Where should the rendering of the 3270 screen occur ?
10
Architectural Option Screen Rendering
Thin Client Host
Smart Client Client
Thin client architecture Screen rendering on host
• Portable screen rendering: HTML
• Browser native rendering language
• Efficient at rendering complex text layout
11
Web pages User display
WEB
Host
VTAM 3270 screen image
HTML + CSS
(+ JavaScript)
Application
Rendering HTTP/S
Thin client architecture Emulation implemented as browsing session
• Transforms 3270
screens into
webpages
• Sends user data
to mainframe
application
• Displays web pages
• User keystrokes sent to HTML <input
type="text"> fields
• When user hits ENTER (or PF key) <form> is
POST-ed to host,
host reply contains new
screen
12
GET /cics
CICS screen
as a webpage
POST PF=ENTER
screen as a
new webpage
POST PF=PF1
ENTER
PF1
screen as a
new webpage
Thin client architecture HTML templating
13
<html> <head>….</head> {{{ON-CHARACTER-ATTRIBUTE (REVERSE,BLUE)<span class='RBLUE'>}}}{{{ ON-CHARACTER-ATTRIBUTE (REVERSE,RED)<span class='RRED'>}}}{{{ ON-CHARACTER-ATTRIBUTE (REVERSE,PINK)<span class='RPINK'>}}}{{{ ON-CHARACTER-ATTRIBUTE (REVERSE,GREEN)<span class='RGREEN'>}}}{{{ ON-CHARACTER-ATTRIBUTE (REVERSE,TURQUOISE)<span class='RTURQUOISE'>}}} … <body><div> <form id=‚3270screen‛>{{{ GENERATE-HTML (1,1,1920) }}}</form> <span>{{{NAME-OF (PRINT-RELAY),8}}}</span> <span id="screenLines">{{{NUMBER-OF (SCREEN-LINES)}}}</span> <span id="screenColumnss">{{{NUMBER-OF (SCREEN-COLUMNS)}}}</span> <span id=‚cursor">{{{POSITION-OF-THE-CURSOR}}}</span> </div></body> </html>
HTML Template
Web pages
VTAM 3270 screen image
HTML + CSS
(+ JavaScript) Templates
Screen image
Rendering
Thin client architecture HTML templating
14
<html> <head> <script src=‚user-input.js‛/> <script> $(‘.inputFields’).click(function () { // do something }); </script> <link rel=‘stylesheet’ type=‘text/css’ href=‘3270style.css’ /> </head> {{{ON-CHARACTER-ATTRIBUTE (REVERSE,BLUE)<span class='RBLUE'>}}}{{{ ON-CHARACTER-ATTRIBUTE (REVERSE,RED)<span class='RRED'>}}}{{{ ON-CHARACTER-ATTRIBUTE (REVERSE,PINK)<span class='RPINK'>}}}{{{ ON-CHARACTER-ATTRIBUTE (REVERSE,GREEN)<span class='RGREEN'>}}}{{{ ON-CHARACTER-ATTRIBUTE (REVERSE,TURQUOISE)<span class='RTURQUOISE'>}}} …
JavaScript and CSS embedded into HTML Template
Thin client architecture Rendered screen
15
Web pages
VTAM 3270 screen image
HTML + CSS
(+ JavaScript) Templates
Screen image
<html><head> <script>…</script> <style>…</style> </head> <body> <form id="3270screen"> <pre> <span vt="O" vp="0" vr="1" vc="1" vl="27" class="NGREEN‚ autoskip=""> … <span vt="A" vp="27" vr="1" vc="28" vl="1" autoskip="1"> </span> … <span vt="O" vp="28" vr="1" vc="29" vl="36" autoskip="" class="NBLUE">Signon to CICS … <span vt="A" vp="64" vr="1" vc="65" vl="1" autoskip="1"> </span><span vt="O" vp="65" vr="1" vc= … <span vt="A" vp="71" vr="1" vc="72" vl="1" autoskip="1"> </span><span vt="O" vp="72" vr="1" vc= … … </pre> </form> <span>RHTIJM00</span> <span id="screenLines">24</span><span id="screenColumnss">80</span> <span id=‚cursor">2E9</span> </html>
Rendering result
JavaScript
HTML
CSS
Rendering
Thin client architecture 3270 emulation embedded anywhere
Easy to embed anywhere with <iframe> tag
16
17
Thin client architecture Pros
• Host manages 3270 data
• Fast: takes advantage of huge CPU power available
• Safe: screen or sensitive data may programmatically be
stripped from what is sent to clients
• Simple
• Same HTML delivered to all clients
• Universal device support: no custom development needed
18
Thin client architecture Cons
• Host CPU usage
• HTML-compliant bandwidth requirement
• Rendering is not device dependent (cannot take
advantage of specific device ergonomics: screen sizes,
input devices, …)
• Difficult to script an emulation session on user device
(user macros)
Only display data is available, not original 3270 data
19
Going truly mobile Putting intelligence in client
• Shift workload of rendering screen away from host
• Shift decision of what should be rendered where it
belongs, i.e. where display occurs
• Take full advantage of each device specific
ergonomics and computing power
20
Let client devices render the 3270 screens
Data on the wire versus display on the wire
Going truly mobile
Isn’t having screens rendered on client devices just going
back to old-style fat-client 3270 TE?
21
Not really
• Mobile-friendly interface between device and host
• Light: relies on universally installed client (browser-based)
“Full” emulation in JavaScript on client device made
relatively recently possible by:
• Browser advances (HTML5)
• Advent of the pocket supercomputer
Smart client architecture Screen rendering on mobile device
22
HTML5 +
CSS
Emulation screen
VTAM 3270 screen image
JSON data
format
JSON data
format HTTP
NETWORK
Host preformats 3270 data
stream
Device renders and
displays screen
Preformatting Rendering
Smart client architecture JSON format
• Recent but proven technology
• Lightweight
• Easy to read and write
• By computers
• By humans
• Native support by JavaScript engines
• Fast
• Easy to use
23
Smart client architecture JSON templating
24
{ "rlay": "RHTVJO03", "tran": "demo", "appl": "SPCICSQ ", "time": "20130619141450", "screen": { "rows": 24, "cols": 80, "cursor": { "field": "V000017B", "pos": "V000017B" }, "sna": "", "desc": [ {"n": "", "r": 1, "c": 1, "l": 8, "a": "ASKIP,PROT,NUM,NORM,MDT", "o": "NEUTRAL", "h": "OFF", "v": "DEMOM1 " }, {"n": "", "r": 1, "c": 10, "l": 0, "a": "ASKIP,PROT,NUM,NORM", "o": "NEUTRAL", "h": "OFF", "v": "" }, {"n": "", "r": 1, "c": 30, "l": 21, "a": "ASKIP,PROT,NUM,NORM", "o": "NEUTRAL", "h": "OFF", "v": " ** V.O.Y.A.G.E.S. **" }, …………… }
{{{GENERATE-VARIABLES (1,1,9920) "FIELD" }}} { "rlay": ‚{{{ NAME-OF (RELAY) }}}", "tran": ‚{{{ NAME-OF (TRANSACTION-EXTERNAL) }}}", "appl": "{{{CURRENT-VALUE-OF "APPLID" }}}", "time": "{{{ NAME-OF (DATE-TIME) }}}", "screen": { "rows": {{{ NUMBER-OF (SCREEN-LINES) }}}, "cols": {{{ NUMBER-OF (SCREEN-COLUMNS) }}}, "cursor": { "field": "{{{ FIELD-WITH-CURSOR }}}", "pos": "{{{ POSITION-OF-THE-CURSOR }}}" }, "sna": "{{{ NAME-OF (SNA-STATUS) }}}", "desc": [{{{ FOR-EACH-VALUE-IN "FIELDNAME" }}}{ "n": "{{{ TRIMMED-VALUE-OF "FIELDNAME" }}}", "r": {{{ CURRENT-VALUE-OF "FIELDLINE" }}}, "c": {{{ CURRENT-VALUE-OF "FIELDCOLUMN" }}}, "l": {{{ CURRENT-VALUE-OF "FIELDLENGTH" }}}, "a": "{{{ CURRENT-VALUE-OF "FIELDATTRB" }}}", "o": "{{{ CURRENT-VALUE-OF "FIELDCOLOR" }}}", "h": "{{{ CURRENT-VALUE-OF "FIELDHILIGHT}}}", "v": "{{{ CURRENT-VALUE-OF "FIELDVALUE" }}}" }{{{AFTER-NOT-LAST-VALUE-OF "FIELDNAME",}}} {{{ END-FOR "FIELDNAME" }}}] } }
Preformatting:
3270 screen
matched with
template
JSON Template Pseudo-3270 data image formatted in JSON
Smart client architecture JSON screen data
25
{ "rlay": "RHTVJO03", "tran": "demo", "appl": "SPCICSQ ", "time": "20130619141450", "screen": { "rows": 24, "cols": 80, "cursor": { "field": "V000017B", "pos": "V000017B" }, "sna": "", "desc": [ {"n": "", "r": 1, "c": 1, "l": 8, "a": "ASKIP,PROT,NUM,NORM,MDT", "o": "NEUTRAL", "h": "OFF", "v": "DEMOM1 " }, {"n": "", "r": 1, "c": 10, "l": 0, "a": "ASKIP,PROT,NUM,NORM", "o": "NEUTRAL", "h": "OFF", "v": "" }, {"n": "", "r": 1, "c": 30, "l": 21, "a": "ASKIP,PROT,NUM,NORM", "o": "NEUTRAL", "h": "OFF", "v": " ** V.O.Y.A.G.E.S. **" }, …………… }
9632
16763
Bytes on wire
Screen data size comparison
JSON HTML
Smart client architecture Application code structure
• Mostly JavaScript
• GUI in HTML and CSS
26
Client code installed on device
HTML
CSS
JavaScript
Smart client architecture App packaging and distribution
As web application:
27
GET WebApp
Web server
WebApp
Session data
Start 3270 session
Host Mobile device
WebApp
GET WebApp
Smart client architecture App packaging and distribution
Packaging as native application can be achieved with:
• PhoneGap
• Titanium
• …
28
Session data
Start 3270 session
Native
App
Mobile device Host
Smart client architecture Emulator code
29
GUI code
Emulation Core
GUI logic
HTML + CSS
+ JavaScript
Emulation Logic
Pure JavaScript program
Smart client architecture Emulator code
30
Same Emulation Core
pure JavaScript code
Android Nexus S Specific GUI
Emulation Core
iPad Specific GUI
Emulation Core
Non-Specific GUI
Emulation Core
Smart client architecture Emulation Core
Exposed JavaScript
API:
• login(‘transaction')
• request(‘ENTER’)
• disconnect()
• action('backspace')
• cols()
• rows()
• cursorPos()
• copy(from, to)
• paste(from, to)
• eraseEndOfField()
• inputText(‘text’)
• moveCursor("up");
• …
Broadcast events:
• screen:ready
• change:cursor
• keyboardLocked
• waitLocked
• …
31
Emulation Core
Screen
Model
Host
Host
Connection
HTTP
Smart client architecture Emulation session scripting
32
var connection = new HostConnection(), // Handles the connection to the Host
model = new ScreenModel(), // Stores and represents the screen data
// bind the connection to the model using a dedicated controller
session = new SessionController(connection, model);
model.once('screen:ready', function () {
// this gets executed when the first screen is received
model.setCursor({row: 26, col: 10});
model.inputText(‘USER1’);
session.request(‘ENTER’);
…
});
session.login(‘DEMOAPP'); // start the session to the application
Entering data into DEMOAPP first screen
Smart client architecture Emulation session scripting
33
var canvasView = new ScreenViewCanvas({
model: model,
el: ‘#3270screen’
});
var textView = new ScreenViewText({
model: model
});
With an HTML5 canvas embedded
into a web page
As a text displayed into the browser
console for debugging purposes
34
Summary
35
Thin Client Smart Client
Communication protocol HTTP (over TCP/IP) HTTP (over TCP/IP)
Screen rendering On Host On Client
Data format HTML + CSS
(+JavaScript)
JSON
Type of data Rendered screen image 3270 fields
Support device-specific
features
Difficult Easy
Support of new devices Instant May require
development
Screens responsiveness Very fast Depends on device
Application type Web page Web page, Web app,
native app in app store
Summary
36
Smart client? Thin client Fat client
• Few years back: Fat client Thin client
• Thin client is “lighter” and easier to maintain
• Now: Smart client?
• Best of both worlds to offer
Thank you!
Questions?
37
Icons under Creative Commons Attribution 3.0 License:
IcoMoon by Keyamoon http://icomoon.io
Glyphs by WebHostingHub http://www.webhostinghub.com/glyphs/
Booth #521 louis.jolibois@syspertec.com
@LouisJolibois
patrick.fournier@syspertec.com