Getting Started with Angular or React

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

When we say Angular, I mean version 6+or whatever is popular at the time of the writing.

I want to make a set of articles starting with basic concepts and moving into more advanced functionality with Angular.

Getting Started

This first article will deal with the basic task of getting your development environment configured on a windows machine.

Why Angular and React

Before getting back into Angular in July of 2017, It has been many years since I had used Angular. Once I started playing with the CLI, i realized how easy it was to spin up projects and really explore, because the hard job of setup was not required. This is a new era web development. There are many tools at your disposal to create web applications with basic architecture to get any small project off the ground and running in minutes.

The thing that is hard to learn or know is how to do it. In technology a lot of things are learned the hard way and this is good. But every once in a while you can get an edge on a technology from someone else telling you exactly what they did and how they succeeded. That is what I want to do. I will put you in a position where you can within minutes on any computer get either of these applications running with just a few commands.

I consider Angular 1.x to be in a different class of library. As of Angular 2 (simply referred to as Angular),  the library takes more of a modern approach that is modular and is directly competing with frameworks like React, Vue,  Aurelia and others. I will just refer to these as “Modern JS Libraries”.

The 50 foot view

We have to know a little bit about the landscape around Angular and some of the options we have when we decide to use one of these libraries. But because they are all so similar with much overlap in their capabilities, sometimes it just comes down to one or two obvious choices for a development team or even a small group of two developers. I think what is most important to get your project off the ground and running is to use the framework that you have any experience with, if at least just for the MVP, go with what you can develop rapidly in. I will be honest that if I was in this situation, I would feel confident inside of an Angular project and be able to reliably estimate ticket size of tasks, etc. But in React I would not be as efficient and knowledgeable about the quirks of using that library. If I was asked to choose, it would be Angular. But this article is more about just showing you how to get started with both, maybe you will like one more than the other. I can at least get you to “Hello World” and a little beyond with a knowledge of the ecosystems as well. Each library has it’s own ecosystem that in able to work with the library, you need to know how to navigate in this area.

I have focused three years at SolarCity and Tesla on honing my Full Stack development skills. In those three years I learned more than in my 15 years of professional experience. Most of my time on the backed using C# to build API’s that we could connect to with our front end applications. When we build an Angular or React project for the first time with those simple command I will teach you, you are getting a ready to go, front end application. For instance, if your project goal was to simply post a page for your nightclub on the web with your address, and a list of events upcoming that come from a database. This is that front piece, the side that everyone sees. That is what I specialize in building and to get started and do my job, both Angular and React have made this very easy.

It was not always like this

When I first learned Angular, I was required to not only know the inner-workings of the library and how to import it into an HTML page using JavaScript and loading CSS files, interacting with an API, etc. But I would also need to know all of the configuration bullshit that goes a long with using web-pack to build and minify and polish my files and transpile them from TypeScript into JavaScript. So the fact that I can spin these applications up with literally a few commands, this allows someone to get to the good part of learning much faster. Although hiding the configuration from a developer is only good until he or she get’s to a point where they need to start dealing with it. At this time, they will be more confident in working on the application and will be better suited to deal with that pain..

Before We get to Far

Understand that what I am going to show you is how to get these libraries running locally and inside of a development environment on your computer using your code editor. If you would like to skip all of that nonsense and get straight to building something in Angular and React, I am glad to tell you that there is an app for that. You can log onto the website below and choose an Angular or React application and get straight to work. And it is a complete development environment in the cloud that you can work with. What I aim to show you is a little bit different and although I think that applications like StackBlitz is a glimpse into the future of one of the ways will will develop applications in the oncoming years, I still believe that there is no substitute for knowing the steps involved for building that same type of environment on your own machine.

I am going to assume that people know JavaScript and some type of CLI. If not, you can try faking it for now, sometimes learning new things, you have to assume you can go back and fill in where needed things you don’t know.

THIS PART OF THE ARTICLE IS UNFINISHED …

Article 0: This article
Article 1: Single and Multi-Slot Projection
Article 2: Cross Component Data Sharing
Article 3: Components
Article 4: Services and Friends
Article 5: Wrapping popular Libraries

Leave a Reply

You must be logged in to post a comment.