3rd party

Cerner Mpages Conference May 2011 Using 3 rd Party Software with Mpages Becky Peltz Seattle Children's Seattle Children's MPage Conference 2011

Outline
Survey of 3 rd 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
Seattle Children's MPage Conference 2011

Poll
How many use...
Pure Javascript
JQuery
Prototype
Mootools
Ext JS
Others

JQuery 42% http://trends.builtwith.com/javascript Seattle Children's MPage Conference 2011

JQuery 32% http://w3techs.com/technologies/overview/javascript_library/all Seattle Children's MPage Conference 2011

Results Seattle Children's MPage Conference 2011 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

Feature Analysis not very useful from http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks Seattle Children's MPage Conference 2011

No “Bad” Libraries Seattle Children's MPage Conference 2011

Pure Javascript JavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript, is one of the world's most popular programming languages. Seattle Children's MPage Conference 2011 + 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

jQuery jQuery 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. Seattle Children's MPage Conference 2011 + 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

Prototype Prototype is a JavaScript Framework that aims to ease development of dynamic web application. Seattle Children's MPage Conference 2011 + Framework Extends DOM and core JS Lots of Utility functions Class based inheritance facility - Learning curve Code size Performance Namespace pollution

MooTools MooTools 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. Seattle Children's MPage Conference 2011 + Framework Class Code reuse Play with JavaScript Code more explicit - Learning curve Manipulate prototypes of natives Code more verbose

Ext JS JavaScript Framework for Rich Apps in Every Browser. Seattle Children's MPage Conference 2011 + 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 Seattle Children's MPage Conference 2011

My Development Experience: Why it Matters Seattle Children's MPage Conference 2011

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 WorkList

Picture of Patient Summary MPage Seattle Children's MPage Conference 2011

Ambulatory Worklist Seattle Children's MPage Conference 2011

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 weeks Could we graph lab results? Seattle Children's MPage Conference 2011

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 Seattle Children's MPage Conference 2011

Click on a row to see Graph Seattle Children's MPage Conference 2011

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 Seattle Children's MPage Conference 2011

Another use for same technique: graphing Meds against blood level Seattle Children's MPage Conference 2011

Click on graph icon to popup window Seattle Children's MPage Conference 2011

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 Seattle Children's MPage Conference 2011

Multiple Developers
Separate file for each Panel Factory
A script that
concatenates
lintifies
minifies

Manage DOM ID’s – immediate function with Ext Namespace Seattle Children's MPage Conference 2011

Summary
3 rd party makes JS more like a Server Side application problem
Developers can work with a well designed framework
3 rd party is pre-tested and helps us solve application and infrastructure problems
Integration is not difficult

Epilogue Sencha 4 MVC New Graphs Seattle Children's MPage Conference 2011

3rd party

by Rebecca Peltz

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 10

Statistics

3rd party Presentation Transcript

3rd party

by Rebecca Peltz

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 10

Statistics

3rd party Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare