UCLA jQuery - Speaker Deck

Slide 1

Slide 1 text

www.novacoast.com Presented by Sean Murray && Renato Untalan Web Dev with jQuery Friday, November 2, 12

Slide 2

Slide 2 text

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 - Ofﬁces nationwide... such SF, Boston, New York, Santa Barbara, Ohio, Louisiana Friday, November 2, 12

Slide 3

Slide 3 text

www.novacoast.com Renato Untalan, Lead Developer About Us 3 Sean Murray, R&D Developer Friday, November 2, 12

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

A Brief Introduction jQuery 5 Friday, November 2, 12

Slide 6

Slide 6 text

www.novacoast.com Browsers interpret code slightly differently Web Development 101 6 This can be difﬁcult to code for, to say the least. Friday, November 2, 12

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

www.novacoast.com With jQuery... 8 Friday, November 2, 12

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

www.novacoast.com Who uses jQuery? 10 Friday, November 2, 12

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

www.novacoast.com Topography 12 http://trends.builtwith.com/javascript/jQuery http://www.quantcast.com/top-sites-1 √ √ √ √ √ √ Friday, November 2, 12

Slide 13

Slide 13 text

www.novacoast.com You guys! Anyone else...? 13 http://www.alexa.com/siteinfo/jquery.com The Youthful The Intelligent Friday, November 2, 12

Slide 14

Slide 14 text

www.novacoast.com Global Awareness 14 http://www.alexa.com/siteinfo/jquery.com Friday, November 2, 12

Slide 15

Slide 15 text

jQuery Under The Hood 15 Friday, November 2, 12

Slide 16

Slide 16 text

www.novacoast.com Mechanics 16 Atleast...the jist of it... Friday, November 2, 12

Slide 17

Slide 17 text

www.novacoast.com Core 17 bit.ly/jqsource Friday, November 2, 12

Slide 18

Slide 18 text

www.novacoast.com Heart 18 bit.ly/jqsource Friday, November 2, 12

Slide 19

Slide 19 text

www.novacoast.com 19 Friday, November 2, 12

Slide 20

Slide 20 text

jQuery How Do? 20 Friday, November 2, 12

Slide 21

Slide 21 text

www.novacoast.com Document Object Model 21 What is it? • Standardized • HTML interface • Event Bindings Friday, November 2, 12

Slide 22

Slide 22 text

www.novacoast.com Document Object Model 22 Rendered Friday, November 2, 12

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

www.novacoast.com 24 Friday, November 2, 12

Slide 25

Slide 25 text

www.novacoast.com $( object ) 25 It’s a DOM wrapper Friday, November 2, 12

Slide 26

Slide 26 text

www.novacoast.com $( object ) 26 But so much more! Friday, November 2, 12

Slide 27

Slide 27 text

www.novacoast.com Chaining 27 Efﬁcient and elegant Friday, November 2, 12

Slide 28

Slide 28 text

www.novacoast.com CSS3 based DOM traversal Selectors 28 Friday, November 2, 12

Slide 29

Slide 29 text

www.novacoast.com But costly... Advanced Selectors 29 http://api.jquery.com/category/selectors/jquery-selector-extensions/ Friday, November 2, 12

Slide 30

Slide 30 text

www.novacoast.com Rule Of Thumb Selectors 30 • Use ID Optimization • Avoid non-standard CSS3 • Think right to left Friday, November 2, 12

Slide 31

Slide 31 text

www.novacoast.com Tell me when... Event Engine 31 Friday, November 2, 12

Slide 32

Slide 32 text

www.novacoast.com Event Driven Programming Event Engine 32 Friday, November 2, 12

Slide 33

Slide 33 text

www.novacoast.com Event Driven Programming Event Engine 33 Friday, November 2, 12

Slide 34

Slide 34 text

www.novacoast.com Callbacks 34 Efﬁcient and elegant Friday, November 2, 12

Slide 35

Slide 35 text

www.novacoast.com Effects Engine 35 It’s alive!!! Friday, November 2, 12

Slide 36

Slide 36 text

www.novacoast.com jQuery UI Suite Effects Engine 36 • Easing Effects • Widgets • Theming Friday, November 2, 12

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

www.novacoast.com Best Practices 38 • Cache DOM • Optimize Selectors • Go Native (when possible) Friday, November 2, 12

Slide 39

Slide 39 text

www.novacoast.com Help jQuery grow by contributing your code. Plugins Friday, November 2, 12

Slide 40

Slide 40 text

www.novacoast.com Plugin Structure 40 Friday, November 2, 12

Slide 41

Slide 41 text

jQuery Philosophies 41 write less, do more Friday, November 2, 12

Slide 42

Slide 42 text

www.novacoast.com Community 42 • Open IRC Discussions • CLA (Contributors License Agreement) • Room for growth Friday, November 2, 12

Slide 43

Slide 43 text

www.novacoast.com Some useful, awesome, and beautiful plugins In Practice Friday, November 2, 12

Slide 44

Slide 44 text

www.novacoast.com nivo-slider 44 http://nivo.dev7studios.com/ Friday, November 2, 12

Slide 45

Slide 45 text

www.novacoast.com dynamic node-edge connections jsplumb 45 http://jsplumb.org/jquery/demo.html Friday, November 2, 12

Slide 46

Slide 46 text

www.novacoast.com mouse analytics jQuery Heat Map 46 http://www.tympanus.net/Tutorials/jQueryHeatMap/ Friday, November 2, 12

Slide 47

Slide 47 text

www.novacoast.com 3D Windows jParallax 47 http://webdev.stephband.info/parallax.html#parallax Friday, November 2, 12