Angular 6 – my thoughts

A couple weeks ago Piotr Gankiewicz and I decided to add one, last piece to our DShop application before starting recording YouTube course about microservices in .NET Core. Yup, this means you need to wait for it a little longer, but at least you’ll see something happening on the screen rather than raw responses in Postman 😉 . Anyway, soon after I updated Aurelia CLI using npm and a few minutes ago I was ready to rock. It took me just 3 minutes to go through all questions about preferred bundler, transpiler, CSS pre-processor, etc. After installing all dependencies I ran my app using the following command:

 


au run

 

And I got the error:

 

 

Lovely. My app crashed before I even touched it. If you’ve been following this blog for a while then you probably know that I’m a huge fan of Aurelia and I always favored it over Angular 2+. But that error didn’t leave me a choice – I had to install Angular CLI to create that damn SPA for DShop! So, I open my command once again and typed the following command:

 

 ng new DShop 

 

and a few minutes later I knew I’m gonna love it!

 

What do I like about Angular 6?

Tutorial/Docs

As 100% noob Angular 6 developer, I started my education with an official tutorial which can be found here. My impression was very positive. The whole process of creating Hero app took me about 4-5 hours and it covered most of the basic SPA issues like project structure, naming conventions, basic configuration, routing, HTTP communication with backend, data-binding, component’s lifecycle and many more. Each step was described very well and with proper explanation. Also a big plus for live demo on stackblitz.com and ready to paste CSS files at the end of each chapter 😉 After finishing the tutorial, I started doing DShop app and soon after I switched to „Fundamentals” which is nothing else but detailed documentation. Once again I was very impressed. I had no trouble with finding a specific topic which bunch of examples and practical tips from Angular team. If you’ve ever wondered what good framework documentation should look like, you have the answer.

 

CLI

During the tutorial, I used a lot of CLI as a suggested way to create/extend my app. At first, I thought it’s kinda lame to use it every time I want to add simple service or component but after few hours I got why folks love using it. It’s super cool! Not only because it generates the code but it also plugs it into the existing infrastructure. Therefore, you’ll not waste your time wondering why the heck your new-generated component is not visible in the DI container. Also, it’s worth mentioning that the CLI itself is quite flexible so, even if your project structure is complicated or a bit specific, you shouldn’t have any trouble with generating new code.

 

Modules and Components

One of the foundations of Angular is creating a lot of reusable components instead of duplicating the code in every second view/view model. When you look at the tutorial, architecture, code styles or docs you can easily see that designers encourage to follow this convention. Thanks to that, the code is clear, simple and not overgrown. I’d say that architecture of new Angular is like a code implementation of SOLID principles but for frontend developers. Big applause for that.

 

TypeScript

I’m gonna say it bluntly – I hate JavaScript. Yes, I know that some of you might think that this is because of lack of my knowledge and understanding this language. And partly it is true for sure. But I simply don’t like dynamic programming languages with weak typing:

 


alert([null, undefined, []] == ',,'); //true

 

Come on! Fortunately, Angular 6 comes BY DEFAULT with full integration with TypeScript. If you’ve never tried using it, you should definitely do it! TypeScript extends JavaScript with great features like inheritance interfaces, generics, async/await pattern, iterators, and of course… types! No more guessing whether a response from the server is an array or an object, what properties are present in a particular model etc. Thanks to TypeScript, your code will be way cleaner, more readable and better designed. And there’s one more thing. Unlike JavaScript, TypeScript first needs to be compiled (to JS)  before you run it. This means that you can avoid lots of bugs during development instead of doing console.log() in a runtime.

 

Capabilities

Last but definitely not least – Angular is all-in-one framework. Everything needed for creating modern Single Page Application is there. This means that you don’t have to combine it with tons of other JS libraries to create a functional application. But let’s be honest… you’ll probably do it anywa

 

What do I dislike about Angular?

Configuration

I’m a big fan of convention over configuration approach. This means that I like doing something implicitly rather than writing additional code to configure it. This was a common thing in Aurelia. Do you want to magically bound HTML with TS file? Give them both the same name! Do you want to fetch data when your view-model becomes activated? Create a method called activate and put all your code there! In Angular things are different. Everything needs to be configured. For instance: to correlate files you create decorators which are not very pretty, to perform some action during component’s activation you need to explicitly implement an interface called OnInit (with method also called OnInit). Moreover, if you want to use two-way data binding (using ngModel) inside your HTML, you need to import FormsModule first in your…module. Seriously?! A damn module to do such basic thing?! Unfortunately (for me) this means that infrastructure is a big part of the code.

 

Syntax

As a noob Angular developer, I must say that syntax is very weird and complicated. Sometimes I need to put * before directive, sometimes I need to surround it with [], sometimes with () and otherwise with [()]. It doesn’t help me to learn this framework!

 

Summary

I’m a bit ashamed that I have said so far that Angular is a worse choice than Aurelia. It’s really good, a well-documented framework with lots of capabilities. I definitely encourage all of you to give it a try. However, before I’ll end I want you to know one thing. I’m not gonna stop claiming that Aurelia is great only because I had some issues with CLI. Everyone has bugs on their GitHubs, believe me 😉 Despite many differences between this two frameworks, you can also see many similarities. This can be proved by the fact that many time while learning Angular, I was able to predict next steps that will appear in the tutorial. And this is nothing special. All modern JavaScript frameworks do exactly the same thing. The only difference lies in the naming things. Therefore, looking from my perspective, if you want to start your journey with frontend, you should not focus that much on a particular framework but rather study concepts that are transparent to technology.

You may also like...