Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Tools and Frameworks Faves

2,021 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JavaScript Tools and Frameworks Faves

  1. 1. JavaScript Tools andFrameworks Favesphp|tek, May 26, 2011
  2. 2. Anna FilinaPHP Quebec - user group, organizerConFoo - non for profit Web conference, organizerFooLab Inc. - IT solutions for businesses, founderI write code
  3. 3. Content jQuery and plugins Plupload RaphaelJS
  4. 4. jQuery:Framework
  5. 5. Features Event handling DOM traversing & manipulation Ajax Animations jQuery UI Interactions Widgets Theming
  6. 6. Reasons Easy to learn and to use Fast and lightweight Well documented Many features and plugins Big community
  7. 7. Example: Image Cycle$(#cycle).cycle({ fx: scrollLeft, speed: fast, timeout: 3000, pager: #cycle-nav}); http://conf.local/js-faves/web/1-jquery-cycle.html
  8. 8. Example: Popup$(a.popup).nyroModal();$.nyroModalData(E-mail sent); http://conf.local/js-faves/web/2-jquery-popup.html
  9. 9. Example: jQueryUI Tabs<div id="tabs"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> </ul> <div id="tabs1"></div> <div id="tabs2"></div></div>$(#tabs).tabs(); http://conf.local/js-faves/web/3-jquery-tabs.html
  10. 10. Scenarios Twitter: display user profile in side-bar GitHub: slide navigation for code Facebook: autoload posts on scroll New York Times: top stories cycle Create user-customizable interfaces
  11. 11. Plupload:File upload queue
  12. 12. Features Upload multiple files Upload chunks HTML4 , HTML5, Gears, Silverlight, Flash, BrowserPlus Queue widget with upload progress
  13. 13. Reasons Highly customizable Chooses runtime based on client capabilities Integration with jQuery UI
  14. 14. Example$(#uploader).plupload({ runtimes: html5,browserplus,gears, url: upload.php, chunk_size:1mb, rename: true, max_file_count: 20} http://conf.local/js-faves/web/4-plupload.html
  15. 15. Scenarios Flickr: trip photos Slideshare: conference organizers Dropbox Freshbooks (idea): upload and OCR receipts Magazine: articles Visual instructions for assembly line
  16. 16. RaphaelJS:Vector graphics
  17. 17. Features SVG, VML Draw Animate Handle events Drag and drop
  18. 18. Reasons Chooses SVG or VML based on browser Easy to learn and to use Clean syntax
  19. 19. Examplevar pathString = M 288 216 L 288 126 L342 126 L 342 216 L 288 216;var p = paper.path(pathString);p.attr({ fill: #FDF5CE, cursor: pointer, stroke: #666, stroke-width: 2}); http://conf.local/js-faves/web/5-raphaeljs.html
  20. 20. Scenarios Maps Interactive condo plans Annotate images with instructions NASDAQ: stock quotes Flowcharts Entire web application
  21. 21. Resources http://jqueryui.com http://www.malsup.com/jquery/cycle http://nyromodal.nyrodev.com http://jqueryui.com http://www.plupload.com http://raphaeljs.com Code used in this talk: http://annafilina.com/blog/wp-content/uploads/js- faves.zip

×