AngularJS is amazing... and hard as hell
I had been working in AngularJS for almost a year now, just right after they put Google’s logo in the web page. That’s around 20-40 hours a week in the past 10 months plus free time. Using the technology, I have done Chrome Applications, Mobile Applications, Web Apps, Modules, Animations and Single Page Applications (SPA’s). I can’t link all of them due a NDA with my company, but you can see some of my work on my Coderwall profile and Codepen profile to have an idea. At my company, we even worked on a bridge with AngularJS and LungoJS to make mobile applications, known internally as L.A.B, in which I made a couple not too shabby PR’s.
With that introduction, I want to share the following statement:
AngularJS is amazing… and hard as hell.
Although I had been working with it for such a long time in a bunch of projects, I don’t consider myself a guru on the technology; I had stumbled upon many errors on my own code, and if Misko or Igor were to browse my initial experiments with the technology, they will probably laugh their head off thinking I’m a joke. I had done interfaces that make no sense, and tightly coupled services. Not only me, but co-workers that I consider highly smart developers, have struggled with some of the basic concepts that show off in the software whenever a really large application appears. I refactored one of the biggest modules at my company just to realize that even a couple months ago, I had no idea on how to really use the power of AngularJS.
And that's ok
It's ok if you don't really understand AngularJS all at once. Getting started with the software is completely different that actually using for real applications. It just really takes time, more than you think it will to really get AngularJS.
If you have ever felt frustrated by this framework you are trying to learn, the good news are that it just takes time. This won't be a quick jQuery example you can run up easily in a jsFiddle, but a whole journey that you need to embrace to truly understand the framework.
Pick your resources wisely. Here’s my top four sources of information for good AngularJS knowledge (in that order):
Egghead.io Videos. I was quite sceptical about the webpage, but after seeing some of the videos, I realized that John’s videos were actually on track. Specially for beginners, this is an amazing source of information. Heck, if you are on the run all the time, buy the offline videos.
The Mastering Web Application Development with AngularJS book. I just finished reading the book, and this is just a complete must for any AngularJS developer. The book structures perfectly the concepts behind AngularJS, as well as the good practices and main gotchas of the software. AngularJS is probably popular by it’s power as well as by it’s lack of documentation; here’s the missing manual that everyone should have in their library or kindle. I’ll save you the jumbo wumbo on all the benefits of the book and just tell you again to buy it. There’s really no excuse.
AngularJS App. The create-CRUD-applications reference. Fork it, run it, play with it. See how they created the directives, how they organized the code, how they structured the tests. Even today I always browse that project to see how they used interceptors, how they tested their directives and what naming convention they used in their providers.
The AngularJS Wiki. Whenever you struggle with an AngularJS concept, go and read the wiki. If you don’t really grasp all the concepts about the scopes, go and read the wiki. If you really want to become a good AngularJS, go and read the wiki. If anything related to AngularJS makes go dizzy... you know the rest.
Getting better
At some point you will understand most of AngularJS concepts, to which then the next step is to start creating projects, pens and fiddles... but with tests on them. I found that most of the good concepts of AngularJS can be realized by adding tests to your projects. If you are not testing your software, then stop coding. Delivering untested software is unprofessional, and it should be avoided. You can be more flexible when you share your knowledge to other people (cough cough, like me, that I haven’t posted any tests on my codepens cough cough), BUT at some point specify that your software is untested or that you will put some tests later.*
- A special note on this one, I’ll be working on adding more samples for AngularJS with tests included. I’ll write another post on this later.
Final notes
I believe that even though AngularJS is really easy to get started with, it's really complicated to get. Making mistakes on the road is just to be expected. If by now you consider yourself an amazing AngularJS developer, you already have a copy of the AngularJS book (heck, if you were asked to review it), and are over 10K on SO by just AngularJS answers, Congratulations! Your responsibilities are higher because people will really start taking you seriously, and your posts and samples will be replicated through the web. At that point you should then go to conferences, create PR's, monitor Github issues and start contributing to the community. You can do the latest by installing the Question Monitor for Stack Exchange, add the angularjs tag, and spin a Pomodoro for 25 minutes a day to answer a couple questions there. Apply to/go for the AngularJS Conf. The call for speakers closes the 30th of September, what are you waiting for?
Written by Jose Jesus Perez Aguinaga
Related protips
20 Responses
I totally agree about testing. The great thing about Angular is that the Angular team agrees with that philosophy and it's shown in the api for Karma. The end to end testing tools as well as the unit testing are top notch. They have tools for stubbing out your backend and checking test coverage (third party - https://npmjs.org/package/karma-coverage) too. Additionally, Grunt automation makes it real easy to set up a watcher for your tests too.
@eisaksen Indeed. Karma is pretty much all you need for unit testing. For e2e checkout Protractor, as the AngularJS team is moving there.
Thanks so much for this article. It has confirmed that I am not stupid because I wasn't fully comfortable building a full app with AngularJS in the past two or three weeks since starting to learn it! I heard Misko and Igor talking about it and was inspired, so that is why I stuck with it.
Thanks! Protactor looks awesome. I did cringe seeing a commit message with "upgrading to selenium 2.25" but I trust the Angular team 100% in this - just my own gag reflex I suppose.
@srobertson You are not the only one :) I have really skilled coworkers that are well versed in programming that struggle with AngularJS. I always point them to the Egghead videos for most of their doubts. That site plus the Mastering AngularJS book is more than enough to just get in track with AngularJS. Good luck!
@eisaksen I haven't checked it up, but I know for sure that that's what the AngularJS team is going to move to (if they haven't already). I haven't checked e2e tests in a long time because they are taking forever; I'm really looking for faster alternatives.
Well written and entirely in line with how I feel about AngularJS: I've done some relatively simple things with it, some of which the most complex things I ever did in Javascript, with relatively few lines of code, but some of these lines took forever to be written ;) E.g. once you start getting your head around writing your own directives, you feel like you get a whole new set of power tools in your hand, but that first directive takes a while to write.
Anyway, thanks for the pointers!!
nick.
i agree with you! i have worked on AngularJS for about 6 months and the documentation and tutorials were just not well enough for new developers to understand the whole architecture of the JS framework. The help out there is just too sparse as well. However, we all been through the tough phases and we finally developed operational projects! Cheers~!
Hi, I'm just starting out to learn and I found it kinda hard, I'm still struggling with many concepts behind the framework but that was a reason to learn more JS probably the lack of knowledge on JavaScript is the problem to grok angular. Thanks for your well writing article. Saludos!.
@felixcriv Yes! AngularJS is a boss level in our lovely front end javascript game. I would recommend you some of those fancy course programs you find online to work as a cheat engine. Saludos back!
Trying to understand Angular is one of the most frustrating experiences I've had as a developer. Nothing is explained correctly, examples are lacking and the documentation is abysmal. I'm banging my head on the keyboard every other minute and feel left out, but doggonnit, it's going to work!
My first impressions of the framework is that it looks very powerful but has been over complicated by silly naming conventions, unintuitive methodology and poorly worded documentation. If the over-complications weren't there then perhaps it would be easier to use as well as maintain its power. Sadly I don't have time to contribute examples.
This particular introduction is by far the most friendly. I often find others just write wordy, round-about ways to explain something simple.
"If you can't explain it simply, you don't understand it well enough." - Albert Einstein
Thanks Jose!
Jose,
I hate to "advertise" on your coderwall, but we just released ng-book (https://ng-book.com), which is 600+ pages of Angular content. We have worked hard to make it the best angular book with the best angular content available on the web.
Check out the community section on the site for an ever-growing list of quotes from happy readers.
From far i prefer Ember or Backbone than angular, cuz they focuz on app structure
Angular is very focused on HTML. They have said it's an "HTML compiler" not a framework.
Im working on a project now and we use angular, i see directives for everywere with all controllers logic in there, and the team thinks its awsome
We've picked Angular for our next project. After spending 3 months learning it, I'm still struggling with many things. I have to admit, probably only 20~30% of my time is writing code or reading documentations. That being said, is Angular too complicated? Can it be split into several pieces so people can learn one thing at a time? I understand it wants to be the one true Javascript front end framework. I just feel it does too many things.
Angular book is +600 pages, that's too much i think, learning curve is quite large to build apps of angular way, but again its solve several problems, problems that every each developer should know how to solve
I wrote www.angularbasics.co.uk to try to organise an understanding of Angular for newcomers. As pointed out above, the Google documentation is terse, technical, disorganised and severely lacking in appropriate examples. There is also no guidance on good working practices - it seems that they supplied lots of ways of dong the same thing so that they could let coders do their own thing. But this can lead to quirky and disparate coding styles.
Thanks for the link to egghead.io, good video tutorials each one short enough to grab and digest in time-limited ffee moments one step-at-a-time.
Great blog, please consider adding a date to your articles, it really helps sometimes.
I recently switched from backbone.js and underscore to angular. With some homework and reading for around a month I have really been able to get a hang of it. Yes it get's very confusing at first, but once you start learning more and more of it, you ll fall in love with it, as I have :)
Make sure you read the official angular documentation for each and everything. The documentation is very good and neatly presented too.
Angular seems artificially complicated. The level of abstraction is monstrous. But man programmers seem pleased instead of pissed off. A cult of 'chosen-ones' is forming...
Angular is very powerful an flexible but really needs a huge revamp to make it accesible to more people. Like Java was for C++, or Coffescript for JS. Semantics, syntax, documentation and as some one pointed up above, best practices.
And of course ,this need to change everything over and over. When we all got used to $scope, now it's back to 'this'...
