In this set of mini series, we’ll look at modern web technologies and cover the basics of what they are and how to use them. We’ll look at Angular, React, Vue.js, Node.js and more. Let’s get started with Angular.

A brief definition

Angular is a web framework, written in JavaScript by a team at Google. It’s free and it’s open source. Open source means that the source code for Angular is available for anyone to copy, study and modify, therefore create different versions of the same or create packages that extend its capability.

History

Angular is not to be confused with AngularJS, its predecessor. Many concepts were retained from AngularJS to Angular, however it was a complete re-write, released in 2016 and a lot has changed.

Web Framework

What’s a web framework and why do we need one? Angular is a web framework, specifically a “JavaScript framework” and its job is to make our lives easier as web developers, allowing us to:

  • write less code to achieve our goals than if we didn’t use the framework
  • spending less time understanding new projects which use the same framework thanks to a similar code structure
  • build our projects in a modular way which makes it easier to find, fix, maintain and extend the code

Before Angular

AngularJS was one of the first MVC JavaScript frameworks to go mainstream at a time when jQuery dominated the market, mostly because it was backed by Google, but also because it was quite revolutionary.

Other JavaScript frameworks existed, like jQuery, but they weren’t MVC.
MVC stands for “Model, View Controller” and clearly separates Data from Pages from Functionality.
Frameworks like jQuery only solved the first of the 3 points mentioned earlier: “write less code”, but data, functionality and pages were often mixed together and intertwined, making it hard to maintain large projects, add and remove functionality and fix bugs.

The Angular Revolution

When Angular was released, it was like magic.

2-way data binding

The first and most common example of Angular in action is the 2-way data binding, represented in the code below:

<input type="text" [(ngModel)]="name">
<p>My name is {{name}}</p>

Without writing a single line of JavaScript, we now have a <p> tag that displays whatever is typed in the input field, in real time.

Loops and data sync

<ul>
    <li *ngFor="let fruit of fruits">{{fruit.name}}</li>
</ul>

Using ngFor, we can display a full list of fruits (where the data for fruits can come from any desired source, such as an API). Again, we haven’t even opened the JavaScript file to achieve what would otherwise be a tedious task to write from scratch.

What’s more, this data is in constant sync, it’s “alive”. If you add a new fruit to the list or remove one, the list on the page is automatically updated, instantly, without writing any extra code.

Components

Components are a fantastic way to modularize your code into reusable self-contained blocks that can be added anywhere, keeping your HTML slim:

<basket title="Shopping Basket" products="fruits"></basket>

<basket> is obviously not an HTML tag and products= is certainly not a standard attribute, but Angular lets you write your own components which you can name whatever you like and pass any data to any attributes of your imagination.

.directive('basket', () => {
    return {
        template:
            `<div class="basket">
                <span>{{title}}</span>
                <ul>
                    <li *ngFor="let product of products">{{product}}</li>
                </ul>
            </div>`
    }
})

Angular will then transform the above code snippet into valid HTML, displaying a shopping cart with the title “Shopping Cart” and the list of all the products (fruits) that you passed to it.

Routing and SPA

Another important aspect of Angular and modern JavaScript frameworks, is the use of client-side “routing” which gave birth to the SPA, or Single-Page Application.

Traditionally, every time you navigate to a new URL in the browser, like mywebsite.com or mywebsite.com/about, the server would be responsible for putting together the correct HTML page with the right CSS and corresponding JavaScript files, then send that to you over the Internet.
With SPA, however, all the HTML pages, CSS and JS are sent to you at once by the server when you visit the fist page, mywebsite.com (just like downloading an application on your phone), but only show you the relevant content for that page, then, when you browse to another page of the site, Angular, thanks to its Router, will hide the content of the first page and show you the second one instead, instantly, without traveling through the Internet to the other side of the planet and back, thus making navigation between pages incredibly fast.

These are some of the innovations that were born with Angular and other modern frameworks used today, there are many more to learn once you study and learn Angular.

Learn to Code in Paradise

Angular CLI

A very useful addition to Angular, was the introduction of a CLI (Command-Line Interface), which allows us to create more consistent and structured projects as well as saving time. For example, the command ng new will create an entire Angular app for you, ng g directive will create a new directive and ng serve will start a server and run your app in the browser.

Pros & Cons

Angular is a fantastic framework and it comes packed with features: the MVC, a router, filters, services for HTTP requests, a testing environment and more. Pretty much everything you’ll ever need is a command line away.

However, with so much packed-in, it can be overwhelming for new developers, especially if working on small projects that don’t require so much complexity. Typescript, the new syntax introduced with Angular, is an additional learning curve if coming from plain JavaScript.

AngularJS was much simpler than Angular and although it’s not going to be maintained in the future, it still is the easiest of all modern JavaScript frameworks to learn and a great place to start if you’re working on small personal projects.

In terms of popularity, Angular is being used mostly by big companies working on big projects, React seems to be winning the battle, while newer contestants like Vue.js are gaining ground challenging the bigger players. In terms of job opportunities, as of 2019, Angular is still strong, however React developers seem to be more in demand and the average salary is higher.

Conclusion

Angular is one of many JavaScript frameworks and the most comprehensive: if you’re looking for a one-stop shop, look no further. But keep in mind that other options exist such as React and Vue.js
With the recent advancements of JavaScript E6S, many have started to question whether you need a framework at all.
What are your thoughts? What’s your favorite framework and why?
Comment below.