A Love Letter to Intellectual Rabbit-Holes (pt 2): Angular

#webdev #javascript #angular

I have been using React for almost a year, so a lot of the mental model for a front-end framework was already in place, which made getting started with Angular a lot easier. There has been a lot of “Oh this is like the Angular version of this React thing” as I go along.

The main difference I saw right off the bat is that Angular is a full-fledged behemoth of a framework, whereas React is technically a library not a framework.

That seemed to be mostly a semantic difference until I started using Angular. O no friends, that is where the rubber meets the road!

I’ll follow my guide-to-Rabbit-Holes laid out in part 1 and share what I learned here about Angular.
I gave myself two phases for the rabbit-hole:
First, get a broad strokes view by answering certain questions that would give context about the thing I’m learning. Second, at a critical point where I know enough about this thing and why I would use it in the first place , start building something with it to get a deeper understanding.

What is Angular? What is it used for? What problem does it solve?

Angular is a front-end framework for creating single-page applications, one of 3 frameworks commonly used for a similar purpose: Angular, React, Vue.

There is mucho black magic that goes on behind the scenes that lead to greater performance, scalability and ease of development. And that’s a pretty big deal.

The main reason to use a framework as opposed to vanilla JS is that it allows for much quicker development. A framework gives you certain tools “out-of-the-box” that you would otherwise have to develop on your own like routing, state management, unit testing tools, performance-related tools etc.
There is also the built in conceptual model of components where the UI is broken down into more manageable units of reusable code. This separation of concerns has a lot of benefits. Testing is easier, code is more robust and easier to understand which makes collaboration and maintenance easier.

Some key features of Angular:
(take with a pretty serious grain of salt, these are my impressions over a week or so, I'm by no means an expert with Angular- or React for that matter!)

TypeScript integration
quickly set-up components with CLI
built in solutions for working with forms. Lots of ways to work with forms in React, two ways in Angular.

This trade-off was the reoccurring theme when comparing React with Angular. Angular is less flexible but has more built-in support. You are more restricted in Angular but Angular has a lot of tools to make your life easier within those restrictions. React is more flexible, but you might end up doing more leg-work.

Angular has a lot of tools(awesome!) but the learning curve is steeper because you have to learn them(more time-consuming initially)

After doing some reading, writing down questions and watching videos and a quick look at Angular's documentation, I found a crash-course tutorial on making a todo list application. A todo list covers a lot of the basic CRUD(create, read, update, delete)functionality you would run into making any app so it's a good way to get an introduction to Angular.
Here is the tutorial I went through by Traversy Media:
https://youtu.be/Fdf5aTYRW0E
the tutorial uses the JSONPlaceholder API so you can actually work with real HTTP requests and response.

Take-aways from this little project:

The most unfamiliar thing I ran into were Observables with HTTP requests. It seemed straightforward enough to implement them in the tutorial and think of them like promises but I know there's a lot more to it than that.
I really enjoyed using TypeScript, that's been on my ..ahem.. todo list for a while. I like that TypeScript forces you to be more deliberate with your code because of the static typing. It's like having an extra set of eyes looking at your code and checking for errors BEFORE you run it. I will definitely be using TypeScript in the future.(You can use TypeScript with React or any JavaScript code, I just hadn't before.)
This was just scratching the surface - a little bitty scratch, there is a lot I didn't get into. I have a buddy who has been using Angular at work for a few months and he told me he was still fuzzy on some Angular features. It's a lot.
What the heck is an Observable?!
This was my first real encounter with TypeScript. Awesome introduction and seeing it in action reaffirmed my reasons for wanting to use it.

I liked getting to see Angular up close and personal after hearing about it and wondering how it differed from React. Ultimately, it's interesting to see how a different framework coaxes JavaScript and the browser to do it's bidding.