Having finished React JS, Angular, and Vue JS – Quickstart and Comparison, a Udemy course created by Maximilian Schwarzmuller, and I can say without a doubt that it was one of the most well-paced, intuitive and enjoyable web development courses I’ve ever taken. Maximilian Schwarzmuller is an amazing instructor, and I look forward to taking more of his courses.
Moreover, they allow developers to create SPAs (Single Page Applications), which is an emerging design pattern in the web development world.
Whom is the course designed for?
The course is designed for a web developer who meets the following criteria:
Essentially, the course outlines the basic working of each of these frameworks so that viewers can decide which framework they like most, and subsequently, dive deeper into it. The course does not go deeply into any of these frameworks – it only teaches the user how to create a simple SPA using the framework. Therefore, the knowledge gained from the course would be insufficient to create sophisticated and meaningful applications using one of those frameworks. The main assumption is that once the course is completed, the user will have a framework in mind that they’d like to work with, and will start learning how to achieve more complex use cases using that framework.
The course has a section each for Vue, React, and Angular. In each section, Maximilian explains the basics of the framework — its syntax and how it works — and teaches the viewer how to create a simple SPA with the framework. It also has a module to explain workflows and webpack, also covering topics like NPM and Node.Js.
Maximilian concludes the course with a comparison of all the three frameworks, exploring and investigating parameters such as the learning-curve, the job-market, performance, along with several other relevant comparison dimensions.
- The code soon grows very large.
- Manipulating the DOM and handling events becomes a cumbersome task.
(The Todo app on JsFiddle.net)
This is how he introduces the advantage of libraries, which provide utility functions so that you can write less code to achieve a specific functionality. This allows you to focus more on the business logic of your application. So in the Todo app, he uses jQuery to make DOM manipulation simpler, and Lodash to make array manipulation and id creation simpler.
- Libraries are used to enhance small portions of your app, while frameworks offer a larger solution in terms of structure and state management for your app.
- The developer has more control over the app when using libraries, but a framework dictates the structure of an app, so the developer has lesser control.
As an example to demonstrate how a framework can enhance an application, Maximilian creates the Todo app using Vue.js.
Single Page Applications and Full-Stack Applications
Maximilian devotes a section in the course to explain exactly what Single Page Applications and Fullstack applications are, using Udemy as an example.
A full-stack application is the most common type of web application – here, the server returns a different page (or “view”) for different URL routes on the app. To demonstrate this, Max clicks on different links on Udemy and shows how a new HTML page is downloaded every time he does this (he proves this by showing the viewer the Networks tab in the developer tools).
He culminates this section by delineating the pros and cons of SPAs and FSAs – for example, FSAs are SEO friendly and offer simpler security solutions, but take time to load views. SPAs are the opposite.
Maximilian returns to Jsfiddle to explore the basics of Vue.Js. He shows how Vue can take control over a particular portion of the HTML using something called a Vue instance, which is then able to add dynamic behavior to it.
The way Max articulates how Vue works has to be lauded. He explains it in an easy-to-follow manner without leaving out important technical details, such as when he explains how Vue uses a virtual DOM to parse vue syntax and update the real DOM.
He then explains how to use Vue to cover basic use cases like dynamically updating the DOM using the v-on directive, rendering content conditionally using the v-if directive, and rendering lists using the v-for directive.
He also does a great job of explaining how to bind HTML attributes to properties in the vue instance using the v-bind directive, which is useful to add more dynamic effects to the DOM. To demonstrate this technique, he binds the style and class attributes to vue instance properties allowing different list elements to have different CSS styling depending on their parity.
Max makes it clear that it would be easier to outsource some of the code into its own reusable component, so he shows the viewer how to create components using Vue. He creates an app-username component that you can pass a username to and that can also alert that username when clicked by using custom events.
What I particularly enjoyed in the course was how he structured it to allow you to practice the skills you learned in a mini project. The mini project was this: you had to render a list of hobbies, dynamically style each hobby based on its parity, delete a hobby whenever it was clicked, output a message saying “a hobby was deleted!” whenever at least one hobby was deleted, and then finally outsource the list element into a reusable Vue component. You could then check your solution against his, which was always fun!
(The hobby project on JSFiddle)
In the final part of the section, Maximilian shows the viewer how to use Vue in a local environment as opposed to an online code playground like jsfiddle. He covers everything you need to know to make Vue projects – he explains the project and file structure, how to use NPM to install dependencies like the vue-router and vue-cli, and finally how to use the vue-router to make a simple SPA.
(The Vue SPA project, along with the project structure)
Webpack and Workflows
Then, he outlines the role of NPM – a package manager to install third party dependencies the app uses (eventually stored in the node_modules folder), and explains the structure of the package.json file, also mentioning how it can be used to share working projects without having to share the bulky node_modules folder.
He explains why we also need webpack and Node.js – to create a development server that would allow the HTTP protocol to be used during development, not the file protocol. He reveals how the file protocol is limited in capabilities and can’t be used to test functionalities related to the URL or domain of the app.
He also dives a little into the webpack.config.js file, briefly explaining how webpack works.
Although this section is a little tangential to the main course material, I’m glad he included it because the information you gain from this unit will go a long way if you’re a web developer. As Max says, NPM and Node.Js are de facto when it comes to web development, so having a firm understanding of these technologies would be immensely helpful in other web development projects.
He goes back to making a simple app to dynamically change the name outputted in the HTML file. Through this example, he covers basic syntax like rendering variables and handling events.
Max cleverly explains how React works by purposely running into a wall – he changes a name variable when a button is clicked, but the change is not reflected in the DOM unless the ReactDOM.render function is called again. So, he then introduces React components, the solution to this.
He covers how to create both functional and class-based components in React, and solves the problem with the DOM update by using state, setState(), and render() from a class-based component. I personally liked his approach of running into the problem and then solving it — it made understanding the basics of React a lot easier and more intuitive.
No different than in the section on Vue, he again amazingly explains how React works — how it uses virtual copies of the DOM to update and render only what has changed in the component.
Max then shows how React is used to render conditional content, render lists, bind html attributes to variables to make the DOM more dynamic, and what props is – a configurable object to pass data from the parent to child.
After the hobby assignment in the course (it’s the same for each unit), he leaves JSFiddle and then teaches the user how to create a local React setup by using npm to install create-react-app which creates a folder structure to build react apps. He goes on to explain the folder structure before finally moving on to creating a simple SPA using the react router.
(The React SPA project, along with the project structure)
Unlike the other sections in this course, Max doesn’t introduce you to Angular on JSfiddle. He makes it clear that Angular is not good for controlling portions of a multi-page application and that it’s been specially designed for creating SPAs. He also explains a little bit about the versioning of Angular and covers some of the basic syntax of TypeScript, which is what Angular 2 and 4 use.
After covering basic TypeScript features, goes on to explain how to use the Angular CLI to create a local project.
After touring the project structure, Max explains how Angular works – by bootstrapping the application using modules and components. He goes into some basic detail about two important files in the project — the app.component.ts file and app.module.ts file — which are good enough for a beginner to use Angular.
Next, he dives into the Angular syntax and explains basic use cases like rendering dynamic content using string interpolation, handling events, rendering content conditionally using *ngIf, rendering lists using the *ng. For directive, binding html attributes to class properties, two way data binding using ngModel, and finally passing data between the child and parent using @Input, @Output and the EventEmitter.
He also dives a little deeper into the Angular CLI – how it can be easily used to generate components, directives, and pipes, before finally concluding the section the same way using Angular’s router to create a simple SPA.
(The Angular SPA project, along with the project structure)
Comparison of the Frameworks
To compare the frameworks covered in the course, Max proposes the comparison dimensions he’s going to analyze: the learning curve, downscaling, upscaling, performance, how easy it is to go from development to production, and finally the job market. However, he makes it clear that there is no universal truth to which framework is the best, and that it really depends on the developer’s personal preferences and requirements. He also encourages the viewer to use his comparison dimensions as a starting point to conduct their own analysis of the frameworks, and that they should weigh each comparison dimension based on how important it is to them so that they can make an appropriate decision on which framework to pursue.
The way he explores each dimension is very impressive. It’s evident that he conducted an ample amount of research and gathered a bunch of data to evaluate each dimension. Most of his analyses contain intuitive, easy-to-understand diagrams, tables and charts, making them more cemented in facts and less subjective or opinionated. For example, when exploring the learning curves of the frameworks, he illustrates line graphs with periodic breakpoints that mark incrementally complicated use cases that the framework can achieve. This is important if the viewer needs to make an objective, reasoned decision.
For each dimension, he ranks the framework with a plus, a faded plus, or a minus to indicate how well they are with respect to that parameter. In the end, he builds an entire table of pluses and minuses for the frameworks, which is extremely helpful for the final decision.
Building apps with these frameworks can be really fun if you come up with nice project ideas. Watching the course and seeing the examples he codes can give you plenty of inspiration to create your own projects, but if that isn’t enough, here are some projects that I think would be fun to build:
- A game built using an SPA – you could have different views for different levels! You could create whatever games you want for each level and it might even compel you to learn animations with the frameworks, which could be useful in other projects.
- Ramp up some of your current websites that may be static in nature and make them dynamic by adding either React or Vue to them.
- Some type of utility app – for example, an SPA with a view each for a calculator, a translator, and a weather display. A project like this would force you to learn how to use external APIs. (You’re not going to analyze the weather yourself, are you?)
- SPAs usually perform better than FSAs, so you could look for a client who wants to convert their website from an FSA to a SPA. For example, a restaurant may have an FSA website but they’re looking to migrate to an SPA because they’re mainly focused on rendering information, and would like to avoid having a server to do that.
What to Learn Next
Maximilian is actually very active on Udemy and has created a bunch of web development courses, some of which are courses that actually dive deep into a particular framework. He’s made a specialized course for Vue, Angular and React:
- Vue JS 2 – The complete guide including Vue router and Vuex
- Angular essentials – Angular 2 + with TypeScript
- React 16 – The complete guide including React Router 4 and Redux
If you’re also thinking about going deeper into one of these frameworks, it might be a good idea to learn how to use state management libraries for your applications – Redux for react, Vuex for Vue, and RxJS for Angular. As your applications become bigger, it becomes more difficult to manage the state of the application, so these libraries would be immensely helpful in those situations. There are courses available online to learn them, though personally I don’t think you need an entire course to learn how to use these libraries, and free online tutorials should suffice.
If you’re also interested in app development, you could learn Ionic and React Native which use Angular and React respectively. With knowledge from this course, learning those frameworks would be simpler. Max has made courses for these frameworks too:
- React Native –React Native – The Practice Guide and The Complete React Native Course – Create Beautiful Apps
- Ionic – Ionic 2/Ionic 3 – Build iOS and Android apps with Angular
Key Takeaways from the Course
Along with of course learning the basics of using these frameworks, I felt that Max made some very important points in the course that I’d like to underscore:
- Angular is designed to make SPAs, and it is not suitable for FSAs, which is a major difference between it and Vue and React.
- The job market and support for Vue is the weakest among the 3 frameworks. Although Max is optimistic about the future of Vue, as of now, there are more jobs available for React and Angular. It is also worth noting that Vue has very few contributors as can be seen on Github. This is mostly because Vue is backed by a single individual – Evan You (fun fact: he’s an ex-Google employee), while React and Angular are backed by tech giants like Google and Facebook.
- When you create an SPA – you HAVE to configure your server to return the index.html page during 404 errors. This is because the server will not understand your client-created SPA routes, and to ensure control goes to the SPA when it’s loaded, you need to return the index.html page.
- Node, NPM, and Webpack are extremely essential when developing web applications on a local environment.
I absolutely and thoroughly enjoyed the course. I felt it was well paced and well structured. His delivery was engaging, easy to understand, intuitive, and I could clearly tell that I was learning from a web development expert. He did a great job with his research during the comparison section and every other section had enough coding examples and practice to understand how the framework worked.
I also liked that he went behind the scenes explaining some technologies. Having at least a basic understanding of anything you use is an important skill to have as a developer.
After taking this course, I also wanted to share some personal insights I developed:
- Angular is probably the most difficult to learn and hardest to set up. You can’t use Angular easily in FSAs; you need a local setup to create angular projects, and Angular has a lot of complicated syntax to work with – TypeScript, decorators, modules which the other two frameworks don’t have, and passing data between child and parent is not as intuitive as it is with React and Vue. So, if you feel like you’re going to be working a lot with FSAs and would like a framework that’s easy to work with, I do NOT recommend Angular as an ideal first framework to learn.
- Angular, though very complicated, is a much larger framework with more features. If you compare the docs of all the 3 frameworks, Angular has the most comprehensive one. You can do a lot with Angular – create your own directives, create your own pipes, leverage their advanced CLI, and also use advanced features like decorators and modules. This gives the impression that you can create more sophisticated apps with Angular. Creating an SPA with Angular is easier as well, since it was designed for that purpose, and unlike with the other two frameworks, you don’t need to install the router using NPM.
- Write the code along with Max during the course. Just watching someone write code will very easily go over your head unless you’re actively writing it yourself. So, to get the most out of this course, I recommend watching the course while simultaneously writing the same code yourself so that it gets ingrained in you. Plus, it’s more fun that way.
I hope you enjoy the course as much as I did! If you have any questions, please leave a comment below, and I will be happy to respond.