Upload
rebecca-peltz
View
994
Download
0
Embed Size (px)
DESCRIPTION
Slides for Mpages conference
Citation preview
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
2Seattle Children's MPage Conference 2011
PollHow many use...
•Pure Javascript
•JQuery
•Prototype
•Mootools
•Ext JS
•Others
3Seattle Children's MPage Conference 2011
JQuery 42%http://trends.builtwith.com/javascript
4Seattle Children's MPage Conference 2011
JQuery 32% http://w3techs.com/technologies/overview/javascript_library/all
5Seattle Children's MPage Conference 2011
Results
Library Percent Using
Pure Javascript 58 %
JQuery 32 %
Prototype 5 %
MooTools 5 %
Ext JS .1%
6Seattle Children's MPage Conference 2011
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
8Seattle Children's MPage Conference 2011
No “Bad” Libraries
9Seattle Children's MPage Conference 2011
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
10Seattle Children's MPage Conference 2011
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
11Seattle Children's MPage Conference 2011
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
12Seattle Children's MPage Conference 2011
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
13Seattle Children's MPage Conference 2011
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
14Seattle Children's MPage Conference 2011
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
15Seattle Children's MPage Conference 2011
My Development Experience: Why it Matters
Seattle Children's MPage Conference 2011 16
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
Seattle Children's MPage Conference 2011 18
Ambulatory Worklist
Seattle Children's MPage Conference 2011 19
MPages
MPages exist so that users can create new functionality
• quickly
• for site specific functionality
• for functionality not available in Millenium
Seattle Children's MPage Conference 2011 20
We're going live in 2 weeksCould we graph lab results?
Seattle Children's MPage Conference 2011 21
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
Seattle Children's MPage Conference 2011 22
Lab Results
Seattle Children's MPage Conference 2011 23
Click on a row to see Graph
Seattle Children's MPage Conference 2011 24
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
Seattle Children's MPage Conference 2011 25
Simple Logic
Seattle Children's MPage Conference 2011 26
Another use for same technique:graphing Meds against blood level
Seattle Children's MPage Conference 2011 27
Click on graph icon to popup window
Seattle Children's MPage Conference 2011 28
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
Seattle Children's MPage Conference 2011 29
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
Seattle Children's MPage Conference 2011 30
Quickly Configure Panels
Abstract Pattern Factory Pattern
Seattle Children's MPage Conference 2011 31
Multiple Developers
• Separate file for each Panel Factory
• A script that
• concatenates
• lintifies
• minifies
Seattle Children's MPage Conference 2011 32
Manage DOM ID’s – immediate function with Ext Namespace
Seattle Children's MPage Conference 2011 33
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
Seattle Children's MPage Conference 2011 34
Epilogue
Sencha 4
MVC
New Graphs
Seattle Children's MPage Conference 2011 35