Drinking From the Fire Hose: How I Learned Angular Without Modern Web Experience

In 2017, I (Andrew Wiens) joined Oasis Digital as a full-time developer and found myself needing to learn JavaScript, TypeScript, and Angular. Additionally, I also needed to learn reactive programming, which in Angular involves RxJs and @ngrx. While I had built static websites for a few non-profits in middle and high school with HTML and CSS about ten years prior, I had no experience with JavaScript, let alone its vast number of frameworks. Since many of Oasis Digital’s projects were developed in Angular, I needed to start by learning both TypeScript and Angular in sufficient depth to provide benefit to my team, yet I needed to learn quickly enough that it didn’t take many months before I could contribute. I also found that learning TypeScript (TS) was much easier once I had learned the basics of JavaScript. In this blog post I will explain how I succeeded in jumping into Angular development and provide tips for learning Angular and jumping into the JavaScript/TypeScript world from scratch.

My Background

As an electrical engineer with a master’s degree who had published several first-author IEEE journal papers in a PhD program, I came from a background several years long of writing software and implementing designs in MATLAB, C/C++, Python, and a few engineering CAD tools. Additionally, I had some experience with C# and XAML in .NET from internships with a large semiconductor company and a scientific government agency. While prior experience with programming languages of any kind helps when learning any new language, my background in engineering and scientific computing had little in common with the wild world of the modern web browser. Not only were the tools for web development less mature, but the design patterns of reactive extensions were completely different than the imperative style of MATLAB. Additionally, my experience in .NET was not nearly as deep as a full-time .NET developer.

Nonetheless, I found that the learning curve for JavaScript/TypeScript and Angular was not particularly steep. Having had experience with lambda functions in Python, which JavaScript uses extensively, and .NET’s MVC pattern, which Angular also shares, I found JavaScript and Angular to be rather intuitive after an initial crunch period of about a month.

Learning JavaScript and Angular

My overall strategy for learning JavaScript and Angular quickly was to:

  1. Find the best introductory material, and
  2. Consume it rapidly

Since graduate school had endowed me with a preference for self-learning, I began looking for resources on my own to build an initial runway. This was both highly rewarding and successful. However, I quickly found that my understanding of programming exceeded popular choices such as Codecademy, W3 Schools, and Learn-JS.org. While these resources are definitely helpful for many people, I needed to find tutorials that were geared more toward current developers and less toward those who are new to programming in general.

Early on, I also tried learning from books on Angular and JavaScript. These included Beginning Angular 2, Angular 2 by Example, JavaScript Enlightenment, and JavaScript: The Good Parts. Although these books were accurate and thorough, I found that the Angular books were too slow, and the JavaScript books were too detailed, to be useful for quick learning. Additionally, after completing six chapters of Beginning Angular 2, I realized that I needed to learn the basics of JavaScript proper before jumping into Angular and TypeScript because the syntax was simply getting in my way.

Pluralsight

At this point I remembered a recommendation from SimpleProgrammer.com: in one of his video blogs on YouTube, John recommends Pluralsight to current developers who are trying to learn new technologies on the job. This sounded exactly like my situation, and I decided to try this platform. Luckily Pluralsight offered a short free trial period, and I could begin immediately. After finishing a quick start tutorial on HTML5, CSS, and JavaScript, I realized that JavaScript was much more accessible than I had expected.

This boosted my confidence right away, and I started further video tutorials. I finished video tutorials on advanced JavaScript, jQuery, CSS, JavaScript modules, and NPM, and several weeks later I started Pluralsight courses on Angular and my first Angular application, an app for finding air, bus, and train fares between two cities. I wrote a script to save sample data to a JSON file quickly in Python since I was more familiar with that language, and then I wrote the front-end in Angular using TypeScript.

I found that the most important part of learning thoroughly from Pluralsight videos was to do each step of the tutorials on my own, and my key method for learning quickly from Pluralsight was to set the videos to play at 1.5-2.0x speed. While this meant that the voices sounded more like a rural auctioneer and I had to pause frequently to implement the steps in VS Code, the browser, or command line, I found that speeding up the videos significantly increased the speed of my learning. Additionally, I found it extremely useful to save my notes in text files named with the current date so that I could simply “Find In Files” in VS Code to look up things I learned later.

Oasis Digital Angular Course Materials

After a few weeks on Pluralsight, I finally dived into our Angular course materials. In about a day I completed the second and third modules of the class, which covered components, dependency injection, and RxJs Observables. I finished the next module in about a week, which covered reactive forms, routing, @ngrx/store, Observables, and custom validators. By this point I had found Angular quite intuitive, and asking co-workers for help was much easier because they were intimately familiar with the material and I had sufficient JavaScript experience that the syntax did not hinder learning TypeScript. In general TypeScript is considered easy to pick up if you already know some JavaScript, and I found this to be true as well.

One caveat to learning Angular, or other frameworks, on Pluralsight is that you can accidentally learn patterns that are either outdated, in the case of jQuery, or that are really only used in small beginner apps. For example, courses on Angular that I watched on Pluralsight used the simpler, but ultimately discouraged, methods of two-way bindings using [(ngModel)] or using the template for logic such as form verification that should reside in TypeScript. Nonetheless, I still highly recommend Pluralsight; for the most part, learning outdated methods can be avoided largely by paying attention to the dates on the videos that you watch.

Another issue for me came while learning reactive programming. Unfortunately, while Pluralsight was very useful for learning Angular, RxJs was largely absent in Pluralsight videos. Luckily our course materials emphasize both RxJs and minimizing template logic, and I switched from Pluralsight to our course materials at a good time during my learning. After finishing the fourth module of our course materials, I went back to my first Angular application and re-wrote it several times using different reactive design patterns such as RxJs Observables and @ngrx/store, and I saved these as separate versions so that I could easily compare them. I found this very beneficial for building good mental models.

Conclusion

My path to becoming an Angular developer without prior JavaScript experience was much smoother with Pluralsight and our Angular course materials than it could have been. For the best experience, I highly recommend learning the fundamentals of JavaScript, CSS, and HTML by doing a few tutorials yourself on your computer before jumping into Angular. I would also recommend the month-to-month Pluralsight subscription over the yearly plan in case you run out of material. Personally, I ran out of material for more advanced topics including RxJs, @ngrx/store, GraphQL, React, and CSS Grid. For me, a month-to-month subscription was the perfect amount to start learning Angular from our course materials and React and CSS from other sources on the web; nevertheless, Pluralsight is still worth a subscription even if you need a full year. Learning front-end development in Angular does not have to be painful if you pace yourself and use the best resources.