Skip to main content

My conclusions using Angular 2 for the first time

I’ve been working these days using Angular2 for the first time and this is what I have to say.

It hasn’t been easy to get used to Angular2 and I still don’t really know how some things are working. My rule of thumb: If it works, don’t 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’ve been working with Angular 1 for more than three years. I started with Angular 1.2.3 and I’m currently using version 1.5.8 with these rules:

  • I use a Component based architecture and Components only deal with “scope”.
  • 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’m used to use ECMAScript 5 in the majority of the projects I’m 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’t 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’ve 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’t reassign arguments, etc. It’s 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’ve 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 “Component” expecting information about Component, its creation and its Interface.

Result? 160 results distributed through “COOKBOOK”, “GUIDE”, “TUTORIAL”, etc. Don’t 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’ve found is that looking for common coding problems about Angular2 I’ve 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’t 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.

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

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’t like Angular2 service injection as params in the constructor, actually I don’t know why it works like that and it doesn’t work like this:

Update (23/12/2016): There is an error here. I’ve 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 “ng serve”. This is not the first project I’ve worked on using livereload but I’m sure this is the slowest one.

If you give a try to “ng 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: “ng 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’ve just used Angular2 in one pet project and I’ve 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:

 

What do you think about Angular2?

  • Yaron Biton

    In the past 2 years, Angular has become a framework fit for enterprise level projects. For anything else use vue.js and live longer and prosper.

  • Vue.js and React are in my roadmap and I will give them a try, for sure.

  • homepokergames

    I personally love using Typescript, maybe because I never really learnt Javascript beyong an intermediate level andcome from a C#/backend world.

    However, I agree that LiveReload is a pain. Every small tweak takes 2-3 minutes for the page to reload – very unproductive!

  • 2-3 minutes livereloading is a lot! Maybe you should upgrade your hardware :D. I was speaking about 10-20 seconds at most. Keep working with Javascript, you’ll love it 🙂

  • brownieboy

    10-20 seconds isn’t my definition of “live”, never mind minutes!!!

    With React, you have the likes of react-hot-loader, which updates the browser instantly and preserves your components’ state too.

    https://github.com/gaearon/react-hot-loader

  • Bigopon

    If you love javascript because of its simplicity, then no framework will win you over Aurelia

  • First time I hear about Aurelia… React, Vue, Ember… I think I’m not having time to test all of them 😀

  • Bigopon

    Then I guess do yourself a favor and spend 10 mins trying out aurelia 🙂 (as you already familar with Angular data binding)

  • albert

    ROFL*100 on this: “My rule of thumb: If it works, don’t touch it.” Love this experiences. For the injection part, the angular approach is the most common case, when we do IoC, most of the time, we put the injected services as the params of constructor. Or maybe at the actual function you need to use, like this.useThisMethod(service1, service2), but it is not common. I prefer the constructor one, single entry looks more clean.

  • Thanks for the article.

    If you want to try react make sure you do it by using react create app it has the integration with gh-pages and sane error messages you are looking for 😉

    https://github.com/facebookincubator/create-react-app

  • Thanks! It seems it has everything I usually need. I’ll give it a try.

  • Thanks for your comment, you are totally right, I’ve seen I have an error there and I wasn’t properly understanding how dependency injection works.

    When you use dependency injection in a service for example, this service relies in others to obtain its dependencies (Dependency injection pattern…)

    In this case you have to put your injected services in the constructor and expect for other to build an instance of your service passing its needed dependencies. That’s why you need to put dependencies in your constructor. It’s like using $inject in Angular1.x but using Typescript constructor features.

    I’m not used to use dependency injection like this, and when writing this article I tried to use imports like I’m used to use them in ES6. That’s why I expected “non-working example 2” to work. Now I got it 🙂

  • Pete

    I think angular is unproductive, it’s adding up a complexity at the top of javascript and at the end you are fighting with the performance and the js size itself.

    Angular does not add too many components, and i think if there would be useful and not buggy components, than it does not matter whether it is angular or just pure js.

    To be honest, i don’t really see the benefit of angular at all. I was just fighting with the stale variables, bugs etc.. Sometimes it was really hard to spot a bug. (the debugger itself is buggy anyway for ts – you cannot set breakpoints in many places and you cannot watch variables, even when you just mouse over, it shows the content of the variable) I think angular is a dead end as it would like to transform the html 5 to GWT.

    If i need to recreate all the basic components, what jquery supported as there is no bug-free ones,
    than it cost me lot of money. At the moment i’m recreating the ionic, it suggest me, that i can reduce the size of my js by 10 fold.

    I don’t like react, but i don’t like angular also. I think angular is superfluous.

    Very likely you need only two things from it. Dependency injection which does not work properly,
    and the template. I think dependency injection is a half day work in js.

    Template system at the moment is superfluous, very likely we need only ngFor/ngIf/switch and parsing the variable. We don’t need animation package and we don’t need event listener bindings inside the html.
    We can use some decorator in the code instead, and use the built-in html tag selector. I think that’s the only thing what we really need, anything else is just a heavy weight, i would say make things far more complex then it should be. It’s embarrassing that at the end, i have to create an angular light as angular at this stage with all the buggy node packages simply unproductive. We need only some very bug-free thing and that’s all. Typescript is not that big deal, can make more readable code,but anything else, just harms the productiveness of a developer. I’m saying that after 13-14 years of experience. (java / c / c++ / swift / html / css / typescript /javascript / assembly etc.)

    You have server side rendering, but i don’t think there is any purpose of this at all in the majority of the app.

    Angular i think it’s a massive shit, trying to take over all the responsibilities from the browser.
    It was a huge amount of work of many people, and the end result is a nightmare.

    I have created a project, but i don’t like it, i learnt many things in angular, but at the end, i wouldn’t even apply for any job, which contains the angular word.

  • I agree with almost the majority of your comment but I’m not against to Angular like you, actually I’m using it in my job.

    It has some negative things but it also gives you some positive. For example Angular is quite opinionated and makes different projects looking like the same because everything is integrated the same way. This is good sometimes and bad at other moments because it is quite strict.

    It also makes very easy to connect your logic with your view, no more direct DOM modifications are needed. Lucky us.

    But, I’m totally against its dependency injection and digest cycle.

  • Pete

    The main problem with Angular at the moment, that it’s not hiding any logic what they done in deep. Developer should reuse packages without deep understanding. Angular just missed this very basic developer principle. If i need to understand everything what they have done, sometimes looking into their code base, than i never finish my job. Yes, you can use Angular for your job, that’s why i have started to get some experience, but at the end, i saw that i never done nastier code in my entire life in javascript, than with Angular.

    Yes there are positive things also, but the fact is, when you need to dig into very deep, you felt you made something wrong.

    I tried to make a social app, which might have a little bit complex dynamic UI.
    You know dragging on touch screen, scrolling etc.

    I tried to use ionic which based on angular, it was a good example, how you can screw up a project.

    There were hundreds of bugs, even in the hammer js library, because chrome changed some pointer event (i have made a workaround to make hammerjs work delete window.PointerEvent – i have made lot of hacks similar to this one to avoid bugs – so at the end i was shocked how many things just wasted my time). At the end i have realized that hammer.js was very likely fine some years back, but now, everything you can do it with pure javascript.

    I have very bad feeling in Angular. I looked at their code base also.

    When i almost ended my project i realized i need to rewrite many things as the whole project was about 3MB. 2,5MB js and 0,5MB assets. (packed, minified)

    You know i have used firebase javascript package, ionic, cordova, webpack and angular. I would have liked to add only a notification to the chrome browser. At the end i just removed the firebase js, i decided i can live without the service worker based notification. To be able to make a notification, you need to import everything from firebase. (typescript namespace node package – it cost me 600KB – packed minified), and it’s an official package from Google. It was the tipping point, when i felt, i should never use anything what i’m not writing personally.
    I raised the bug, they felt, i’m right, but i have wasted 1-2 weeks on my implementation, and after that i just removed that part from my code.

    I feel i’m just constantly rewriting my code to make it better. The main problem is that you cannot cherry pick from Angular. So at the end i’m rewritten the whole ionic, i have already rewritten the rxjs. (i have replaced with an 80 lines code) Ionic code base is 3MB at least on component level, and some other stuff. My code base is around 120KB, and has more features.

    Angular is not going to a good direction, as they are adding more stuff to it, so the size is even bigger. The cli version was very buggy when i used a year ago.

    What you mentioned regarding to Direct dom manipulation, if you use renderer class for example you directly manipulating the dom, they just renamed the functions. Either way I think at the moment 80-85% in Angular is negative 15-20% is positive.

    To avoid direct dom manipulation, you should only do one thing. Generate the templace first and set the innerHtml of a div at once.

    Digest cycles just tries to handle all of this scenarios automatically, but at the end, why we just don’t do it manually?

    My feeling is, i can write better code to take over some angular principle, take care about that i won’t manipulate dom every time. So i ended up to make some sort of transactional context, which i think better.

    Define a decorator @Transactional, put at the beginning of the method name, and everything which is happening beneath will be committed when the method finished. You are adding up your modification in a stack.

    Angular is unpredictable. If Angular would have been written in a way, that for example some java framework has been written, than the learning curve won’t be that steep. Using Angular after a year i’m not comfortable to use Angular even if i know every lines of their code base.

  • Pete

    I have a very dynamic component, and because of angular i need to use renderer2 class, but this class does not know about batch update, so unluckily it’s just a fancy wrapper, who does make direct Dom manipulation. (It can be avoided by react, because of the virtual dom) If you have simple components, like a form than it’s fine, but if you have very complex dynamic components, you just are trying to make workaround every time to avoid “direct” dom manipulation caused by angular. After a 1,5 month ui library work, i’m aware of the pain, what i wouldn’t have experienced, if i didn’t have to create a new ui library.

    I cannot replace angular now, but at least i can replace the ionic pretty soon. I’m making extensions and bug fixing on my components. You can read further on https://github.com/fssrepository/facs. I also started a virtual dom implementation, but the main factor here the performance. I need several development cycle, what i haven’t time for, at the moment.

    I’m not against opinionated nature, but angular is not a mature language now, and it’s going to a direction, where it will be more complex.

    My components haven’t got too many input parameters (reduced the bindings also only to one, which is only the component identifier). Many idea is coming from svg. (how to position elements) So at the end, very likely one of my component will take over 3-4 ionic component responsibility with less configuration, and i’m just doing components, which do not need customization very likely.

    To be able to make the component mature, i have also rewritten them several times, and anyway going to integrate to a real system right away, so they are very well tested.

Adrián G. is Stephen Fry proof thanks to caching by WP Super Cache