DEV Community: challey17

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

challey17 — Sun, 13 Dec 2020 23:31:40 +0000

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.

A Love Letter to Intellectual Rabbit-Holes or: How I Started to Learn Angular, Docker and Go(Golang)

challey17 — Tue, 08 Dec 2020 23:25:28 +0000

I have a deep respect for curiosity and it's ability to propel me into areas of knowledge I would have never thought to go without it's persistent tug at my shoulder.

Without it, I wouldn't have learned Spanish, become a painter, musician or a software developer for that matter.

Over the years I have realized that being driven by curiosity is a literal super power when it is channeled and harnessed, but can also be wily and send me on the proverbial goose-chase.

I honestly don't mind chasing geese, I love it in fact. But - but my friends!- as developers we have to wrangle these geese and be able to distill what is important in order to implement what the geese have taught us.

Learning is fundamental to being a software developer (and a human being!). We are constantly asked to internalize new information, languages, tools in an ever changing landscape that is overwhelmingly diverse and intimidating when you're first starting the software development adventure.

I recently went into a rabbit-hole diving into Angular, Docker containers and Go(Golang). The reason was initially because I was applying for a job that I really wanted where they were using this tech stack. From what I could gather the company was using Angular(TypeScript!), Node, Go and Docker/Kubernetes. My experience is primarily (come on- ONLY) with React and Node.

So, what I wanted to learn was Angular, Docker and Go (the language is called Go but the site with the docs for Go is golang.org so it is confusingly also called Golang -THE RABBIT HOLE IS BEGINNING FRIENDS!)

The rest of this article will be a look at how I tackled beginning to learn these in a systematic way(hint: writing this article is a part of that system) and some interesting things I can pass along about learning effectively. The next articles in the series will be a look at each technology individually.

A few important things about learning and retention I find helpful while going down the rabbit-hole:

take notes as you go, or what you learned might fall out of your brain in 3 days
when you research something it will probably lead to 2-3 other slightly related things that you want to research (more rabbit-holes). This is where it can become difficult to stay on track. A good way to stay focused is to write these down so you can come back to them later, but still stay on track with your main focus (thanks for that tip Micah!)
try to get an overhead view of whatever it is you are trying to learn by asking things like:
What is this tool/language/thing used for? Is there one specific thing it does or does it have a lot of different applications?
What problem does it solve?
Is there some language/tool/thing I already know that is similar that can help me wrap my head around this?
watch videos, read, write down questions
talk out loud, try to explain to your non-tech girlfriend what you're learning, if you can't be concise and simple you probably have knowledge gaps. Bonus if you're concise enough that her eyes don't glaze over

Then

START DOING, as soon as possible start making some kind of project using the tool/language/thing.
Most documentation usually has a "get started" or walk-through tutorial
If you are lucky enough to have mentors or a friendly slack-channel (if not - remedy this immediately ), talk to them about what you're doing. This will save you a huge amount of time because it will keep you out of the weeds. It's easy to waste time or get hung up on something that could be quickly by-passed by having a nuanced conversation with a human being who's opinion you trust instead of asking the whole of the internet. The internet often has differing opinions (see any number of clickbait Angular vs React, "This vs That", "is _____ language dead?" articles/videos for evidence of this).

The bottom line is, we must be discerning when going down the rabbit-hole , O yes indeed friends. There is no lack of resources to learn any new language or tool in software development (understatement of the decade). But to actually gain competence and skill you have to stop the rabbit-hole and really dig in and get focused practice on one thing.

There is a balance between letting curiosity bounce you around for a while, but then actually focusing on one language/tool long enough to really know what you're doing with it.

For me, learning where to direct my energy as a new developer, trying to solidify skills and gain new ones, is a constant pressure. I want to learn everything !! The issue is how we navigate resources and not waste time before diving in and using these tools so they become internalized.

This is the first article in a series of articles about learning Angular, Docker and Go. I am currently knee-deep in this glorious rabbit-hole and will return to share my findings. Up next: Angular

PS.

Angular feels like learning to drive a Mac Truck compared to juggling on a unicycle (React), bonus points to Angular for TypeScript integration.
Docker is melting my brain but I really love it and seems incredibly worth learning.
Go is the most mysterious of the bunch. Seems to be the least related to my JavaScript background but is also the most intriguing because of that. It's a general purpose language that has a lot of different applications.

Increment(++) Weirdness in JavaScript

challey17 — Sat, 28 Nov 2020 20:20:27 +0000

The increment(++) and decrement(--) operators are very useful in JavaScript but can be misleading depending on whether they are used as a prefix operator (as in ++x) or a postfix operator(as in x++).

Increment as a postfix operator:

let a = 3;
a++;

console.log(a); // a is 4

Ok, everything seems normal here. The increment operation (a++) executes and the new value of a is 4.
Super useful right? We also use the postfix increment in for loops constantly:

for(let = 0; i < whatever; i++) {
// loop-de-loop
}

So, we

initialize i at zero.
Then, if i is less than "whatever",
i equals i + 1 i.e we add 1 to i

The increment in this case is adding another go-round of the loop, until it reaches "whatever".
Awesome, so far, so good.

Check out the next example for incoming weirdness.

let x = 3;
//POSTFIX 
let y = x++;

console.log(x); // x is 4
console.log(y); // y is 3 because assignment of y to value of 
// x happens BEFORE increment

So why does this happen?

Under the hood, JavaScript executes the assignment of y to the value of x,
THEN continues and evaluates x++.

When using increment (or decrement) as a prefix operator, the behavior is what you would expect:

let alpha = 3;
//PREFIX
let beta = ++alpha;

console.log(alpha); // x is 4
console.log(beta); // y is 4 because assignment happens AFTER increment

JavaScript engine sees y is assigned to something about to be incremented because of the ++ operator,
so JS evaluates increment
THEN finally assigns value to y.

I decided to write this after being sloppy with using the postfix operator and seeing weird results, so I wanted to understand what was going on. Now you will too, happy coding!