Resources for Learning TypeScript and Angular
I regularly do trainings and workshops about web development with TypeScript and Angular. This week, I worked with a group of developers who have a non-web development background. They asked me to summarize the most important readings for learning about modern web development. Their problem isn’t a lack of information. The amount of information on the internet is overwhelming and they asked for the really important resources. Here is my best-of-list.
Setting up your machine
This is what I recommend installing if you want to make your machine ready for modern web development. Note that I just recommend free and cross-platform tools here. Of course there are great commercial tools on the market, too.
- Editor: Visual Studio Code with the following extensions:
- Debugger for Chrome
- HTML Snippets
- Angular 2 TypeScript Snippets
- Docker Support
- Chrome or Chromium browser
- Angular CLI
- Angular Augury
If you are completely new to web development or you did your last web projects many years ago, you have to refresh your knowledge about the basics. MDN > Learn web development is a great starting point.
Tools: Git and Node.js
Most tools for modern web development are based on Node.js. Even if you do not plan to develop with Node.js yourself, you will need to have some basic understanding. The same is true for Git. All the tools you will use live on GitHub. Even if you use another source code management system, you will need Git basics to survive.
Nodeschool workshops are a good starting point. If you just want to understand the basics, focus on the following workshops:
CSS-Frameworks: Make your samples shine
If you are new to web development, you will struggle with making your samples or prototypes look nice. Fortunately, there are many CSS frameworks out there that can help if your design skills are not great. Here are two examples that I regularly use for my own samples:
Although I am not a CSS expert, I sometimes need to teach some CSS basics in my trainings. My samples and notes for that are on GitHub.
Tools: System.js and Webpack
In preparation for using Angular, you need to learn a bit about two tools.
Make sure to take a look at the TypeScript loader for webpack. You will need it for working with Angular.
Last but not least: Angular. If you are going to start with Angular now, I encourage you to skip the “old” Angular 1.x and go directly to Angular 2.
If you want to start your own Angular projects, I recommend using Angular CLI to setup your project. Setting it up by hand is not an easy task. Angular CLI gets you up and running within minutes instead of hours or days.
My own samples and notes that I typically use in my Angular trainings are on GitHub.
I could go on and on with resources about modern web development. The web is full of high-quality video tutorials, blogs, eBooks, etc. However, content and tools mentioned above are free and a great way to get started. Have fun!