Learning Frontend Development - ng2 for beginners

What is a framework?

A software framework is a reusable design for a software system (or subsystem). A software framework may include support programs, code libraries, a scripting language, or other software to help develop and glue together the different components of a software project. Various parts of the framework may be exposed through an API.

- Stackoverflow

Frameworks have become very popular throughout last few years, and they are commonly used while developing single page applications. In response to the market needs, we as Frontend Developers have to follow and meet latest standards. Therefore it’s crucial to be persistent when it comes to learning and keeping up with recent trends and clients’ needs. We simply can’t (and don’t want to) be left behind. Web development may seem like some kind of an endless journey, but it surely is an entertaining one. We have to constantly develop not only web applications, but our own skills as well.

How to start working with ng2

A lot of you probably have heard about Angular.js or even about its latest release, Angular 4. Some may, however, wonder what they need to do to start working with it. The answer is very simple. Ng2, which also refers to Angular 4, has been written from scratch, so it doesn't require angular.js knowledge. But there are some tools that makes newcomers’ lives much easier.

TypeScript

If you have never heard of this, I'm sure that you soon will. TypeScript is the main language used by the Angular team, as well as the language you will most likely see in Angular tutorials. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript (which runs on every browser).

TypeScript compiler can be installed as a Node.js package:

npm install -g typescript

Here’s an example of how TypeScript code is compiled into JavaScript:

/TypeScript/
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}

document.body.appendChild(button);

/JavaScript/
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
}());
var greeter = new Greeter("world");
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
alert(greeter.greet());
};
document.body.appendChild(button);

Angular CLI

We can do two things to compile TypeScript files. Either do it manually by typing

tsc filename.ts

or automatically compiling those files with a bundler. Customising a bundler on your own may be considered tiresome. Fortunately, the Angular team provides it’s own CLI which is already set up and ready to go. Angular CLI is a command line interface tool that can create a project, add files and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

To globally install Angular CLI you need to type

npm install -g @angular/cli

into your terminal.

Creating a new project is as easy as typing the following code into your terminal

ng new new app

Afterwards, navigate to the created project directory and launch the server by typing

ng serve

which launches the server, watches files for any changes you make, and rebuilds the app every time you alter your app files.

Choosing code editor or IDE

Frontend Developers have their own preferences, therefore code editors are a frequent topic of discussion. Naturally, every single one has pros and cons, but in my article I’ll focus on those that are recommended to use with TypeScript.

Visual Studio Code

Visual Studio Code is open-source, relatively new IDE (Integrated Development Environment). It was developed by Microsoft, therefore by the developers that are responsible for TypeScript as well as those working on ng2 with Google. Because of that, Visual Studio Code by default supports TypeScript, provides syntax and error highlighting, It’s also a multiplatform tool and is available for Windows, Linux and Mac.

Webstorm

Webstorm, in contrary to other IDEs, is not open-source. In my opinion, however, it’s the most powerful IDE. It automatically refactors your code by performing on its functions, such as extraction of variables, moving files, inline variable extraction, etc. Another convenience is an easy transition when switching from another IDE or code editor. You can simply adjust your hotkeys to the ones you have been using before. Writing TypeScript in Webstorm is absolutely intuitive. It has plenty of built-in features, which in other IDEs are only available by installing a bunch of dedicated plugins and packages.

JavaScript[ES6]

Sometimes we come across the opinion that the basic knowledge of JavaScript is sufficient enough to start working with ng2. As far as I’m concerned, it’s not exactly true. To fully understand how ng2 works, the at least intermediate knowledge is a must. To avoid an inconvenient situation where syntax seems to be completely incomprehensible and obscure when following through a book or video course, I suggest getting familiar with improvements that ES6 provided, as well as with the basics of object-oriented and functional programming. That’s what ng2 and modern single page applications are based on.

Where to look for information

Ng2 documentation

By the time this article was published, the latest release of ng2 was marked as 4.x. So from now on, I’ll focus on places over the Web where you can find significant information about ng2. First of all, and this doesn’t need any special explanation, you can check out the official ng2 documentation, where you’ll find simple explanations to the issues you may encounter.

Online courses

In addition to the documentation, you can also learn a lot about ng2 by online courses. A variety of tutorials available over the Internet is enormous, though finding an appropriate one is not so simple.

To cover different developers’ needs, courses have to stand out from the crowd and meet different standards, which:

• are constantly updated → following ng2 updates;
• create an opportunity for practical exercises;
• don’t underestimate the value of tutor’s and community's feedback and support.

I purposely have not mentioned a price as a criterion when choosing a course. Even though high prices may be discouraging, there are a lot of discounts and coupons, which make even the most expensive courses more accessible.

I think it’s best to look at some cases from different viewpoints, therefore I’m going to introduce three video courses that met my expectations. Both beginners and experienced developers can benefit from them - they can either learn the basics or delve into the details of ng2.

1. Angular 4 – The Complete Guide
   Course created by Maximilian Schwarzmüller, the experienced and professional development instructor. This one got to the top of my list, and I highly recommend it for beginners. Angular 4 – The Complete Guide met every single requirement I’ve mentioned before. Each concept is explained in details, and every section is followed by an assignment to practice the gained knowledge.
   This course has been updated to include information on Angular4 soon after its release, and is supposed to be kept up to date in the future. Not only the instructor provides feedback, but every single video course also contains a section dedicated to exchanging opinions between viewers.
2. Get Started with Angular
   High-quality Todd Motto’s course dedicated to Angular2. It's is divided into pro and fundamentals sections. Its popularity is definitely well deserved - as one on the best known courses it helps both experienced Developers and beginners. It provides various course packages, which may also include TypeScript introduction, what makes these courses highly comprehensive.
3. ng-book 2
   For those that prefer books rather than video tutorials, there is one I can recommend without reservation. Obviously, there are dozens of manuals, but that one has distinguished itself as essential to focus on. However, books get outdated in the course of time, so by subscribing to ng-book2 you not only get a copy but also access to the latest revisions of the book. This makes ng-book2 an ideal replacement (or complement) for video tutorials. What’s more, if you got stuck with an issue you cannot resolve, the community comes with help - there is a special chatroom dedicated to subscribers.

So why not to start with ng2 right away?!

A lot has been already said about how beneficial for Frontend Developers it is to keep on learning and developing our skills. Therefore I hope that my article convinced you to take a closer look at ng2. It’s really worth it!