Mobile Interfaces to Mainframe Applications - Architecture Considerations

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

• Email

• 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


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


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

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


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

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 [email protected]

@LouisJolibois

[email protected]

http://icomoon.io/

http://www.webhostinghub.com/glyphs/

mailto:[email protected]


https://twitter.com/LouisJolibois

https://twitter.com/LouisJolibois


Mobile Interfaces to Mainframe Applications - Architecture Considerations

Technology

Transcript of Mobile Interfaces to Mainframe Applications - Architecture Considerations