I thought that is time for me to learn something else, something new from the Front-end world just to be on same wave with latest trends and to feed the brain with a different perspective. After all life is all about learning and in doing we learn.

I like everything what’s connected with web apps and lately I’ve been keeping my eyes on AngularJS. Seeing it’s growing popularity and that AngularJS advocates a different approach of building web apps, got me intrigued and I’ve started the learn process. After a week of diving in many resources I’ve decided to put down some of my thoughts.

Learning curve
I can agree with this guy. You get down and up while trying to understand how the core works and you think sometimes that some of the things are easier and faster to achieve with less effort in ExtJS. sometimes the opposite.

Documentation.
Being indulged by ExtJS’s good documentation, what I’ve found on AngularJS made my start not easy. For more resources google is your friend. My search brought to surface a few good posts which I think worths to check:

First experiment and thoughts
Ended up with a simple directive analog to the multiselectfield Sencha Touch component I built a few months ago. The implementation wasn’t smooth and intuitive. Had to make some debugging and reread some resource to understand how scopes work in AngularJS for directives, parent and child elements. Other important AngularJS specifics on my learn list, is to understand how the watchers work in directives and how to write the code to end up with less of them.

Angular seems a powerful, not big library. But building your first web components will take some time. Is not like you would extend an ExtJS Panel with some child items or a View with a configured XTemplate and some methods.

Overall when building an app or component you could spent 40% of your time on writing html and 60% javascript, while on ExtJS around 85% is javascript. Also ExtJS has built in nice layouts and a platform for theming, while on AngularJS is needed a 3′rd-party CSS/JS library or some personal efforts.

I like Angular’s two way binding, though I’m not sure yet when there are a lot of watches, from the performance perspective how the app will behave. Directives are very nice to make reusable components, but I’ll need some time to get used to Angular’s way of configuring components(directives) trough html attributes when in ExtJS  I did it trough javascript objects.

<div ng-controller="ExampleCtrl">
    <nvd3-cumulative-line-chart
            data="exampleData"
            id="exampleId"
            width="800"
            height="400"
            showXAxis="true"
            showYAxis="true"
            tooltips="true"
            interactive="true"
            x="xFunction()"
            y="yFunction()"
            color="colorFunction()"
            isArea="true"
            margin="{left:50,top:50,bottom:50,right:50}"
            >
        <svg></svg>
    </nvd3-cumulative-line-chart>
</div>

Next Step
Climb next peak on that learning curve, with some more patient along with some beers, going to reread some of the resources and build some more directives.