Cerner Mpages Conference May 2011 Using 3 rd  Party Software with Mpages Becky Peltz Seattle Children's Seattle Children's...
Outline <ul><li>Survey of 3 rd  Party JavaScript Libraries </li></ul><ul><li>My Development Experience </li></ul><ul><li>S...
Poll <ul><li>How many use... </li></ul><ul><li>Pure Javascript </li></ul><ul><li>JQuery </li></ul><ul><li>Prototype </li><...
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 % Moo...
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 ...
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 pro...
jQuery jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating...
Prototype Prototype is a JavaScript Framework that aims to ease development of dynamic web application. Seattle Children's...
MooTools MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced Ja...
Ext JS JavaScript Framework for Rich Apps in Every Browser. Seattle Children's MPage Conference 2011 + Container model Fra...
My Background and Why it Matters in this Presentation There are a lot of web server component developer like me in Seattle...
My Development Experience:  Why it Matters Seattle Children's MPage Conference 2011
Seattle Children’s Environment <ul><li>Team of 5 (2 JS specialist, 3 CCL specialists) </li></ul><ul><li>Locally hosted fil...
Picture of Patient Summary MPage Seattle Children's MPage Conference 2011
Ambulatory Worklist Seattle Children's MPage Conference 2011
MPages <ul><li>MPages exist so that users can create new functionality </li></ul><ul><li>quickly </li></ul><ul><li>for sit...
We're going live in 2 weeks Could we graph lab results? Seattle Children's MPage Conference 2011
Problems in adding Lab Graphs <ul><li>Ext JS v 3 relies on Flash install </li></ul><ul><li>Need to choose a charting libra...
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? <ul><li>Ext JS framework for layout </li></ul><ul><li>jQuery adapter for Ext JS is required (prov...
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 <ul><li>Ext JS is in charge of creating and naming the container (provide component ID) </li>...
Some Other Problems And Solutions <ul><li>How can we quickly configure panels: Abstraction vs Factory Pattern </li></ul><u...
Quickly Configure Panels Abstract Pattern Factory Pattern Seattle Children's MPage Conference 2011
Multiple Developers <ul><li>Separate file for each Panel Factory </li></ul><ul><li>A script that  </li></ul><ul><ul><li>co...
Manage DOM ID’s – immediate function with Ext Namespace Seattle Children's MPage Conference 2011
Summary <ul><li>3 rd  party makes JS more like a Server Side application problem </li></ul><ul><li>Developers can work wit...
Epilogue Sencha 4 MVC New Graphs Seattle Children's MPage Conference 2011
Upcoming SlideShare
Loading in...5
×

3rd party

770

Published on

Slides for Mpages conference

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
770
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • approximately the same for top 100,000 and top 1,000,000
  • http://james.padolsey.com/javascript/jquery-code-smells/ what is a framework: abstraction in which common code providing generic functionality can be selectively overridden or specialized by user code, thus providing specific functionality
  • http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison
  • http://jqueryvsmootools.com/#learning
  • primarily a server side developer – started working with AJAX in 2005 – front end 2007 telerik, jQuery
  • before technology changes reason for having MPages
  • results are represented as rows in a grid panel
  • click on platelet count
  • click on graph icon
  • Transcript of "3rd party"

    1. 1. Cerner Mpages Conference May 2011 Using 3 rd Party Software with Mpages Becky Peltz Seattle Children's Seattle Children's MPage Conference 2011
    2. 2. Outline <ul><li>Survey of 3 rd Party JavaScript Libraries </li></ul><ul><li>My Development Experience </li></ul><ul><li>Seattle Children’s Environment </li></ul><ul><li>Example from Seattle Children’s Patient Summary MPage </li></ul><ul><li>How Ext helps us in other ways </li></ul><ul><li># of PowerPoint Slides: 35 </li></ul>Seattle Children's MPage Conference 2011
    3. 3. Poll <ul><li>How many use... </li></ul><ul><li>Pure Javascript </li></ul><ul><li>JQuery </li></ul><ul><li>Prototype </li></ul><ul><li>Mootools </li></ul><ul><li>Ext JS </li></ul><ul><li>Others </li></ul>Seattle Children's MPage Conference 2011
    4. 4. JQuery 42% http://trends.builtwith.com/javascript Seattle Children's MPage Conference 2011
    5. 5. JQuery 32% http://w3techs.com/technologies/overview/javascript_library/all Seattle Children's MPage Conference 2011
    6. 6. Results Seattle Children's MPage Conference 2011 Library Percent Using Pure Javascript 58 % JQuery 32 % Prototype 5 % MooTools 5 % Ext JS .1%
    7. 7. Why use anything but JQuery? Seattle Children's MPage Conference 2011
    8. 8. Feature Analysis not very useful from http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks Seattle Children's MPage Conference 2011
    9. 9. No “Bad” Libraries Seattle Children's MPage Conference 2011
    10. 10. 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
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. 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
    15. 15. 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
    16. 16. My Development Experience: Why it Matters Seattle Children's MPage Conference 2011
    17. 17. Seattle Children’s Environment <ul><li>Team of 5 (2 JS specialist, 3 CCL specialists) </li></ul><ul><li>Locally hosted file servers </li></ul><ul><li>Framework: Ext JS v. 3 </li></ul><ul><li>First MPage: </li></ul><ul><ul><li>deployed September 2010 </li></ul></ul><ul><ul><li>Patient Summary (Inpatient and Ambulatory) </li></ul></ul><ul><li>Second MPage </li></ul><ul><ul><li>deployed April 2011 </li></ul></ul><ul><ul><li>Ambulatory WorkList </li></ul></ul>Seattle Children's MPage Conference 2011
    18. 18. Picture of Patient Summary MPage Seattle Children's MPage Conference 2011
    19. 19. Ambulatory Worklist Seattle Children's MPage Conference 2011
    20. 20. MPages <ul><li>MPages exist so that users can create new functionality </li></ul><ul><li>quickly </li></ul><ul><li>for site specific functionality </li></ul><ul><li>for functionality not available in Millenium </li></ul>Seattle Children's MPage Conference 2011
    21. 21. We're going live in 2 weeks Could we graph lab results? Seattle Children's MPage Conference 2011
    22. 22. Problems in adding Lab Graphs <ul><li>Ext JS v 3 relies on Flash install </li></ul><ul><li>Need to choose a charting library </li></ul><ul><li>My experience with Ext JS was limited </li></ul><ul><li>The design: </li></ul><ul><ul><li>Click on a row in the lab results grid </li></ul></ul><ul><ul><li>Open up a ‘panel’ that renders a graph </li></ul></ul>Seattle Children's MPage Conference 2011
    23. 23. Lab Results Seattle Children's MPage Conference 2011
    24. 24. Click on a row to see Graph Seattle Children's MPage Conference 2011
    25. 25. How do we create graphs? <ul><li>Ext JS framework for layout </li></ul><ul><li>jQuery adapter for Ext JS is required (provided) in v. 3 of Ext JS </li></ul><ul><li>Ext JS Row Expander to create container </li></ul><ul><li>HighCharts for graph http://www.highcharts.com/ </li></ul><ul><li>jQuery because HighCharts used it </li></ul>Seattle Children's MPage Conference 2011
    26. 26. Simple Logic Seattle Children's MPage Conference 2011
    27. 27. Another use for same technique: graphing Meds against blood level Seattle Children's MPage Conference 2011
    28. 28. Click on graph icon to popup window Seattle Children's MPage Conference 2011
    29. 29. Key Points about integration <ul><li>Ext JS is in charge of creating and naming the container (provide component ID) </li></ul><ul><li>HighCharts is in charge of creating elements and styles necessary to render chart </li></ul><ul><li>HighCharts provides a ‘Render to’ method that we can hand the container ID to </li></ul>Seattle Children's MPage Conference 2011
    30. 30. Some Other Problems And Solutions <ul><li>How can we quickly configure panels: Abstraction vs Factory Pattern </li></ul><ul><li>How can we have multiple developers working on a page </li></ul><ul><li>How can we manage DOM ID’s </li></ul>Seattle Children's MPage Conference 2011
    31. 31. Quickly Configure Panels Abstract Pattern Factory Pattern Seattle Children's MPage Conference 2011
    32. 32. Multiple Developers <ul><li>Separate file for each Panel Factory </li></ul><ul><li>A script that </li></ul><ul><ul><li>concatenates </li></ul></ul><ul><ul><li>lintifies </li></ul></ul><ul><ul><li>minifies </li></ul></ul>Seattle Children's MPage Conference 2011
    33. 33. Manage DOM ID’s – immediate function with Ext Namespace Seattle Children's MPage Conference 2011
    34. 34. Summary <ul><li>3 rd party makes JS more like a Server Side application problem </li></ul><ul><li>Developers can work with a well designed framework </li></ul><ul><li>3 rd party is pre-tested and helps us solve application and infrastructure problems </li></ul><ul><li>Integration is not difficult </li></ul>Seattle Children's MPage Conference 2011
    35. 35. Epilogue Sencha 4 MVC New Graphs Seattle Children's MPage Conference 2011
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×