This document discusses architectural options for providing mobile access to mainframe applications. A thin client architecture renders 3270 screens on the host as web pages, while a smart client architecture preformats 3270 screen data into JSON on the host and renders it natively on mobile devices. The smart client approach improves responsiveness and allows leveraging device-specific features, while the thin client is simpler but relies on the host for rendering. Both aim to provide universal access to mainframe applications from any mobile device through a browser.
Advantages of Hiring UIUX Design Service Providers for Your Business
Mobile Interfaces to Mainframe Applications - Architecture Considerations
1. Mobile Interfaces to Mainframe
Applications – Architecture
Considerations
Louis JOLIBOIS
Patrick FOURNIER
(SysperTec Communication)
Monday, August 12, 2013 @ 1:30 PM
Session # 13455
2. 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
3. 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
4. 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
5. 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
6. Browser-based 3270 TE
Accessing mainframe applications from the web browser:
What are the architectural options?
Where should the code reside?
6
7. 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
8. 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
9. 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
11. 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
12. 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
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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
26. Smart client architecture
Application code structure
• Mostly JavaScript
• GUI in HTML and CSS
26
Client code installed on device
HTML
CSS
JavaScript
27. 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
28. 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
29. Smart client architecture
Emulator code
29
GUI code
Emulation
Core
GUI logic
HTML + CSS
+ JavaScript
Emulation Logic
Pure JavaScript program
30. 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
32. 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
33. 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
35. 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
36. 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
37. 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