JavaScript Tools and Frameworks Faves

Transcript

1. JavaScript Tools and Frameworks Faves php|tek, May 26, 2011
2. Anna Filina PHP Quebec - user group, organizer ConFoo - non for profit Web conference, organizer FooLab Inc. - IT solutions for businesses, founder I write code
3. Content jQuery and plugins Plupload RaphaelJS
4. jQuery: Framework
5. Features Event handling DOM traversing & manipulation Ajax Animations jQuery UI Interactions Widgets Theming
6. Reasons Easy to learn and to use Fast and lightweight Well documented Many features and plugins Big community
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. Example: Popup $('a.popup').nyroModal(); $.nyroModalData('E-mail sent'); http://conf.local/js-faves/web/2-jquery-popup.html
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. 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. Plupload: File upload queue
12. Features Upload multiple files Upload chunks HTML4 , HTML5, Gears, Silverlight, Flash, BrowserPlus Queue widget with upload progress
13. Reasons Highly customizable Chooses runtime based on client capabilities Integration with jQuery UI
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. Scenarios Flickr: trip photos Slideshare: conference organizers Dropbox Freshbooks (idea): upload and OCR receipts Magazine: articles Visual instructions for assembly line
16. RaphaelJS: Vector graphics
17. Features SVG, VML Draw Animate Handle events Drag and drop
18. Reasons Chooses SVG or VML based on browser Easy to learn and to use Clean syntax
19. Example var pathString = 'M 288 216 L 288 126 L 342 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. Scenarios Maps Interactive condo plans Annotate images with instructions NASDAQ: stock quotes Flowcharts Entire web application
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