Putting it all together

I was chatting to Tony Amies, product architect at William Data Systems, about the best way to get information from a mainframe (and about what’s happening on that mainframe) out to someone who has access to a browser. He had a number of nifty techniques that I’d like to share with you.

Assuming you want to get the information from your mainframe to a browser, your first really big decision is do you want to go with two-tier architecture, or do you want to go with three-tier architecture? Tony’s advice was that two-tier was enough.

That leads to the second really important decision to be made, which is where should the processing take place? You’ve got to look at what needs to be done and then make a choice about which platform does that work best on. So, for example, and perhaps quite obviously, if you want to monitor what’s going on with IP, FTP, or EE (Enterprise Extender) on your mainframe, you want that processing to take place on the mainframe. That all seems fairly easy!

But what do you want to do with your results from those different monitors (and indeed any other monitoring software you have running)? Do you want to look like mission control and have a 3270 screen for each monitor that’s running. Now, I remember how impressed visitors used to be when they saw something like that, but if my plan is to get the information to laptop or tablet device running a browser, then I probably need to consolidate the different feeds first. And, again, I want to do that on the mainframe, in the same LPAR (Logical PARtition) that the monitors are running in. It makes sense because much less work has to be done than if I choose to send that data somewhere else for processing.

If you’re familiar with WDS products, you know about their ZEN monitor for their other products. They’re written in Assemble and C and they use a little DLL inside each product that talks to a DLL in ZEN and you can see a nice display of what’s going on – on everything. As a side note, using the DLLs allows the products to talk to each other, so that if the IP monitor spots something, then the IP trace tool can be used to investigate further.

So, using the two-tier architecture, ZEN is logically split into two parts. One part is mainframe friendly and one part is Web friendly. Associated with the Web-friendly part of ZEN are the necessary JavaScript libraries and JQuery libraries, and the usual HTML bits. If you’ve not come across JQuery before, it’s like a lot of clever JavaScript that’s been already written that you can use to make your Web site look very modern. Lots of sites use the jQuery lightBox plugin to show photos.

There’s always a problem with busy Web pages in that lots of information has to come from the server to the browser, resulting in lots of network traffic – and if you’re monitoring your mainframe’s network from a browser there can be even more. So the first technique they’ve used is AJAX (Asynchronous JavaScript and XML), which means that only the parts of the Web page that have changed are sent, the rest of the page stays the same. They also use JSON (JavaScript Object Notation) as a lightweight data-interchange format.

But there’s always an issue with any User Interface and that’s how to separate the actual user interface itself from the business logic behind it. In technical terms, these are known as the view model and the data model. To make this work as effectively as possible, they’re using MVVM (Model View ViewModel), which is a framework or architectural pattern coming originally from Microsoft, but now extended to include JavaScript MVVM. You can get a clearer idea of the sorts of things they’ve done – and perhaps the sorts of things you could do from knockoutjs.com. The site describes itself as “simplifying dynamic javaScript UIs by applying the Model-View-ViewModel (MVVM) pattern”. The WDS developers also familiarized themselves with prototypejs.org, a site describing itself as “a foundation for ambitious web user interfaces”. They go on to say: “Prototype takes the complexity out of client-side web programming”.

For WDS, basically an object is requested from the browser by the user. This goes up to ZEN. Using JSON, a data object comes down and binds with the layout defined in the MVVM skeleton. As a user, you see dynamically updated information in your browser. If one new value affects other values, those other values are automatically update appropriately.

I’m not endorsing WDS’s products, I’m saying that they have very effectively made use of the very latest technology at the browser end to make their product work very efficiently. I’m suggesting that the two-tier architecture with really clever stuff on the browser side is definitely worth taking a look at.

Making it look nice for CICS users

Let’s look at an archetypal MVS site. Kenny wrote most of the original Assembler and quite a bit of the COBOL code that drove the business all those years ago. He was a big man and a real hippie. He even came to work in his sandals and decorated his office with album covers. He thought that writing comments in code was just a waste of time. Doug, who took over from Kenny was an absolute troglodyte. Whereas Kenny was fun to go for a drink with – and boy could he drink – Doug was forever under the floor connecting high speed back-up technology that no-one else really understood. He was great because he’d help everyone with code problems, but he seldom turned up to meetings or understood the concept of budgets. But everything worked like a dream and the company made money.

Nowadays we’ve got Ross heading up software on our z/OS CICS system. He does attend meetings – lots of them. He’s on the committee at a local user group and he’s given presentations at SHARE. He’s even got a wife and children! The problem is that much of the code that Ross looks after is quite old and doesn’t have many comments. There was an effort in 1999 to document everything, but it’s now out-of-date since the SOA (Services-Oriented Architecture) project.

The trouble at many sites is that their Ross is kept very busy at the mainframe end of his CICS system and thinks that the bit of AJAX on the Web browser front-end is enough to keep the end users happy. The truth is, end users are never happy! So what if someone at a conference told Ross there was an easy way (well, perhaps not easy, but fairly straightforward certainly) to make the end user experience of his CICS applications look like it was written in 2012 and not 1912!?!? Do you think Ross would be interested?

Before we look at what this amazing solution might be, let’s briefly look at Web design. Back in 1999, a Web site was pretty much made up of static pages. Someone wrote the pages in HTML and, over time, people updated the information on those pages. Then we had PHP and MySQL. This provided a database that users could update as necessary, and the PHP pages pulled out the latest information. They still looked like static pages, but they were easier to update. Then, we had JavaScript that gave us programming capabilities and all the flexibility that goes with that. Then we had JQuery, which was JavaScript with all the hard work already done for us. You’ve seen Web sites with JQuery-like effects – the ability to click on a thumbnail image and see it large in the middle of the page while much of the rest of the screen is covered with a semi-transparent layer. An example would be clicking on a photo in Facebook.

