Learning App Building with Vanilla JavaScript
1h 45mIntermediate2017-10-11
Authors
Sasha Vodnik
Principal Technical Course Developer at DocuSign
Course details
JavaScript libraries like jQuery and frameworks like React have a lot of benefits to offer, but performance can be a tradeoff. Removing jQuery and React can improve site speed without impacting user experience. But many developers have never learned the equivalent code in JavaScript. This course teaches you how to program the same features and functionality with vanilla JavaScript.
Instructor Sasha Vodnik starts with an app built with jQuery and React and replaces it piece by piece with vanilla JavaScript. He removes the dependencies and shows that the app still works, conducting performance tests to compare the start and end code. Topics include replacing DOM manipulation, replacing Ajax, replacing event listeners, and replacing simple animations, like show, hide, and toggle. The end result is a pure JavaScript app that is backwards and cross-browser compatible—no libraries necessary!
Learning objectives
Replacing jQuery Ajax requests with Fetch requests
Selecting elements with vanilla JavaScript
Adding event listeners with vanilla JavaScript
Implementing data binding
Replacing simple animations
Ensuring backwards compatibility
Transpiling vanilla JavaScript for cross-browser compatibility
Instructor Sasha Vodnik starts with an app built with jQuery and React and replaces it piece by piece with vanilla JavaScript. He removes the dependencies and shows that the app still works, conducting performance tests to compare the start and end code. Topics include replacing DOM manipulation, replacing Ajax, replacing event listeners, and replacing simple animations, like show, hide, and toggle. The end result is a pure JavaScript app that is backwards and cross-browser compatible—no libraries necessary!
Learning objectives
Replacing jQuery Ajax requests with Fetch requests
Selecting elements with vanilla JavaScript
Adding event listeners with vanilla JavaScript
Implementing data binding
Replacing simple animations
Ensuring backwards compatibility
Transpiling vanilla JavaScript for cross-browser compatibility
Skills covered
JavaScriptOracleFront-End Web DevelopmentLearningWeb DevelopmentProgramming LanguagesSoftware Development
Concepts
0. Introduction
- 01 - Welcome
- 02 - What you should know
- 03 - Exercise files
1. Overview of Vanilla JS
- 04 - Libraries, frameworks, and vanilla JavaScript
- 05 - Identify when to replace frameworks and libraries
2. Project Overview
- 06 - Application architecture
3. Environment Setup
- 07 - Environment setup
- 08 - Getting your API key
4. Replace Ajax
- 09 - Fetch API
- 10 - Create an Ajax request with Fetch
5. Select and Modify DOM Elements
- 11 - Element selection with vanilla JavaScript
- 12 - Select and modify elements with querySelector
- 13 - Select and modify elements with querySelectorAll
6. Replace Event Listeners
- 14 - JavaScript events
- 15 - Add event listeners with vanilla JavaScript
- 16 - Work with the event object
7. Implement Data Binding
- 17 - Data binding
- 18 - Create elements with vanilla JavaScript
- 19 - Add and modify properties with vanilla JavaScript
- 20 - Append elements with vanilla JavaScript
- 21 - Template literals to build DOM content
8. Replace Simple Animations
- 22 - Animation with vanilla JavaScript
- 23 - Show and hide elements using vanilla JavaScript
- 24 - Transition element appearance using CSS
9. Ensure Backward Compatibility
- 25 - Backward compatibility for vanilla JavaScript
- 26 - Transpile vanilla JavaScript
Conclusion
- 27 - Next steps