46
Agile VistA Development using EWD Rob Tweed M/Gateway Developments Ltd http://www.mgateway.com Twitter: @rtweed

Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Agile VistA Development using EWD

Rob TweedM/Gateway Developments Ltd

http://www.mgateway.comTwitter: @rtweed

Page 2: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

A bit about me• 1980s:

– Lead Mumps developer at Royal MarsdenHospital, London: Hospital Information System

• Early 1990s: Management consultant at

Touche Ross, London• Major NHS Networking project for UK Dept of Health

• Mid-1990s – present:

– Caché/Mumps web app framework developer

– Javascript expert

– Internet technology industry watcher

Page 3: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

A bit about me

• Pioneer of web development for Mumps

& Caché

– WebLink & WebLink Developer

• Sold to InterSystems: 1996

– Consultant for early CSP design

– Assisted most of InterSystems' major

customers worldwide on Web Application

design & development

Page 4: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

A bit about me

• Author of EWD

– 2004 – present

Page 5: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

What is EWD?

• Extremely Agile web application development framework– Desktop web applications

– Mobile web applications• Look and behave like Native Apps

• Primarily designed for use with:– Caché/Ensemble

• new & legacy Mumps applications

– GT.M

Page 6: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Why use EWD?

• Prevents people wasting time reinventing wheels:– Security– Session/state management

• Creating an illusion of a stateful environment from a stateless one

– Integration of browser/web-server and Caché or GT.M

• Gives everyone instant access to proven, tried and tested solutions for these crucial areas– Reduces learning curve– Reduces risk

Page 7: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Why use EWD?

• Automates everything that can be automated:– Saves developer time, and therefore reduces

development costs

• The fastest and simplest way to develop web applications

• Integrates and massively simplifies the use of the very latest Javascript frameworks– State of the art applications

• HTML5 & CSS3

• Ajax

• Web-sockets (realtime web)

Page 8: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Tried & Tested

• Last 5 years:

– EWD has supported the world's largest

Internet-facing Caché-based web

application

• Quest Diagnostics Care360 EziOrder

– 30,000+ concurrent users

– 500,000 test requests/day

– 24 X 7 operation with no breakdowns or incidents

– No security breaches

Page 9: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

The EWD Pedigree

• Stable

• Secure

• Highly scalable

• High Performance

Page 10: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Design Goals of EWD

• Conceptual Simplicity

• Architectural Simplicity

• Design-centric

• Speed of development

• Ease of maintenance

• Embodiment of nearly 20-years experience of developing Enterprise-grade web applications

• Addresses all areas of my dissatisfaction with IT industry's solutions

Page 11: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Conceptual Simplicity

Designing a dynamically

generated page should be

no different, conceptually,

from designing a static one

Page 12: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Architectural Simplicity

• As few moving parts as possible

• Safety

• Maintenance

• Reliability

• Cost

Page 13: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Design-Centric

• Design, not programming, is what makes great

applications

• Clear separation of Design from Programming

• Reduce programming to trivial levels

Page 14: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Speed of Development

• Development times should be orders of magnitude faster than normally expected

Page 15: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Ease of Maintenance

Page 16: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

The Importance of Maintenance• 1 day of coding will cost 13 days of maintenance

• ie less coding is good

• Fewer moving parts and layers means that one person

can understand the entire application

Page 17: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Key features of EWD

• User Interface Tier (UI)

• Middle Tier

• Back-end Tier

Page 18: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

UI Tier

• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI

• Which Javascript framework to use?– ExtJS

– Sencha Touch

– jQuery

– YUI

– Dojo

– etc

Page 19: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Javascript Frameworks

• Steep learning curve

• Complex, non-intuitive code

• Describe how, not what

– Difficult to maintain

• Programming

– One developer's code is another's nightmare

– Infinite degrees of freedom in coding

– Cut & Paste Development

Page 20: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

EWD: UI Tier

• Framework agnostic– "uber framework"

• Abstracts complex Javascript to XML Tags– Reduced learning curve

– Simpler, much faster development

– Easier to read, write and understand

– Easy to maintain, even by a different developer

• Custom Tags– Encapsulate widgets in re-usable tags

– Avoids cut & paste development

• Ajax "Fragments"– Complex UI broken down into small, easy to understand, pieces

Page 21: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Example EWD/ExtJS UI

Page 22: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Middle-tier

• Conceptual only

• Automated integration of client-side Javascript to:

– Legacy Mumps

– Caché/Ensemble

– Node.js

• As a bridgehead to:

– EWD (for realtime web using websockets)

– Other databases and languages

Page 23: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Middle Tier

• UI and Back-end are deliberately de-coupled,

with "EWD Session" as middle ground

EWD

“Back-end”

GT.M / Caché

db

EWD

Session

Programmer

myVarPre-page

script

EWD Page

<?= #myVar ?>

Designer

setSessionValue^%zewdAPI

Page 24: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Page designer

EWD PageEWD

Session

Display Data

myVar<?= #myVar ?>

?

- UI Designer doesn't need back-end skills

- UI can be initially designed with a simple, spoofed back-end

Page 25: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Programmer

EWD

“Back-end”

GT.M / Caché

db

EWD

Session

Fetch Data

myVarPre-page

script

setSessionValue^%zewdAPI

?

- Back-end developer doesn't need UI skills

- Back-end can be changed without any impact on UI

Page 26: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Design-centric Development

