After learning the basics about JavaScript, the JavaScript world can be very intimidating. There are lots of different frameworks like Angular, React or Vue, libraries and other packages (like webpack).
You’ll quickly see yourself ask questions like:
What do all these packages, tools, libraries and frameworks do?
What IS a library and what’s the difference to a framework?
Which framework should you learn? Angular, React.js or Vue.js?
What about jQuery?
This course will help you with that!
You’ll get an introduction into the three most important JavaScript frameworks (Angular, React.js and Vue.js) and you’ll also get a detailed comparison! This will then allow you to pick other resources or courses to dive super-deep into your chosen framework whilst having a solid foundation already.
Throughout the course, we’ll dive into the basics of these frameworks but we’ll also have a look at why we use them to begin with. The role of jQuery and how these frameworks differ from jQuery will be clarified, too!
Which framework should you learn?
Not only are we going to dive into the basics of the three most popular JavaScript frameworks, this course will also draw a detailed comparison. A couple of different dimensions will be considered to find out which framework might be the perfect tool for the job you have at hand!
This course won’t stop at this point though!
We’ll also have a look at Webpack and “Build workflows” in general. You’ll learn which role these (and the respective packages like Webpack) play and why we need them. You will also understand which role ES6 and TypeScript play.
Here’s a detailed overview over what you’ll get!
An introduction to today’s JavaScript world and an immediate overview over the different roles of the individual pieces
A practical example showing you why vanilla JavaScript (=without any libraries or frameworks) might NOT be all you need
An overview what JavaScript frameworks are and where to use them
Detailed introductions to the three most relevant JavaScript frameworks as of today: Angular (2, 4), React.js and Vue.js
An introduction to Webpack and why we use it (and build workflows in general)
A detailed comparison of the three frameworks shown in this course – when could you pick which?
A detailed understanding of the JavaScript world as it is today
Is this course for you?
Now that you learned what this course offers, let’s find out if it’s the right choice for you. It’s definitely the right choice if you can answer at least one of the following questions with “YES”:
You have basic JavaScript experience and want to learn how to use libraries or frameworks to “do more with JavaScript“
You’re not sure which JavaScript (frontend) framework you should learn
You already know something about JavaScript frameworks but want to get a basic introduction to the three most important ones
You already know either Angular, React.js or Vue.js but also want to get an overview over the other two frameworks
You’re totally confused by the many terms the JavaScript world throws at you
I’d be very happy to welcome you on board of this course!
Let me introduce to this course and its content.
What's the goal of this course and what are you going to learn? This lecture takes a closer look.
JavaScript is a super important language when it comes to web development, especially frontend development. Let's take a closer look at it.
Let's take a look at some of the most important pieces of the world of JavaScript.
Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!
To understand what we need this course for, we need to understand how we use vanilla JavaScript and why we might face some limitations when sticking only to it.
Let's continue with our JavaScript app and see how we can build a at least a little bit more complex app with vanilla JavaScript.
Time to conclude our JavaScript app - look at what we built!
Now that the vanilla JavaScript solution is finished, let's analyze it and see how we might improve it.
Vanilla JavaScript doesn't do the trick, jQuery to the rescue!
jQuery is not everything the JavaScript library world has to offer. Let's have a look at another popular framework.
We had a look at jQuery and Lodash - time to summarize the role JavaScript libraries play.
You might've heard about Frameworks, too. What's the difference between Libraries and Frameworks then?
We can even improve the jQuery solution - by using a JavaScript framework. Time to introduce Vue.js.
There's more to the JavaScript world than just libraries and frameworks like jQuery and Vue.js. What about ES6, TypeScript and Webpack?
You might've heard about ES6 and TypeScript. What's the role of these languages, how are they connected to JavaScript.
Now that we got started and understand why you might want to learn more about JavaScript, let's have a look at the course structure in detail.
Learn where to find the course source code in this lecture.
Useful resources for this module.
Let me introduce you to this module and explain what you can expect from it.
There are two different ways of using JavaScript frameworks. Let's have a look at the first one: Embedding them in fullstack applications.
The other way of using JavaScript frameworks is to use them in Single-Page-Applications. Let's have a look at what this is.
Better than learning it in theory is seeing a framework being used in a real fullstack app. Let's have a look at the Udemy page.
Now that we saw a page using a framework in a fullstack app context, let's now view an example running a SPA with a JS framework.
What are the pros and cons about using a JS framework in a fullstack environment? Let's find out.
What are the pros and cons about using a JS framework for running a SPA? Let's find out.
What do you need to know if you really want to dive deeper into the individual JS frameworks?
In this lecture, you'll find useful module resources.
Let me introduce you to this course module and to Vue.js.
Time to create our first (well, actually second) Vue.js application and see how it works.
We built our first (or second) app, let's now analyze how Vue.js works.
We had a look at how to output data but how can we react to use events and how is the DOM updated?Let's have a look.
Sometimes, you don't want to render certain pieces of the DOM all the time. You might prefer to have a condition controlling the displaying of that content. Welcome to v-if.
Just as you could output content conditionally, you can also easily output lists of content. This lecture explores how that works.
We learned how to output data with interpolation and how to react to events. What if you want to manipulate some HTML attributes or properties? It's super easy to do, too.
Vue.js makes the dynamic styling of elements very easy, too. Learn how to adjust styles at runtime with ease in this lectures.
Besides assigning styles dynamically, you can also set CSS classes dynamically. This lecture shows how.
Tired of typing v-bind and v-on all the time? There is a shorter way!
You're not limited to one Vue instance as this lecture will show - learn how to easily use multiple ones.
When using multiple Vue instances, you might not be able to achieve what you maybe planned to achieve. Let's take a look at the problem you might face.
Components to the rescue! There's an easy way of creating re-usable code pieces and this lecture shows you how it works.
Many components require data from outside to work correctly. This lecture shows how to easily pass such data.
You're not limited to passing data into components, you can also emit your own events to which the parent component can listen.
As you learned, a Vue instance or component has a template - the HTML code which is rendered to the screen in the end. Certain restrictions apply for normal templates. Learn more about these in this lecture.
So far we only considered unidirectional data flow. You're not limited to that though. Let's dive into two-way-binding in this lecture.
Time to practice what we learned.
Your chance to compare your solution to mine.
For more complex projects and especially for SPAs, you may need more complex development environments and build workflows. You can easily create these by using the Vue CLI. Learn more about it in this lecture.
For the CLI, we installed Node.js and the Node package manager (NPM). Why do we need these tools?
Learn how to use the Vue CLI to create projects locally on your machine.
The Vue CLI created a project folder for us - time to understand the content of that folder.
Remember the template restrictions? .vue files are there to save the day. Learn more about them in this lecture.
With all these files and folders - how does the app actually get rendered?
Now that we understood how to use .vue files, let's use them to create global components.
We're not limited to global components - let's learn how to create local ones in this lecture.
Components and CSS - that goes together very well as it turns out. Let's explore how to scope styles to components in this lecture.
So far, we didn't really create a Single Page Application. Let's now learn how to use the Vue Router to do just that.
Routing is an integral part of most applications. Learn how to add it to serve multiple pages in a SPA. Crazy, huh?
Having routes is great but having a way of getting there is even better, time to learn more about router-link.
Of course your SPA needs to be hosted by server and since servers tend to also handle routing, it's important to understand how to make your SPA work together with the server harmonically.
We learned a lot about Vue.js, time to wrap this module up.
In this lecture you'll find useful module resources
Let me introduce you to this module and the goal of it.
What are all these workflows and tools about, why might you want (or need) to use them? This lecture explores this question.
We installed and use Node.js and NPM - why? This lecture takes a closer look.
In the last course module, we also started using a development server? Why do we need one when working with client-side technologies like JavaScript?
Webpack is a core tool of modern JavaScript development. Learn the basics about it, starting with entry and output.
Whilst entry and output files are the core feature and definitely required, having rules to work with all these files is also important. Let's take a closer look in this module.
Let me wrap up this module.
Google 
Facebook