| | |

Front End JavaScript Frameworks

Having finished React JS, Angular, and Vue JS – Quickstart and Comparison, a Udemy course created by Maximilian Schwarzmuller on front end JavaScript Frameworks, 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.

We hear a lot about JavaScript frameworks – React, Angular and Vue – in the web development world, but what are they exactly? What’s their purpose? Should you care about them? How long would it take to learn them and start making applications with them? These are all questions that Max’s course addresses. I’ll be going over the course material he covers, along with adding personal thoughts relating to my experience taking the course.

React, Angular and Vue are JavaScript-based frameworks that you can use to create user interfaces for the web. These frameworks are useful because they make manipulation of the DOM (Document Object Model) much simpler, allowing developers to focus more on the business logic of their applications.

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:

  1. Has a basic grasp of JavaScript.
  2. Is looking to start using one of these popular JavaScript frameworks in their applications but doesn’t know which one to delve into.

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.

Course Topics

The course begins with a brief introduction to JavaScript — what its role is in web applications, what the JavaScript world entails — and then moves on to the limitations of vanilla JS applications, explaining when a developer may want to utilize a JS library or 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.

An Introduction to JavaScript

After a brief explanation of the client-server model, Max moves on to create a simple Todo application using vanilla JavaScript on jsfiddle.net (an online code playground). As he creates the Todo app, he sheds light on the limitations of vanilla JS when creating dynamic applications :

  1. The code soon grows very large.
  2. 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.

After explaining the role of libraries, he then reveals that the Todo app can be enhanced even further using a JavaScript framework. A framework, along with giving basic utility functions like a library, also gives your application a structure that makes managing the state of the application easier. So, the two key differences between frameworks and libraries he draws are:

  1. 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.
  2. 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).

A Single Page Application (or SPA), a growing trend, is when the server returns only a single HTML page, and different URL routes are handled on the client side by JavaScript, which loads different views (almost like a new page) according to the route. Maximilian uses the Udemy course dashboard as an example here, as clicking different tabs on the dashboard does not load a new HTML page, but the view still changes.

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.

Vue JS

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

In this course, Max outlines perfectly what role webpack plays during development: “Webpack is a bridge between code that is structured and written the way you want, and code that is understood by the browser.” Essentially, webpack allows you, as a a developer, to scatter code across files, use ES6 (a newer of version of JavaScript that not all browsers understand) but still be able to ship code that the browser will be able to run.

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.

React

Just like with Vue, Max returns to jsfiddle to explain the basics of React. In this section of the course, he effectively articulates what JSX is – an extension to JavaScript created by React that renders content to the DOM. He’s emphatic about how JSX is html-like code, but not exactly html. He proves this by replacing the JSX with normal javascript functions and showing how the output remains the same.

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.

Another aspect I liked about this section is that he emphasizes how React lives in a JavaScript-based world, and how all the above use cases are handled by just manipulating variables in JavaScript and updating the DOM using setState, so there’s no need for custom syntax like directives. Making it clear to the viewer that they just need to leverage JavaScript is a key takeaway from this unit.

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)

Angular JS

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.

Project Ideas

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:

  1. 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.
  2. 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.
  3. 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?)
  4. 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

The whole point of the course is to introduce you to all the three most popular JavaScript frameworks so that you can decide which framework you enjoyed the most and which ones you want to dive deeper into. The knowledge you gain from just this course is not sufficient to build meaningful applications, so it’s highly recommended that you go a step further after taking this course.

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:

  1. Vue JS 2 – The complete guide including Vue router and Vuex
  2. Angular essentials – Angular 2 + with TypeScript
  3. React 16 – The complete guide including React Router 4 and Redux

If you’d like to learn one of the JavaScript frameworks from the course in-depth, you could definitely take one of those courses, since Max creates quality content.

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:

  1. React Native –React Native – The Practice Guide and The Complete React Native Course – Create Beautiful Apps
  2. 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:

  1. Angular is designed to make SPAs, and it is not suitable for FSAs, which is a major difference between it and Vue and React.
  2. 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.
  3. 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.
  4. Node, NPM, and Webpack are extremely essential when developing web applications on a local environment.

Personal Thoughts

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:

  1. 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.
  2. 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.
  3. React is probably the most fun to work with. I really like the idea that you can blend your JavaScript and html in a single file using JSX. You don’t need to manage multiple files for a single component since you can do the styling, behavior and markup all in a single file. To me, using JSX was a refreshing change to the web development I was formerly accustomed to.
  4. 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.
  5. Vue seems like a mix of React and Angular. It’s similar to React in that it uses JavaScript, can use JSX, and passes data to the child using props, but it’s similar to Angular because it uses template directives and string interpolation.

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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *