UCLA jQuery

Transcript

1. www.novacoast.com Presented by Sean Murray && Renato Untalan Web Dev with jQuery Friday, November 2, 12
2. www.novacoast.com 2 About Novacoast HQ - Santa Barbara, CA - Professional Services && Product Development Consultants - Hire developers strictly out of UCLA and UCSB Engineering Programs - Offices nationwide... such SF, Boston, New York, Santa Barbara, Ohio, Louisiana Friday, November 2, 12
3. www.novacoast.com Renato Untalan, Lead Developer About Us 3 Sean Murray, R&D Developer Friday, November 2, 12
4. www.novacoast.com Multiple Layers of a LAMP (MAMP) Stack 4 Web Development 101 Server Client (Browser) PHP MySQL Apache HTML CSS JavaScript Flash Friday, November 2, 12
5. A Brief Introduction jQuery 5 Friday, November 2, 12
6. www.novacoast.com Browsers interpret code slightly differently Web Development 101 6 This can be difficult to code for, to say the least. Friday, November 2, 12
7. www.novacoast.com In the old days... 7 a simple fade in http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation Friday, November 2, 12
8. www.novacoast.com With jQuery... 8 Friday, November 2, 12
9. www.novacoast.com What is jQuery? 9 - Fast, concise JavaScript Library - Modular, plug-in architecture - Simplifies HTML Document Traversal - Simplifies Event Handling - Simplifies Animating - Simplifies AJAX - is Lightweight - is CSS3 Compliant - is Cross-browser! Friday, November 2, 12
10. www.novacoast.com Who uses jQuery? 10 Friday, November 2, 12
11. www.novacoast.com Analytics 11 52.54% of the Top 10,000 websites use jQuery. http://trends.builtwith.com/javascript/jQuery Friday, November 2, 12
12. www.novacoast.com Topography 12 http://trends.builtwith.com/javascript/jQuery http://www.quantcast.com/top-sites-1 √ √ √ √ √ √ Friday, November 2, 12
13. www.novacoast.com You guys! Anyone else...? 13 http://www.alexa.com/siteinfo/jquery.com The Youthful The Intelligent Friday, November 2, 12
14. www.novacoast.com Global Awareness 14 http://www.alexa.com/siteinfo/jquery.com Friday, November 2, 12
15. jQuery Under The Hood 15 Friday, November 2, 12
16. www.novacoast.com Mechanics 16 Atleast...the jist of it... Friday, November 2, 12
17. www.novacoast.com Core 17 bit.ly/jqsource Friday, November 2, 12
18. www.novacoast.com Heart 18 bit.ly/jqsource Friday, November 2, 12
19. www.novacoast.com 19 Friday, November 2, 12
20. jQuery How Do? 20 Friday, November 2, 12
21. www.novacoast.com Document Object Model 21 What is it? • Standardized • HTML interface • Event Bindings Friday, November 2, 12
22. www.novacoast.com Document Object Model 22 Rendered Friday, November 2, 12
23. www.novacoast.com “A bullet proof vest doesn’t keep you from shooting yourself in the foot, it's good to have a strong foundation in javascript before fully utilizing jQuery” - Jon Sharp The basics 23 Friday, November 2, 12
24. www.novacoast.com 24 Friday, November 2, 12
25. www.novacoast.com $( object ) 25 It’s a DOM wrapper Friday, November 2, 12
26. www.novacoast.com $( object ) 26 But so much more! Friday, November 2, 12
27. www.novacoast.com Chaining 27 Efficient and elegant Friday, November 2, 12
28. www.novacoast.com CSS3 based DOM traversal Selectors 28 Friday, November 2, 12
29. www.novacoast.com But costly... Advanced Selectors 29 http://api.jquery.com/category/selectors/jquery-selector-extensions/ Friday, November 2, 12
30. www.novacoast.com Rule Of Thumb Selectors 30 • Use ID Optimization • Avoid non-standard CSS3 • Think right to left Friday, November 2, 12
31. www.novacoast.com Tell me when... Event Engine 31 Friday, November 2, 12
32. www.novacoast.com Event Driven Programming Event Engine 32 Friday, November 2, 12
33. www.novacoast.com Event Driven Programming Event Engine 33 Friday, November 2, 12
34. www.novacoast.com Callbacks 34 Efficient and elegant Friday, November 2, 12
35. www.novacoast.com Effects Engine 35 It’s alive!!! Friday, November 2, 12
36. www.novacoast.com jQuery UI Suite Effects Engine 36 • Easing Effects • Widgets • Theming Friday, November 2, 12
37. www.novacoast.com AJAX 37 • Reduce page load time • Save bandwidth • Better use of cacheing • Live updates and feeds Stream live data or load pages asynchronously Friday, November 2, 12
38. www.novacoast.com Best Practices 38 • Cache DOM • Optimize Selectors • Go Native (when possible) Friday, November 2, 12
39. www.novacoast.com Help jQuery grow by contributing your code. Plugins Friday, November 2, 12
40. www.novacoast.com Plugin Structure 40 Friday, November 2, 12
41. jQuery Philosophies 41 write less, do more Friday, November 2, 12
42. www.novacoast.com Community 42 • Open IRC Discussions • CLA (Contributors License Agreement) • Room for growth Friday, November 2, 12
43. www.novacoast.com Some useful, awesome, and beautiful plugins In Practice Friday, November 2, 12
44. www.novacoast.com nivo-slider 44 http://nivo.dev7studios.com/ Friday, November 2, 12
45. www.novacoast.com dynamic node-edge connections jsplumb 45 http://jsplumb.org/jquery/demo.html Friday, November 2, 12
46. www.novacoast.com mouse analytics jQuery Heat Map 46 http://www.tympanus.net/Tutorials/jQueryHeatMap/ Friday, November 2, 12
47. www.novacoast.com 3D Windows jParallax 47 http://webdev.stephband.info/parallax.html#parallax Friday, November 2, 12