3rd party

Cerner Mpages ConferenceMay 2011

Using 3rd Party Software with Mpages

Becky PeltzSeattle Children's

1Seattle Children's MPage Conference 2011

Outline

• Survey of 3rd Party JavaScript Libraries

• My Development Experience

• Seattle Children’s Environment

• Example from Seattle Children’s Patient Summary MPage

• How Ext helps us in other ways

• # of PowerPoint Slides: 35


PollHow many use...

•Pure Javascript

•JQuery

•Prototype

•Mootools

•Ext JS

•Others


JQuery 42%http://trends.builtwith.com/javascript


JQuery 32% http://w3techs.com/technologies/overview/javascript_library/all


Results

Library Percent Using

Pure Javascript 58 %

JQuery 32 %

Prototype 5 %

MooTools 5 %

Ext JS .1%


Why use anything but JQuery?

Seattle Children's MPage Conference 2011 7

Feature Analysis not very usefulfrom http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks


No “Bad” Libraries


Pure JavascriptJavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript, is one of the world's most popular programming

languages.

+

It’s Pure JavaScript!

Complete control

Can get better performance

-

Lots of browser checking

Lots of testing to do on your own

Can become very complex

Can be difficult to maintain

It’s a language - Nothing to do with Browser


jQueryjQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and

Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

+

Big community of developers

Lots of plug-ins

Well tested

Easy to maintain

Small ‘footprint’

Easy to play with DOM

Effects

Aims to be easy to develop with

It’s a toolkit not a framework

-

Code can get ‘smelly’ with chaining, embedded HTML and concatenated selectors

Use of ‘this’ and closures

It’s a toolkit not a framework


PrototypePrototype is a JavaScript Framework that aims to ease development of dynamic web application.

+

Framework

Extends DOM and core JS

Lots of Utility functions

Class based inheritance facility

-

Learning curve

Code size

Performance

Namespace pollution


MooToolsMooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript

developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

+

Framework

Class

Code reuse

Play with JavaScript

Code more explicit

-

Learning curve

Manipulate prototypes of natives

Code more verbose


Ext JSJavaScript Framework for Rich Apps in Every Browser.

+

Container model Framework

Easily configured ‘panels’

Ext JS Objects are easily extended

Version 4 provides MVC architecture

Code reuse

-

Learning curve/Experienced developer

Lots of JavaScript and CSS to download

Commercial License


My Background and Why it Matters in this Presentation

There are a lot of web server component developer like me in Seattle

- but not a lot of JavaScript component developers


My Development Experience: Why it Matters


Seattle Children’s Environment

• Team of 5 (2 JS specialist, 3 CCL specialists)

• Locally hosted file servers

• Framework: Ext JS v. 3

• First MPage:

• deployed September 2010

• Patient Summary (Inpatient and Ambulatory)

• Second MPage

• deployed April 2011

• Ambulatory WorkListSeattle Children's MPage Conference 2011 17

Picture of Patient Summary MPage


Ambulatory Worklist


MPages

MPages exist so that users can create new functionality

• quickly

• for site specific functionality

• for functionality not available in Millenium


We're going live in 2 weeksCould we graph lab results?


Problems in adding Lab Graphs

• Ext JS v 3 relies on Flash install

• Need to choose a charting library

• My experience with Ext JS was limited

• The design:

• Click on a row in the lab results grid

• Open up a ‘panel’ that renders a graph


Lab Results


Click on a row to see Graph


How do we create graphs?

• Ext JS framework for layout

• jQuery adapter for Ext JS is required (provided) in v. 3 of Ext JS

• Ext JS Row Expander to create container

• HighCharts for graph http://www.highcharts.com/

• jQuery because HighCharts used it


Simple Logic


Another use for same technique:graphing Meds against blood level


Click on graph icon to popup window


Key Points about integration

• Ext JS is in charge of creating and naming the container (provide component ID)

• HighCharts is in charge of creating elements and styles necessary to render chart

• HighCharts provides a ‘Render to’ method that we can hand the container ID to


Some Other Problems And Solutions

• How can we quickly configure panels: Abstraction vs Factory Pattern

• How can we have multiple developers working on a page

• How can we manage DOM ID’s


Quickly Configure Panels

Abstract Pattern Factory Pattern


Multiple Developers

• Separate file for each Panel Factory

• A script that

• concatenates

• lintifies

• minifies


Manage DOM ID’s – immediate function with Ext Namespace


Summary

• 3rd party makes JS more like a Server Side application problem

• Developers can work with a well designed framework

• 3rd party is pre-tested and helps us solve application and infrastructure problems

• Integration is not difficult


Epilogue

Sencha 4

MVC

New Graphs


3rd party

Technology

Transcript of 3rd party