startup institute intro to jquery (july 28, 2014)
DESCRIPTION
This presentation covers why libraries like jQuery exist, what was web development like before jQuery, the main benefits of jQuery, and some alternate libraries.TRANSCRIPT
Intro to jQueryRafael GonzaqueStartup Institute
July 28, 2014
Hi, I’m Rafael
• Software Engineer at Maker’s Row
• We connect brands and designers with manufacturers in the US
About Maker’s Row• Launched in 2012 - http://makersrow.com
• 45K brands and 5K factories
• We provide 3 main abilities:
1. Projects
2. Search
3. Messaging
• Like so many other sites, we use jQuery to make the development of our site’s interactivity easier
• Some other examples that use jQuery:
1. Airbnb
2. Foursquare
3. Tumblr (Ex: stives.tumblr.com)
• 78.5% of the top 10K sites (http://trends.builtwith.com/javascript/jQuery)
Why are so many people using jQuery?
• CSS selectors
• A common interface to manipulate the DOM – the jQuery object
• A plugin system
The DOM? Huh?• DOM = Document Object Model
• A programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
Accessing the DOM
• Core methods:
• document.getElementById
• element.getElementsByTagName
• document.createElement
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Example
<html><body>
<h1 id=“title”>My Title</h1><div class=“content”>
<p>My subheading</p><ul id=“task-list” class=“list”>
<li class=“item”><span class=“item-title”>Pickup
laundry</span><span class=“item-desc”>At the corner
laundromat</span></li>
</ul><a id=“ok-btn” class=“btn”>OK</a>
</div></body>
</html>
Let’s make this interactive
var el = document.getElementById(‘ok-btn’);el.addEventListener(‘click’, function () {
// do something}, false);
Uh no!
X-Browser Issues• Until IE 11, IE didn’t implement
addEventListener; it had it’s own – attachEvent
• Solution:var el = document.getElementById(‘ok-btn’);if (IE < 11) {
el.attachEvent …} else {
el.addEventListener …}
• A bunch of x-browser issues between all the different vendors
Enter jQuery
• Written by John Resig in 2006
• Provides DOM manipulation via its selector engine Sizzle (http://sizzlejs.com/)
Same Example
<html><body>
<h1 id=“title”>My Title</h1><div class=“content”>
<p>My subheading</p><ul id=“task-list” class=“list”>
<li class=“item”><span class=“item-title”>Pickup
laundry</span><span class=“item-desc”>At the corner
laundromat</span></li>
</ul><a id=“ok-btn” class=“btn”>OK</a>
</div></body>
</html>
$, FTW!• Change the color of the title
$(‘#title’).css(‘color’, ‘red’);
• Bind an event
$(‘#ok-btn’).on(‘click’, function () {
// do something
});
Notice there’s no need for checking IE! jQuery does it internally!
More Examples• Add a new item to a list
$(‘#task-list’).append(‘<li class=“item”><span class=“item-title”>Get Milk</span><span class=“item-desc”>1% milkfat</span></li>’);
• Remove an item from the DOM
$(‘#task-list’).find(‘.item:last-child’).remove();
• Add a class to an element
$(‘.item’).eq(0).addClass(‘urgent’);
Ajax before jQueryvar xhReq;
// Less than IE 7 supportif (window.ActiveXObject) {
xhReq = new ActiveXObject(‘Msxml2.XMLHTTP’);} else {
xhReq = new XmlHttpRequest();}
// Make an async requestxhReq.open(‘GET’, ‘my-app-endpoint?id=2’, true);xhReq.onreadystatechange = function() {
// We only care about complete requests (state = 4)if (xhReq.readyState != 4) { return; }
if (xhReq.status != 200) {// Handle error
} else {// Handle success via xhReq.responseText
}};xhReq.send(null);
• No needing to deal with XMLHttpRequest for Ajax - https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
• jQuery does ajax!$.ajax({
url: ‘/my-app-endpoint’,type: ‘GET’,data: { id: 2 },success: function (response) {
// Handle the response},error: function () {
// Handle the error}
});
• Full Documentation: http://api.jquery.com/
Ajax with jQuery
jQuery Best Practices
• Prefix all variables that reference a jQuery object with a “$”var $taskList = $(‘#task-list’);
• A jQuery object is an array; check the length to see if an element existvar $taskList = $(‘#task-list),
$someElement = $(‘#parent .non-existing-selector’);
console.log($taskList.length); // 1console.log($someElement.length); // 0
jQuery Best Practices• jQuery objects are chain-able
$(‘#title’).addClass(‘crucial’).text(‘Pay Attention’).on(‘click’, function () { /* Do something*/ });
• Use event delegation to bind events to multiple instances of the same html markup$(‘#task-list’).on(‘click’, ‘.item’, function () {
// Do something when a .item element is clicked});
• Always prefer CSS over Javascript; CSS is much faster
Other DOM Libraries• Prototype.js - extends the native DOM and
provides id-based selection via $ and CSS selectors via $$ (http://prototypejs.org/)
• YUI - https://yuilibrary.com/
• Dojo - http://dojotoolkit.org/
• Zepto - http://zeptojs.com/ - just like jQuery, but smaller. (No IE support)
• MooTools - http://mootools.net/
Wrap-Up• jQuery provides x-browser functionality for,
A. DOM manipulation
B. Ajax
• jQuery makes web development easier
• Always, prefer CSS solutions over Javascript with jQuery
• jQuery provides a common interface that make plugins possible. See:
1. http://plugins.jquery.com/
2. http://www.unheap.com/
3. http://learn.jquery.com/plugins/basic-plugin-creation/
Rafael Gonzaque - @iamrgon
Thanks!