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:
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?
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.
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.
alert([null, undefined, ] == ',,'); //true
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?
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.
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!