Introducing EWD’s new Real-time Web Framework

One of the most exciting and potentially game-changing technologies that was introduced with HTML5 is WebSockets.  WebSockets allow a browser to instantiate a bi-directional, event-driven socket connection to the back-end, allowing it to break free of the many limitations of the HTTP protocol.  What it makes possible is often referred to as the ‘real-time web’: a much more dynamic and powerful way for a browser and back-end database to intercommunicate.

In earlier postings I’ve talked about the server-side implementation of Javascript called Node.js, and how it is a natural fit with the Mumps database technologies (Caché and GT.M) and offers the opportunity to replace the ageing Mumps language.  One of the other great features of Node.js is that it has supported WebSockets since its early days: most Node.js developers use a module called socket.io.

I’ve been working with WebSockets for quite some time, and I’ve concluded that it’s going to change the way we think about and design browser-based applications.  I therefore wanted to enhance my EWD framework and ewdGateway2 module to create a real-framework that is easy and intuitive to use, and which interoperates easily but powerfully with a Mumps database.

That work is now complete.  It’s incorporated in the new release of EWD – build 960 – which is available now for download.  Build 960 also includes the ability to write EWD applications entirely in Javascript – ie without the need for  a developer to write Mumps code.  The combined result is still making my own jaw drop!  This is incredibly powerful technology, and combined with the power and flexibility of the Mumps database technology, it’s a very potent mix.  I’m going to write about how you can use this technology for yourself in this and my next few postings.

However, I’m a strong believer that seeing is believing: it’s all very well reading about exciting new stuff, but much more interesting and thought-provoking if you can get your hands on it for yourself and see pre-written examples working before your own eyes.  So with that in mind, I’ve also developed and released an EWD application that is designed to manage and monitor the Node.js-based ewdGateway2 module.  This application, also named ewdGateway2, is not only very useful in its own right, but has also been designed as a showcase application, demonstrating and making extensive use of all the latest real-time web features of EWD.  For example:

  • the application is written entirely in Javascript, including the back-end onBeforeRender methods.  All interaction with and manipulation of the back-end Mumps database is done in Javascript code.
  • the application is entirely WebSocket based, operating in real-time.  Not only does the Node.js-based ewdGateway2 module update the browser-based application in real-time, but events within the Mumps database (eg EWD Session starting and stopping) are also communicated to the browser as they happen.  There’s no polling from the browser-side – updated information is pushed to the browser as it happens.  Similarly, the browser communicates with Node.js and the back-end Mumps database via WebSocket events.

The result is an application that effectively demonstrates how a browser can now be used as a process control and monitoring user interface.

The good news is that you can download it in source format and try it out for yourself.  My next two articles will explain how to install it and get it running with Caché and GT.M respectively, the latter on a dEWDrop installation.

The other great thing about this application is that it provides developers with examples of all the ways in which they can use and exploit WebSockets, and demonstrates how to write EWD applications entirely in Javascript.  I’ll be documenting the APIs, of course, but I always find that examples are always as valuable as documentation.

So let me conclude this introductory article with a few screenshots to whet your appetite, and a brief description of the main behaviour.  When you log in, the main view looks like this:

Screen Shot 2013-03-11 at 19.11.03

The first thing to notice is that this is an ExtJS-based application, making use of EWD’s powerful and easy-to-use built-in ExtJS custom tags.

You’ll see at the top left, a panel that confirms the versions and build numbers of the modules and technologies that are running behind the scenes – this information is pushed from both the Node.js layer and the back-end database as soon as the browser signals that the UI is ready.

Also at the top is a live display of the child processes, showing the number of incoming requests that they’ve each handled.  That count is updated in real-time by the Node.js-based ewdGateway2 module.

Below this in the main panel is the console display, pushed in real-time by the ewdGateway2 module to the browser.  Note that the ewdGateway2 module can be configured to run silently as a service, but can nevertheless report its progress and diagnostic messages to this application’s console.  The logging level and destination can also be adjusted – if preferred, the logging information can be piped instead to a text file.

Clicking the Memory Use tab brings up a chart that is updated by the ewdGateway2 module at regular intervals that you can modify.  This chart allows you to check for memory leaks or unusual behaviour.  You can get detailed information by running the mouse over any of the lines:

ewdGateway3

Last, but not least, is the EWD Sessions tab which brings up a grid showing the currently-running EWD Sessions.  This is updated in real-time by EWD (ie from within Caché or GT.M) as soon as a new session is started by a user or a timed-out one is deleted by EWD’s session garbage-collector.

You can drill down into each session and view the current EWD Session contents, displayed as an expandable tree menu to the right of the grid.

Screen Shot 2013-03-11 at 19.24.34

I’m sure that there are many applications for this kind of real-time display of processes, particularly in healthcare.  In subsequent articles you’ll discover just how quick and easy EWD now makes it to build such applications.  And, of course, it’s up to you whether you write those applications in Javascript or Mumps code (or a combination of both).

EWD, in combination with Node.js, the ewdGateway2 module and the Mumps database technology is now all you need to create highly-responsive, leading-edge, real-time browser-based applications.  The future of application development, now in your hands!

Advertisements

2 comments

  1. Raymond M. Subasic · · Reply

    This looks like a game changer. Thanks again for your ongoing, pioneering contributions to the web/Mumps space.

  2. Absolutely a game changer.

    Anyone else on Cache having “Access to ____ is not allowed” when trying to login to the ewdGateway2 application on Rob’s github?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: