Learning App Building with Vanilla JavaScript

Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.

Introduction

• Welcome
• What you should know
• Exercise files

1. Overview of Vanilla JS

• Libraries, frameworks, and vanilla JavaScript
• Identify when to replace frameworks and libraries

2. Project Overview

• Application architecture

3. Environment Setup

• Environment setup
• Getting your API key

4. Replace Ajax

• Fetch API
• Create an Ajax request with Fetch

5. Select and Modify DOM Elements

• Element selection with vanilla JavaScript
• Select and modify elements with querySelector
• Select and modify elements with querySelectorAll

6. Replace Event Listeners

• JavaScript events
• Add event listeners with vanilla JavaScript
• Work with the event object

7. Implement Data Binding

• Data binding
• Create elements with vanilla JavaScript
• Add and modify properties with vanilla JavaScript
• Append elements with vanilla JavaScript
• Template literals to build DOM content

8. Replace Simple Animations

• Animation with vanilla JavaScript
• Show and hide elements using vanilla JavaScript
• Transition element appearance using CSS

9. Ensure Backward Compatibility

• Backward compatibility for vanilla JavaScript
• Transpile vanilla JavaScript

Conclusion

• Next steps