adgllorente

My conclusions using Angular 2 for the first time

My conclusions using Angular 2 for the first time

Photo by Mika Baumeister on Unsplash 路 16-12-11

I鈥檝e been working these days using Angular2 for the first time and this is what I have to say.

It hasn鈥檛 been easy to get used to Angular2 and I still don鈥檛 really know how some things are working. My rule of thumb: If it works, don鈥檛 touch it.Adri谩n G贸mez
Before starting with this text, I have to say **this opinion is totally personal and based in my own experience**. Talking about my experience: I鈥檝e been working with Angular 1 for more than three years. I started with Angular 1.2.3 and I鈥檓 currently using version 1.5.8 with these rules:
  • I use a Component based architecture and Components only deal with 鈥渟cope鈥.
  • I only use Factory for services and they usually have all the business logic.
  • Directives just for small DOM things.
  • John Papa styleguide is a good ruleset to follow.

Oh no! Typescript鈥 馃憥

I鈥檓 used to use ECMAScript 5 in the majority of the projects I鈥檓 working on, but I use ECMAScript 6 whenever it is possible.

ECMAScript 6 is the new standard for JS and it has arrived to stay with us, and although I have to force myself to use its features, I do really like it.

Its exports/imports鈥, arrow functions with lexical this鈥 let instead of var鈥 These new features coming in ES6 are quite useful in my daily coding. Typescript features? No, thanks.

Typescript was originally designed by Microsoft, later Google included it in its famous framework Angular2. In my opinion Microsoft has changed as a company and it is doing things quite well (vscode, open source contributions, etc.) but Typescript is probably not one of them or at least, it doesn鈥檛 fit me. Why? Strong typing.

One of the things I love from Javascript is its simplicity, its non-verbose coding and its weak typing. They say strong typing makes easier to find errors before execution. I think I鈥檝e never had a problem related with typing in my 3-years-coding in JS. It is as easy as following some rules: Avoid reusing a variable, don鈥檛 reassign arguments, etc. It鈥檚 not brain surgery.

angular-cli as a building tool 馃憤

angular-cli is a tool coming with Angular2 and it is like a Yeoman generator with steroids. Since a few months ago, angular-cli met webpack and it has included a lot of new features making itself a quite powerful tool:

  • Tree saking to remove unused code.
  • Easy injection of external scripts.
  • A lot of plugins to get whatever you need.
  • Scaffolding services, components, directives, etc. just form command line.

This sounds awesome and it is working just out of the box but I鈥檝e found a lot problems when dealing with libraries not supported by npm or libraries not including @types. Mostly because angular-cli is poorly documented.

Angular2 has too much documentation 馃憥

Google has redesigned Angular2 documentation page using Material and it is more beautiful than the old one but it has too much information, for example, this is what you get when you look for 鈥淐omponent鈥 expecting information about Component, its creation and its Interface.

Image showing a lot of documentation for a Component

Result? 160 results distributed through 鈥淐OOKBOOK鈥, 鈥淕UIDE鈥, 鈥淭UTORIAL鈥, etc. Don鈥檛 misunderstood my words, I know it is better to have a lot of documentation than a lack of it, but I would set a priority over those important results. For example, compared with Angular 1.x, Component page is easy to find and it gives you general information and some examples to start working with them. Positive point for Angular 1.x documentation.

Another problem I鈥檝e found is that looking for common coding problems about Angular2 I鈥檝e usually found a solution in StackOverflow (Thank god Stackoverflow exists鈥) But mostly, solution found was working in an earlier version of Angular2 and it didn鈥檛 work in my current version. It seems many changes has occurred to Angular2 since its beginning. I know this may happen but it is quite frustrating.

Useless Error information 馃憥

Speaking about frustrations, information provided in execution errors is horrible.

Developer tools showing a console with a lot of errors

Look at that error, do you get something useful from it? Nope. After seeing this error I would go to 鈥渨eather-widget.component.ts:47鈥 to look for an error but error is not in that line. This error was produced because:

// I was declaring a service like this (ERROR):
export class WeatherWidgetComponent implements OnInit {
private weatherService: WeatherService;

constructor() {}

// ...
}

// Instead of (OK):
export class WeatherWidgetComponent implements OnInit {
constructor(private weatherService: WeatherService) {}

// ...
}

I know this is not totally an Angular2 problem and it is more related with the Javascript execution engine but maybe Typescript compiler might have said something.

Speaking about another thing, I don鈥檛 like Angular2 service injection as params in the constructor, actually I don鈥檛 know why it works like that and it doesn鈥檛 work like this:

// Not working like this:
export class WeatherWidgetComponent implements OnInit {
private weatherService: WeatherService;

constructor() {}

// Not working like this:
export class WeatherWidgetComponent implements OnInit {
private weatherService;

constructor() {
this.weatherService = WeatherService;
}

Update (23/12/2016): There is an error here. I鈥檝e misunderstood how dependency injection works in these cases and why I should declare dependencies in the injector. See comments below for more information.

Slow livereload 馃憥

Livereload in Angular2 projects is provided by angular-cli and using the command 鈥渘g serve鈥. This is not the first project I鈥檝e worked on using livereload but I鈥檓 sure this is the slowest one.

If you give a try to 鈥渘g serve鈥 you will realize it takes a LOT of time to recompile the code and reload the browser, and in my opinion, when it takes to much time, livereload is not so useful.

Github pages integration 馃憤

Not everything related with Angular2 is bad, it also has good things, for example Github pages integration. I wrote an article speaking about Github pages and how useful they were to deploy a website.

angular-cli has been empowered with a github pages integration and with just this command: 鈥渘g github-pages:deploy鈥 your Angular2 project will be compiled, index references will be modified and everything will be pushed to branch gh-pages.

As you can see, just a single command is needed to put your project online, positive point for angular-cli!

Conclusion

I鈥檝e just used Angular2 in one pet project and I鈥檝e found a lot of disadvantages. I know it is in its beginning, I know it is faster than Angular 1.x, I know it is the future of Angular and I know I have to get used to it. But in my opinion, Angular2 has not totally convinced me, so I will give a try to other frameworks like React.

My small project to test Angular2 is called Cleweather. A simple website where you introduce a city name (Google Places) it gives you the weather (Yahoo weather) and prints a map with the city (Google Maps).

If you want to take a look to the code, this is the repository

angular-cli angular2 coding

2022 路 Adri谩n G贸mez

Powered by Eleventy + TailwindCSS + Markdown

Inspired in London and Julia