jQuery-free JavaScript

Do you need jQuery? Let's look at some common jQuery code snippets and rewrite them with native browser APIs or micro-libraries.
Course info
Rating
(190)
Level
Intermediate
Updated
Oct 30, 2013
Duration
2h 26m
Table of contents
Description
Course info
Rating
(190)
Level
Intermediate
Updated
Oct 30, 2013
Duration
2h 26m
Description

In this course we will explain when it's appropriate to use jQuery and when it may not be. If you need jQuery then we will look at making a custom build that includes only the parts you need. Most of this course is focused on converting common jQuery snippets to either use native browser APIs or utilize a popular micro-library.

About the author
About the author

Elijah Manor is a Christian and a family man. He is a Microsoft Regional Director, Microsoft ASP.NET MVP, ASPInsider, and IE userAgent and specializes in front-end web development. He enjoys blogging (http://elijahmanor.com), tweeting (@elijahmanor), and speaking about the things he learns.

More from the author
Fixing Common JavaScript Bugs
Intermediate
3h 42m
Aug 21, 2013
jQuery Tips and Tricks
Intermediate
4h 23m
Jul 18, 2013
More courses by Elijah Manor
Section Introduction Transcripts
Section Introduction Transcripts

Native Selectors
Hello, this is Elijah Manor. In this module, we'll focus on how to natively grab elements from the DOM and navigate around. This module, and others to come, will first show a snippet of jQuery code, and then we'll look at one or more additional snippets that will perform the same action, but without using jQuery. As I touched on in the last slide, the whole idea of selectors is to eventually find something you're looking for in the DOM. Typically we want to pinpoint either one element or a group of elements so that we could perform some action on them.

Native DOM Manipulation
Hello, this is Elijah Manor, and this module covers DOM manipulation. We'll show how to manipulate the DOM with jQuery and then how you could do the same thing with native browser APIs. DOM manipulation is a common task in most any web application. We're either creating elements or modifying them all the time. Maybe we're adding a class or changing a style or adding new content. These are things that are necessary for a very interactive web app.

Native Events
Hello, this is Elijah Manor, and in this module, we'll be talking about events. We'll look at how to manage events in jQuery, and then we'll look at how we can provide the same behavior without using jQuery. Events are a crucial part of most web applications. At some point or another, you'll need to interact with the user somehow, either if it's to respond to a button click, their scroll position or keys they're typing.

Native Ajax
Hello, this is Elijah Manor, and in this module we're going to talk about making AJAX requests. JQuery does a really good job at making AJAX requests easy, so we're going to review what it looks like in jQuery, and then we'll look at how to make AJAX calls natively. AJAX has actually been around for quite a while. Internet Explorer introduced the technology back in 1999 with IE5. Since then, it's been adopted and modified by other browsers as well. In this module, we'll take a look at get and post requests, as well as JSONP.

Native Utilities
Hello, this is Elijah Manor, and this module is about utilities that are helpful when making web applications. We'll look at helpful jQuery utilities and then show how these are also available natively, and if they're not, we'll talk about using a micro library instead. Once you've retrieved data from the server, you need to do something with it. It's handy to have a set of utility methods to make manipulating data easier. In addition, you'll probably find yourself needing the same type of code over and over again, which is where utility methods can come in handy.

Native Animation
Hello, this is Elijah Manor, and in this module, we're going to talk about web animation. Browsers have come a long way when it comes to CSS. We're going to take a look at several animation techniques using jQuery, and then we're going to compare how to do the same thing with CSS only.

Native Plugins
Hello, this is Elijah Manor, and in this module we're going to talk about plugins. We'll first discuss about plugins that maybe shouldn't be jQuery plugins, and talk about how to think about making plugins that are native JavaScript. And then we'll show how we could create an adaptor so that it could also work as a jQuery plugin. Plugins are great, and jQuery gives us a great starting place and has enabled developers to fill in the gaps and get really creative about what they want. Plugins are similar to components you might find on your computer. You could swap them out or find a better one, or even come up with something that's new and forward thinking. As long as your plugin follows a certain API, then jQuery developers should know how to use it. Plugins are one of the many reasons that jQuery has become so popular. Since they're easy to create, a lot of developers started making plugins and the community around it grew very quickly. There are a huge number of plugins in the jQuery ecosystem, ranging from both very simple to very complex. However, one of the downsides is that the quality of these plugins is hard to gauge, but you tend to get that when something's really popular. Anyway, one of the interesting things about some jQuery plugins is that some of them don't need to be jQuery plugins, meaning they don't really even use jQuery inside of them, or they could have been easily written so that they didn't need jQuery. So we're going to talk about some of these concerns and how to work around them.