3rd party

  • 716 views
Uploaded on

Slides for Mpages conference

Slides for Mpages conference

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
716
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 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. 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
  • 3. Poll
    • How many use...
    • Pure Javascript
    • JQuery
    • Prototype
    • Mootools
    • Ext JS
    • Others
    Seattle Children's MPage Conference 2011
  • 4. JQuery 42% http://trends.builtwith.com/javascript Seattle Children's MPage Conference 2011
  • 5. JQuery 32% http://w3techs.com/technologies/overview/javascript_library/all Seattle Children's MPage Conference 2011
  • 6. Results Seattle Children's MPage Conference 2011 Library Percent Using Pure Javascript 58 % JQuery 32 % Prototype 5 % MooTools 5 % Ext JS .1%
  • 7. Why use anything but JQuery? Seattle Children's MPage Conference 2011
  • 8. Feature Analysis not very useful from http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks Seattle Children's MPage Conference 2011
  • 9. No “Bad” Libraries Seattle Children's MPage Conference 2011
  • 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. 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. 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. 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. 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. 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. My Development Experience: Why it Matters Seattle Children's MPage Conference 2011
  • 17. 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
    Seattle Children's MPage Conference 2011
  • 18. Picture of Patient Summary MPage Seattle Children's MPage Conference 2011
  • 19. Ambulatory Worklist Seattle Children's MPage Conference 2011
  • 20. 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
  • 21. We're going live in 2 weeks Could we graph lab results? Seattle Children's MPage Conference 2011
  • 22. 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
  • 23. Lab Results Seattle Children's MPage Conference 2011
  • 24. Click on a row to see Graph Seattle Children's MPage Conference 2011
  • 25. 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
  • 26. Simple Logic Seattle Children's MPage Conference 2011
  • 27. Another use for same technique: graphing Meds against blood level Seattle Children's MPage Conference 2011
  • 28. Click on graph icon to popup window Seattle Children's MPage Conference 2011
  • 29. 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
  • 30. 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
  • 31. Quickly Configure Panels Abstract Pattern Factory Pattern Seattle Children's MPage Conference 2011
  • 32. Multiple Developers
    • Separate file for each Panel Factory
    • A script that
      • concatenates
      • lintifies
      • minifies
    Seattle Children's MPage Conference 2011
  • 33. Manage DOM ID’s – immediate function with Ext Namespace Seattle Children's MPage Conference 2011
  • 34. 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
    Seattle Children's MPage Conference 2011
  • 35. Epilogue Sencha 4 MVC New Graphs Seattle Children's MPage Conference 2011