Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React JS, Angular & Vue JS - Quickstart & Comparison
Getting Started
Introduction (1:18)
The Goal of this Course (2:31)
Join our Online Learning Community
Understanding the Role of JavaScript (3:48)
The World of JavaScript (1:36)
Using Vanilla JavaScript & Understanding Its Limitations (1/3) (5:17)
Using Vanilla JavaScript & Understanding Its Limitations (2/3) (2:12)
Using Vanilla JavaScript & Understanding Its Limitations (3/3) (4:40)
Analyzing the Vanilla JavaScript Solution (2:28)
Improving the App with jQuery (7:01)
More JavaScript Libraries: Adding Lodash (2:56)
The Role of JavaScript Libraries (1:20)
Libraries vs Frameworks (2:50)
Using Vue.js (A JavaScript Framework) (15:02)
Understand other Parts of the JavaScript World (3:55)
JavaScript Versions and Languages - ES6 and TypeScript (3:56)
Course Structure (2:59)
Course Source Code
The Academind Pro Referral Program
Understanding JavaScript Frameworks in General
Module Introduction (0:33)
JS Frameworks in Fullstack Applications (2:37)
JS Frameworks in Single-Page-Applications (2:45)
An Example for a Framework in a Fullstack Application (1:33)
An Example for a Framework running a Single-Page-Application (1:38)
Fullstack Approach - Pros and Cons (4:07)
Single-Page-Application - Pros and Cons (4:28)
Prerequisites for the Different JS Frameworks (3:37)
Module Resources
Vue.js - An Introduction
Module Introduction (1:33)
Creating a Basic Vue.js Application (3:23)
In a Nutshell: How Vue.js Works (2:06)
Handling Events and Updating the DOM (3:57)
Rendering Content Conditionally (3:15)
Outputting Lists (3:27)
Binding HTML Attributes & Properties to Data (3:38)
Styling Elements Dynamically (3:24)
Setting CSS Classes Dynamically (1:45)
Using Shorthands
Using Multiple Vue Instances (1:39)
Limitations of Multiple Vue Instances (1:55)
Creating and Using Components (4:30)
Passing Data into Components (1:42)
Emitting Custom Events in Components (3:15)
Template Restrictions (1:37)
Two-Way-Binding to Input Fields (1:55)
Time to Practice - Vue.js - Problem (2:20)
Time to Practice - Vue.js - Solution (15:33)
Creating Vue.js Projects with the Vue CLI (3:16)
Why do we need Node.js and NPM? (1:32)
Using the Vue CLI to Create Projects (3:11)
Understanding the Project Folder (4:50)
Understanding .vue Files (3:06)
How the Application Gets Rendered (2:26)
Creating Global Components with .vue Files (3:42)
Creating Local Components (2:25)
Scoping Styles to Components (1:18)
Creating a Single Page Application (SPA) (1:08)
Adding Routing to the Application (5:57)
Linking with router-link (1:31)
Routing and the Server-Side (2:15)
Wrap Up (1:10)
Useful Resources & Links
Understanding Workflows & Webpack
Module Introduction (0:58)
The Big Picture (2:47)
The Role of Node.js and NPM (3:38)
Why do we need a Development Server? (2:30)
How Webpack Works: Entry & Output (4:00)
How Webpack Works: Modules, Rules & Plugins (4:24)
Wrap Up (0:58)
React.js - An Introduction
Module Introduction (1:14)
Using React.js to Create a Basic App (4:22)
Understanding How React.js Works and JSX (3:45)
Outputting Dynamic Content (1:20)
Handling Events and Updating the DOM (4:22)
Creating a First Component (2:48)
Passing Data into Components (Props) (1:51)
Creating Components using ES6 Classes (2:36)
Using State in React.js Components (5:02)
What Happens Behind the Scenes (2:17)
Rendering Conditional Content (3:18)
Outputting Lists (5:18)
Setting Styles Dynamically (3:11)
Setting CSS Classes Dynamically (2:05)
User Input & Two-Way-Binding (3:23)
Using Multiple Components (2:45)
Dumb Components (1:13)
Passing Data from Child to Parent (4:11)
Time to Practice - React.js - Problem (2:35)
Time to Practice - React.js - Solution (23:59)
Switching to a Local Setup & SPA (1:22)
Using the "create-react-app" Package (2:34)
Understanding the Created Project (2:48)
Using the Local Setup (2:38)
Adding React Router and Routes for the App (6:36)
Adding Links (1:46)
The React Router and a Server (1:20)
Wrap Up (1:23)
Useful Resources & Links
Angular - An Introduction
Module Introduction (1:07)
What It's Good at and What It's Not Good At (1:45)
Understanding Angular Versioning (0:48)
TypeScript (3:00)
TypeScript - A Brief Introduction
Creating an Angular Project with the CLI (3:46)
Understanding the Project Structure (3:31)
Understanding the Role of Components and the App Component (3:01)
How the App Starts (5:16)
Understanding the App Module (2:04)
Outputting Data with String Interpolation (1:31)
Handling Events (2:41)
Rendering Content Conditionally (3:26)
Outputting Lists (4:02)
Binding Data to (HTML and other) Properties (2:57)
Adding Dynamic Styles to Elements (4:23)
Adding CSS Classes Dynamically (2:45)
When to use the * Syntax (1:00)
Using Multiple Components (6:09)
Passing Data Into Components (2:04)
Emitting Custom Events From Components (5:39)
Using Two-Way-Binding (3:04)
Time to Practice - Angular - Problem (1:53)
Time to Practice - Angular - Solution (15:10)
Using the CLI to Generate Components (1:58)
Nesting Multiple Components (1:56)
Scoping Styles to Components (1:17)
Adding Routing & Routes (4:52)
Adding Links (1:56)
The Angular Router and the Server (1:08)
Wrap Up (1:31)
Module Resources
Comparing the Frameworks
Module Introduction (1:12)
Possible Comparison Dimensions (3:43)
Dimension 1: The Learning Curve (7:54)
Dimension 2: Downscaling & Fullstack Applications (6:53)
Dimension 3: Upscaling & SPAs (10:40)
Dimension 4: Performance (9:00)
Dimension 5: Ease of Deployment (The Way from Dev to Production) (8:13)
Dimension 6: Popularity & Job Market (12:36)
The Verdict (2:31)
...What About jQuery? (1:41)
Module Resources
Course Roundup
Roundup (1:43)
Course Source Code
The entire source code can be found attached to the
last lecture of each module!
Download
jquery-lodash.zip
Download
vuejs.zip
Download
vanilla-js.zip
Complete and Continue