Replacing jQuery with Vanilla JavaScript
4.4 (18 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
10,905 students enrolled

Replacing jQuery with Vanilla JavaScript

Vanilla JS instead of an additional 30 kB from jQuery, DOM API, modern browsers, Babel, polyfills, fetch, Promise
4.4 (18 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
10,905 students enrolled
Last updated 11/2019
English
Current price: $13.99 Original price: $19.99 Discount: 30% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 8 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • You'll get an overview of the newest JS (ES6+) and browsers API
  • You'll learn when it's not worth using jQuery
  • You'll see how to use the newest JavaScript in the older browsers
Course content
Expand all 65 lectures 04:49:25
+ DOM manipulation
16 lectures 01:12:46
Intro
00:11
The structure of the next lectures
02:08
class - jQuery
04:51
class - JavaScript
04:36
Copying HTML elements - jQuery
04:59
Copying HTML elements - JavaScript
04:02
Wrapping HTML elements - jQuery
04:45
Wrapping HTML elements - JavaScript
04:46
Wrapping - when jQuery wins
07:32
Inserting one element into another
05:44
Inserting near the existing elements
03:02
Replacing the elements
03:47
Attribute vs. property
03:15
Other attributes
08:20
+ CSS, selectors, animations
9 lectures 43:41
Intro
00:02
CSS - jQuery
07:58
CSS - JavaScript (getter)
06:37
Dimensions
04:51
CSS finished
04:13
Selectors
06:20
Traversing
06:33
+ Events, forms
6 lectures 25:22
Intro
00:08
jQuery events
02:49
Events examples
07:58
$.ready
03:45
Forms - val
04:48
+ Better building blocks - Web Components
6 lectures 27:49
Intro
00:12
What are they?
02:39
GitHub case
06:10
HTML Templates
06:56
Shadow DOM
05:33
+ AJAX, Deferred
5 lectures 26:49
Intro
00:05
Browser API
05:24
async, await
03:58
Callbacks & Deferred objects - jQuery
10:13
Promise - JavaScript
07:09
+ All the rest from jQuery
7 lectures 23:52
Intro
00:04
Data - jQuery
05:49
Dataset - JS
04:19
Queue
03:13
Core
02:08
Internals, Properties
03:21
Miscellaneous, Utilities
04:58
+ Cross-browser & older browsers without jQuery
10 lectures 50:44
Intro
00:11
Support table
06:20
Shims
05:13
Polyfills
05:25
Babel
05:14
Babel configuration 1/2
05:52
Babel configuration 2/2 (core-js)
05:11
Babel - working example
07:31
+ Last words
2 lectures 02:54
Congratulations!
00:54
Bonus lecture: courses, materials
02:00
Requirements
  • Basic JavaScript knowledge
  • Basic jQuery knowledge
  • Willingness to learn about the latest JS mechanisms
Description

How about jQuery? I think all the front-end developers have heard about the library using dollar sign as its main function...

Should we include jQuery in the new project? Is this still needed? In what cases? What were the advantages of jQuery and are they still important?

This course focuses on the newest JavaScript and browsers mechanisms, which can replace jQuery:

  • classList,

  • querySelector,

  • forEach,

  • dataset,

  • URLSearchParams,

  • fetch,

  • Promise,

  • spread operator

It also shows additional features and tools, which can help even together with jQuery, e.g. async/await or Animate.css.

There are well-known examples of the companies removing jQuery from their front-end parts. GitLab and GitHub to name a few. Moreover, the latter one switched from jQuery to Web Components, which are explained in detail in one of the course sections.

At the end of the course, you can find a solution for one of the biggest front-end problems - how to achieve a fully cross-browser solution and old browsers support (yes, including IE8). It's doable thanks to polyfills and Babel or TypeScript. And the example project is well-explained in the course.

Who this course is for:
  • Those who still uses jQuery
  • Those who don't know how to live without jQuery
  • Front-end developers who want to learn the latest JS mechanisms