So let’s tell Ross about the Dojo Toolkit from the Dojo Foundation. Now at Version 1.7, the Web site at http://dojotoolkit.org/ says: “Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.” Now, suppose there was some way to plug that into CICS. So while Ross was looking after the CICS applications, Dojo was making sure that the end users had a good experience.

The Virtual CICS user group (www.fundi.com/virtualcics/) heard from Stephen Mitchell, Managing Director of Matter of Fact Software Limited, earlier this month. He gave a talk entitled: “Utilizing the Dojo Toolkit for Web browser-driven applications from CICS”, which really got to grips with how CICS and the Dojo Toolkit could be integrated. The base functionality of the Dojo Toolkit is made available to a Web page by including a link to dojo.js. This includes plenty of features like CSS-based queries, event handling, animations, AJAX, class-based programming, and a package system that makes getting access to the rest of Dojo very easy.

There are additional stable (but optional) components for advanced animations, I/O, data, drag-and-drop, and much more with Dojo Core. Dijit is Dojo’s theme-able, accessible, easy-to-customize UI library. Dijit requires Dojo Base and various Dojo Core modules to use. It allows for the creation of widgets. For the more adventurous, there’s DojoX, which contains a number of sub-projects based on the Dojo Base. Each project has a varying states of maturity – from very stable and robust to alpha.

Stephen’s company recognized a need to control the Dojo Toolkit that was being used by their PlexSpy application status monitor product. And they decided that if it was an issue for them, it was most likely an issue for others. So they created a generic server solution that could be used by anyone with CICS on z/OS. As a consequence, the Dojo Toolkit has been taken into the mainframe environment and is served from CICS out of PDSs. This brings the strengths of the mainframe to sites using the Dojo Toolkit – providing the control over it that those sites needed.

Ross can now put his feet up at home with his family knowing that his end users are happy with their working environment. And the code Kenny and Doug wrote is still doing its job for another generation.

Web futures – they are among us

Rule number 1 of the Internet is, of course, that there are no rules – but if there were, it would be that the Internet is always changing and evolving. While some people have only just started to use style sheets and XHTML, others are pushing the envelope with CSS3 and HTML5. I want to have a quick look at what this all means. 

There was a time when HTML5 seemed like something in the far future, but now Apple (purveyors of the unbelievable fascist iTunes and lots of really cool gadgets) claims that there’s no point worrying about the fact Adobe’s Flash doesn’t run on their iPhones because it will be sidelined when HTML5 is adopted. GoogleWave, the collaboration and communication software from Google, already uses HTML5.

In addition, many currently available browsers allow the clever new stuff in CSS3 and HTML5 to work already. Opera and Safari provide support. Firefox from Version 3.5 supports HTML5. And Explorer Version 8 does a bit, and the proposed Version 9 will do more.

CSS3 is simply the next generation of style sheets and it offers loads of clever stuff. The most exciting one – certainly for those of us who have developed Web sites using multiple images to achieve the same effect – is rounded corners. You can now have boxes with varying ‘roundnesses’ of corners (except in Explorer where they’re still square). You can specify a radius value and that affects how round the corners are. It also now becomes very easy to use borders. 

The downside, at the moment, is that each piece of code needs to be repeated. Look at:
-moz-box-shadow: 3px 3px 3px #6c3;
-webkit-box-shadow: 3px 3px 3px #6c3;
-box-shadow: 3px 3px 3px #6c3;
The top line adds the shadow for Mozilla browsers (like Firefox). The second line issues the same commands for WebKit browsers (such as Safari and Chrome). The third line is for those browsers that already support the CSS3 standards (and that’s Firefox 3.1 and above and Safari 3 and above).

In addition to these tags, other, much longer, tags are available containing the word ‘Microsoft’ at the beginning. But this isn’t an anti-Microsoft rant (this week!), the excellent word-wrap tag is a Microsoft one.

There are lots of other clever CSS3 tricks in development too. You can create drop shadows, do impressively clever things with gradients, and make text become more transparent as you mouseover it. Have a look at http://css3generator.com/ and http://css3please.com/ for some excellent examples.

HTML5, as well as potentially making Flash (and Silverlight come to that) redundant, provides a way to make Web applications more easily available. It is much more than a simple mark-up syntax for documents. HTML5 now contains tags for things like navigation (nav), headers, footers, articles, and sections. Explorer is the only fly-in-the-ointment (as it were), which will come as a surprise to no-one. Explorer needs a bit of JavaScript in order for CSS to style the page. Something like document.createElement("nav"); is required for each of the new tags.

And the doctype to use at the top of your document is <!DOCTYPE html>. And handily – for those people who never quite got the hang of closing tags – you can just close with a ‘>’, you don’t need ‘ />’ as with XHTML.

HTML5 can offer developments in Web forms. There are video and audio APIs. There’s a drag-and-drop API with a draggable attribute. ‘History.pushState’ can be used with AJAX apps to give better back–button support. There’s also a 2D drawing API for scripting graphics using the new canvas element. In fact there’s loads of new good stuff with more being added all the time. And did I mention the Geolocation API? I should have – it definitely adds the “wow” factor.

Lots of people will be wanting to use the new APIs, and Web pages for people using appropriate browsers will be appearing more and more. Look out for it!