Angular Developer Roadmap for 2019

Aleksandar Ginovski

2019 is an amazing time to be an Angular dev. Angular has become one of the fastest improving technologies these days with the latest stable version (v7). There are many roads you can follow if you want to become a great Angular developer. With this blog post, I plan to show you one possible roadmap for you that will make that journey easier.

I thought of writing this guide after pretty much going through the same patch in early 2017. Hope this guide helps you be the Angular dev you want to be in 2019.

Let’s start with the basics first.

🐊 Alligator.io recommends

Our recommended Angular courses

Getting started with JavaScript

When reading this blog post it’s most likely that you’ve written some code in javaScript in the past. Even if you just made a background color change on button press, this by itself is already some good experience. Let me share a few resources you can use to increase your JavaScript development skills:

  • Codecademy - if you’re looking for a place where you can learn to code in the most interactive way, Codecademy is your place. Their course Introduction to JavaScript will give you the basic expertise you need to have to get on the next level and start learning Angular. And, all that is totally for free.
  • **Learn JavaScript Online **- learnjavascript.online is a super simple to use platform in which you see how your code works while you’re typing it. It’s made for people learning JavaScript from scratch and people who want to get even more proficient.
  • **Mozilla Developer Network (MDN) **- in programming you don’t need to keep all the information you’ve learned in your head all the time. It’s very common to forget how to do something. When this happens, MDN will be your best friend. It’s the most complete database of resources for web development out there. Plus, they also have tutorials which will help you a lot, especially if you’re starting from scratch.

Of course, if you’re willing to spend a few bucks, there are tons of options in Udemy and Pluralsight.

Move your JavaScript to the Next Level with TypeScript

Ever since the release of Angular 2, knowing TypeScript has become a must. TypeScript is an Open Source programming language which is a strict syntactical superset of JavaScript and adds optional static typing to the language. Don’t think you’ll need to learn a new programming language. TypeScript uses the same syntax and semantics that you already know in JavaScript. It enables JavaScript developers to use highly-productive development tools and practices and make their application scalable. Learning TypeScript is the easiest thing after you already know JavaScript, so I’ll share some resources that I find very helpful.

  • TypeScript Official Docs - we can’t pass this section without referencing the official documentation for TypeScript. In my opinion, you don’t need other resources and I definitely recommend starting from here. Again, when using TypeScript in your day to day activities, you’ll also need this as a pinned tab.
  • Learn TypeScript in 5 minutes - at first glance the title sounds super unpromising, but I can guarantee that after getting familiar with JavaScript, it won’t take you much time to start using typescript. So check that article on freecodecamp and see it with your own eyes.
  • Best practices in TypeScript - you need to know some best practices in all languages you learn, so this article will help you a lot when you start getting more fluent in TypeScript.

Start Your Journey with Angular

Start with the essentials

After getting familiar with JavaScript and Typescript it’s time to move on and choose a framework to learn because these days you’d rarely use vanilla JavaScript to create a large web application from scratch. Angular is a great choice because it’s quite easy to learn and it’s improving each day. When you start learning a new framework it’ll most likely feel as if you’re learning a new programming language. But after giving yourself time and being patient, you’ll see that the frameworks are actually made to make your life as a developer easier.

So I’m sharing with you some resources that helped me get started:

  • Official Angular Docs - this is the information center point for Angular development. You can’t learn a new framework if you don’t look at the docs. Starting from there will ensure that what you’re learning is always up to date. The Angular docs website contains all the information you’d need to be a pro at Angular development. I’m pretty sure that you’ll also have that as a pinned tab. 😉
  • Techiediaries - this is one of the most detailed tutorials I’ve found out there. It shows how Angular changed through the different versions and what was actually introduced in each of them. Techiediaries shows you how you can build a full web application from scratch with Angular 7.
  • Udemy Angular Course - if you want to spend some money in your development education, Udemy is again on of the top places where you can do that. More than 240,000 people have enrolled in this Angular 7 course and it’s one of the best Angular courses out there. I personally recommend it.

Create a web application by yourself

Reading articles and watching videos won’t give you the confidence that you “can do the stuff”. The best thing you can do to learn the most is to create an application by yourself. Think of a web application that you’ve always wanted to create and you can do it now using the power of Angular.

If you have seen all those resume examples where people are saying that they “know X, Y, and Z”. It’s not enough for a developer to say that they “know stuff”, they need to show that they can “do stuff”. So, creating an application by yourself will teach you things that you can’t learn in a different way unless you do something real. And, of course, that’ll be the strongest part of your resume.

