A Good Tutorial Goes a Long Way

When I first became interested in learning newer frameworks a few months ago, the first one that I had considered was Angular. When I went to their site, it was only a few clicks before I had landed on one of their own tutorials. Their tutorials, while not perfect, have me excited to use Angular for this side project of mine.

College, in essence, is a series of tutorials. The classes I had done on edX.org or Pluralsight.com are basically tutorials. There have been other "courses" that I have done online that are still just tutorials. Some of these tutorials have been great, others ok, and still some horrible. How well these tutorials were constructed and delivered were instrumental to how well I retained the information and even desired to learn more.

About two months ago I went to Angular.io on my son's computer. Long story short, I have a much older laptop that only has a dual core processor and 16GB of DDR3 memory. I figured that if I wanted to start doing some personal development on the side, I would probably have a smoother time on his newer computer with 8-cores and 32GB of DDR4 memory. While that may be true, I think the Angular tutorials showed me that I will be just fine on my old laptop - for now.

When I first when to Angular.io, there was a banner that said something like "See the future home for Angular developers." When I clicked on the link, I was taken to Angular.dev. I was just one click away from a tutorial like none that I had taken before.

Learn Angular Tutorial

The first tutorial, that I reached by clicking the Learn Angular button on the home page of Angular.dev, is the Learn Angular tutorial. You can also get to this same tutorial by clicking the Tutorials button on the sidebar menu and then clicking the Learn Angular tutorial. This tutorial was completely in the browser and allowed you to make directed edits that would then display in a preview.

I really liked this tutorial because it allowed you to deal with the framework rather than having to worry about setting up your local environment. The steps were short enough that you could easily do a step in about five minutes or less. And because each step was a unique URL, I could come back later to a step that I left off on.

For the most part, this tutorial worked well enough on my laptop. It did seem that the preview at times would hang, and I would need to refresh my page. If I did, as I expected, I lost all changes. This seemed to happen more on my laptop than it did on my son's computer, so I do not fault Angular for this.

I have two suggestions to possibly make the tutorial better.

Update the Tutorial

There were a few parts where the directions and the actual work were out of alignment. Just as an example, on the Optimizing Images step, it gives an optional step to do an image loader. They show part of the solution, but do not show the full solution (at least from my testing). And their Reveal Answer did not provide it either. There were a few situations like this if I remember correctly, so it would be nice if someone could make sure they line up correctly.

GitHub User Tutorial

I am sure this would be possible, just not sure how difficult it would be. This is going to be a bit disjointed, but I hope it makes sense: A GitHub user could sign in, a public repository for the tutorial saved to their account, and any changes as they move through steps is saved in their repository or reloaded if they ever log back in. This could allow people to refresh the page (they would need to commit before refreshing) but also allow them to evaluate the changes in their repository.

Build your first Angular app locally

This tutorial was not so great. It did have some videos (which I did not watch), and it has most of the steps the Learn Angular tutorial had. However, some of the steps gave you directions for how to do this locally as well as how to do it in the browser. Because of this duality, I think some of the steps were a bit different between the two.

Oh, yeah, and the worst part of all: The files they tell you to download to do this app locally were missing key files!

I attempted to download the source files on three different steps of the tutorial. I did this because one of the first steps talks about setting up your local environment (great) including calling npm i to install the packages needed for local development (great). The biggest problem is that there is no package.json file included in the downloaded files (horrible), so the npm call downloads nothing.

I thought that MAYBE this was an issue on that step, so I tried to download the files from another step. And another step. But all three steps never includes the package.json file. That was a rather big bummer because I was really wanting to see how to work with Angular in VS Code. I still will, but it likely won't be at their direction.

I was able to do most of the steps in the browser, but the last four or five steps were suggested to only be done locally. That makes sense because of what the steps were doing, but because I was never able to setup and run locally, I just had to read them to see what they might do. Thankfully, they were all pretty straight forward and made sense to me.

---

At one point, I wondered if other modern frameworks/libraries had similar tutorials. I've done some work with React and I was rather surprised to see that React did not have anything of the sort unless I am looking in the wrong place. It does seem like Vue and Svelte also provide similar tutorials, so that seems to be a nice trend.

The Angular tutorials were decent enough that I am still pretty excited to start working with Angular. I am sure there are a lot of things I will need to learn that are not currently in the tutorials. It is my hope that Angular will continue to expand their current tutorials and hopefully add others.

I am still going to have to get used to working with a Single Page Application (SPA), but I like that Angular can still use an MVC like structure and separation. I like that I can have my javascript, css, and html in separate files. That fact alone is why I want to do this project in Angular and not Vue, Svelte, or React.