Mobile Interfaces to Mainframe Applications - Architecture Considerations
Upcoming SlideShare
Loading in...5
×
 

Mobile Interfaces to Mainframe Applications - Architecture Considerations

on

  • 798 views

One of the challenges when designing mobile user interfaces for mainframe applications is deciding where the code should reside: on the host, on a middle-tier server, on the client, or on a ...

One of the challenges when designing mobile user interfaces for mainframe applications is deciding where the code should reside: on the host, on a middle-tier server, on the client, or on a combination of those platforms. Thin-client apps are simpler to deploy and support, but they can't deliver native client ergonomics as client apps do. This presentation will expose two architectures used by SysperTec to develop a 3270 TE interface for tablets (iPad, Android, etc): one that relies on client architecture, and one that relies on a self-loading client app. It will compare the benefits and challenges of both architectures.

Statistics

Views

Total Views
798
Views on SlideShare
190
Embed Views
608

Actions

Likes
0
Downloads
2
Comments
0

4 Embeds 608

http://www.syspertec.com 268
http://virtelweb.com.syspertec.dev 137
http://www.virtelweb.com 124
http://syspertec.com.syspertec.dev 79

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Interfaces to Mainframe Applications - Architecture Considerations Mobile Interfaces to Mainframe Applications - Architecture Considerations Presentation Transcript

  • 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 HTTPTN3270 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="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; … <span vt="A" vp="27" vr="1" vc="28" vl="1" autoskip="1">&nbsp;</span> … <span vt="O" vp="28" vr="1" vc="29" vl="36" autoskip="" class="NBLUE">Signon&nbsp;to&nbsp;CICS&nbsp; … <span vt="A" vp="64" vr="1" vc="65" vl="1" autoskip="1">&nbsp;</span><span vt="O" vp="65" vr="1" vc= … <span vt="A" vp="71" vr="1" vc="72" vl="1" autoskip="1">&nbsp;</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 HostMobile 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 clientFat 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