• Designer is key, and stays in the loop, during and after development

• Programming is reduced to:

– moving data between the database and

Session

– Invoking legacy functions to get/fetch/validate

data

Page 27: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Conceptual Widget Integration

• Javascript UI widgets are mapped to EWD

Session Arrays

– Designer doesn't know or care how data is created

– Programmer maps database information to simple, intuitive multi-dimensional arrays that map directly to

JSON

<ext4:gridPanel title="Simpsons" height="200"

width="700" sessionName="simpsons" />

Page 28: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Back-end Tier

• Mumps/ GT.M / Caché / Ensemble

• Physical Integration:– Traditional web server + passive gateway

• IIS, Apache, nginx

• WebLink, CSP, m_apache

– Node.js

• ewdGateway Module for access to Mumps / Caché / Ensemble

• Websockets support for realtime web

• Other Node.js modules for RDBMS and NoSQL access

Page 29: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Back-end Tier

• Seminal Paper, March 2010:– A Universal NoSQL Engine, Using a Tried

and Tested Technology• Rob Tweed & George James• http://www.mgateway.com/docs/universalNoSQL.pdf

– The Mumps database is an extremely high-performance NoSQL database that has the combined capabilities of all 4 categories of NoSQL Database:

• Key/value

• Document

• Columnar

• Graph

Page 30: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Back-end Tier

• Also mapped in Cache to:

– RDBMS

– Object Database

• EWD adds:

– Native XML Database / DOM

• Conclusion: This is a greatly mis-understood

and under-rated database technology that is

ideally suited for underpinning web applications

Page 31: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

No other technology layers needed

• Contrary to popular belief, there is no need for

any other technology layers

– NOTHING to be gained by grafting on other

technologies, middle tiers, NoSQL databases or languages (with the exception of Javascript)

– Lots of reasons NOT to add additional layers:

• Reduced performance

• Reduced scalability

• Increased complexity, so decreased maintainability

• Increased cost

Page 32: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Compare complexity of aJ2EE

architecture:

Page 33: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

With the Simplicity of a

Caché/Mumps web architecture

Browser Web ServerHTTP

Response

Passive gateway

Caché / Ensemble / Mumps

Web Application

Management

EnvironmentCorporate Applications

Session Storage

Page 34: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

With EWD as the Framework:

Browser

Web

Server

(Apache/

IIS)

Gate

way

Caché

http/

httpsW

ebLin

kin

terfa

ce

Caché

CS

P in

terfa

ce

Gate

way

EWD

Runtime

VistA

Page Scripts

EWD

Pages

EWD Session

Store

Caché, Ensemble or GT.M

These are all that need to be developed

Page 35: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

EWD: Already in use with VistA

• WorldVistA web development framework of

choice

• Used to develop VistACom

– Small, agile development team

– Key to attaining Meaningful Use Stage 1 accreditation

– In daily use at Oroville Hospital

• Denver Acquisition & Logistics Center (DALC), a

tenant unit of the Dept of Veterans Affairs (VA)

• Basis of SMART App integration for VistA

Page 36: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Agile Development using EWD

• Case Study:– 2012: 1 Clinician, 1 Developer, 10 days

– http://clinuip.wordpress.com

– Clinician: Dr Tony Shannon• Consultant in Emergency Medicine

• Chief Clinical Information Officer, Leeds Teaching Hospitals, UK

• Fellowship in Informatics

– Developer: Chris Casey• Mumps/Caché/GT.M/EWD developer

Page 37: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Aim of the Project

• To broadly ask the question:

– How much of a Clinical Portal could be

designed, developed and implemented in 10-

days by a clinician and developer who are

working closely together?

• Agile development approach

• Open Source tools and technologies

– EWD

– GT.M

– ExtJS v4 (using EWD's custom tag library)

Page 38: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Answer?

• Pretty much a complete Clinical Portal!

– 3 tier

• Hospital overview (aggregate high-level view)

• Patient Group sub-view

• Individual patient view (episodes)

• Read/write

• Results can be seen and tried out for yourself:

– Live on an Amazon EC2 server:

– http://ec2-184-73-102-27.compute-1.amazonaws.com/ewd/leeds/index.ewd

Page 39: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch
Page 40: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch
Page 41: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch
Page 42: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch
Page 43: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch
Page 44: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Conclusions

• EWD's productivity is orders of magnitude higher than ANY other web application development framework

• Ideally suited to rapid desktop & mobile UI development to modernise VistA

– No need for one UI fits all

• Custom UIs for different categories of user

Page 45: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

Conclusions

• EWD ticks all the boxes:

– High productivity

– High performance & scalability

– Highly secure

– Tried & tested technology

– Latest modern UI techniques (desktop & mobile)

– Low maintenance overhead

– Design-orientated

– Easy back-end development & integration

– Requires no change to VistA itself

Page 46: Agile VistA Development using EWD - M/Gateway• HTML5 + Javascript + CSS3 allows browsers to provide a very rich UI • Which Javascript framework to use? – ExtJS – Sencha Touch

More information

• http://www.mgateway.com– See "key documentation"

• ExtJS v4 tag library

• Sencha Touch 2 tag library (coming very soon)

• http://www.mgateway.com/ewd.html

• https://github.com/robtweed/EWD– Open Source version for GT.M

• dEWDrop VM– http://www.fourthwatchsoftware.com/