Angular is one of the most popular frameworks out there, so if you don’t have any idea of what you can do as your first Angular project, I’m going to share with you a few collections of projects which should inspire you.

So, we’re going to start with the most common and easiest projects that should teach you a lot:

  • Hello World with Angular - you’ve probably heard about the hello world apps that each developer is doing when starting to learn a programming language. Did you know that can do the same when learning a new web framework like Angular? This repository provides a simple starter project and a basic look at the project structure.
  • To-do list - looks simple at a first glance, but actually, by making this project, you can learn all the stuff that I listed above. TodoMVC showcases the exact same implementation of a to-do list by using different frameworks and codebases. The Angular example has different implementations using different versions of the package and also different packages to achieve that.

Following up with some great places you can find web apps and tools made with Angular:

  • Madewithangular.com - this website is an awesome collection of projects made with Angular. It’s super helpful to see how Angular changed through the years because it contains projects with different versions of Angular and each version is written at the top of the project. Of course, if they are Open Source, you can try searching them in GitHub and see their code. If you are still not inspired enough to learn Angular, you can see here how large companies are using it to create some of their websites.
  • AngularExpo - like the above, AngularExpo is a collection of different websites, UI components, and experiments done with the Angular framework. Some of the projects, like UI components you can use directly in your application to make the development process much easier.
  • Github - Github is definitely a place you’ll visit a lot. It’s one of the largest development platforms out there with more than 100M repositories. Try searching for “angular” in the search bar at the top and you’ll definitely reach thousands of projects that are using Angular in some way in their code.
  • Collection of directives you can use directly in your Angular applications.
  • Want to have charts in your app? There are already great chart libraries that work perfectly with Angular.
  • You’re probably also going to need to make requests to some external data or a REST API, so restangular is a great library that does that for you out of the box.

Keeping track with Angular updates

As I said, frameworks like Angular are changing very fast. You just blink and there is a new version. So you need to keep track of those things to be up to date. The main source you should look for that information is the Angular releases page. There you can see really detailed explanations of all changes and see planned future releases. Following those, you can prepare your application for an upgrade a few months before the release.

Become a Testing Guru

You don’t want to be one of those developers that say “it works on my computer”. You want to make sure that every time you update even a tiny part of your code, the other parts of your application will still work as expected. And, you don’t need to do that testing manually each time you change something in your code. You can automate all that using libraries like Jasmine.

When using libraries like Jasmine for unit testing, the only thing you should do is to say what you expect your function to return when you pass it some data. And try to make different cases, so that you are sure you get close to 100% test coverage. The links below will help you become a master with unit testing:

Often, you won’t be able to test the whole application using only unit tests. That’s why there are end-to-end tests. Those are tests that are simulating running your application in a real environment and it’s testing the exact behavior when people are doing some actions in it. Protractor is one of the frameworks you can use for that and it’s very easy to use. Here are some examples and best practices of how you can write your end-to-end tests like a pro:

After you create the tests for your application, you can use continuous integration to make sure your tests are going to run always before deploying your application to a production environment.

Follow Best Practices

You can write a piece of code that solves a problem in thousands of different ways. Some of those ways are poor, some of them are acceptable and a really small part are great. When starting your development career you’re probably going to jump on the first solution that comes to mind, which will probably not be the best possible. But don’t worry, that’s quite normal, everyone goes through that. That’s why after getting familiar with the technologies it’s time to start looking at some patterns and best practices:

  • JavaScript Style Guide - before we even start thinking of best practices in Angular, we should definitely focus on best practices in JavaScript. Airbnb created a super detailed style guide in their GitHub organization which shows one of the best ways you can write JavaScript code. In my personal opinion, every JavaScript dev should go through the whole article to write quality code.
  • Best practices for a clean and performant Angular application - with more than 14k claps in freecodecamp.com, this post is one of the most detailed for best practices you can use directly in your Angular application. It covers basic topics from “const vs let” to more complex ones like “lazy loading” and “nested subscriptions”.
  • Angular in patterns - this repository contains information where different design patterns are used inside the framework. The best way to learn something new is to see how it’s used in other places. So, this article will show you a collection of design patterns and how they’re used in Angular.

Conclusion

With this post, I showed you a collection of resources and steps you can follow to make the first step in your journey as an Angular developer. Things are changing fast, so if you really want to become a great Angular dev you need to start now. Start with learning JavaScript, raise the bar with TypeScript and put everything you know into practice by learning Angular. Practice and lots of practice make a developer best! 🏅

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#