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.
- **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.
- 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.
- 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
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.
- Use Git to keep track of your contributions and easily come back to an older version of your code.
- Use package managers like Yarn and npm to install new packages and update the current ones.
- Learn how to use task runners like Gulp and npm scripts to automate your development workflow.
- Create a coding style for your website using Prettier and TSLint.
- Learn how to use continuous integration services like Codeship and deploy your application to cloud platforms like Heroku.
- Learn how you can unit test each part of your code using libraries like Jasmine, Karma and Jest.
- Make end-to-end tests and make sure that your application works as expected all the time by simulating interactions using a real browser - Protractor and cypress.io are some of the frameworks that’ll help you a lot with that.
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:
- Learn what are the top 8 benefits of writing unit tests.
- Learn a bunch of patterns that’ll make you sure that your unit tests will catch 99.99% of the expected outcomes. When reading this blog post you’ll also see examples of anti-patterns so you’ll definitely know what not to do.
- 5 questions every unit test must answer shows one of the key things you need to address when writing a unit test.
- To be able to test, first, you need to make sure that your code is testable. A great article from Toptal explains how to write testable code and why it matters.
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:
- Learn how to build your first end-to-end tests using Protractor.
- Check out 15 best practices for building automated end-to-end tests.
- If you want to choose a different framework for end to end testing, see those 5 highly rated frameworks.
- Learn more on how to walk in the user’s shoes and make sure you don’t miss any edge case.
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.
- How to get started with continuous integration (CI).
- Learn from the experts to understand continuous integration at a high level.
- How to speed up your continuous delivery and get a fast build.
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:
- 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.