HTML5 Zone is brought to you in partnership with:

Jeremy Likness was named Silverlight MVP of the Year in 2010. Now Senior Consultant and Technical Project Manager for Wintellect, LLC, he has spent the past decade building highly scalable web-based commercial solutions using the Microsoft technology stack. He has fifteen years of experience developing enterprise applications in vertical markets including insurance, health/wellness, supply chain management, and mobility. He is the creator of the popular MVVM framework Jounce and an open source Silverlight Isolated Storage Database System called Sterling. Likness speaks and blogs frequently on Silverlight, MEF, Prism, Team Foundation Server, and related Microsoft technologies. Jeremy is a DZone MVB and is not an employee of DZone and has posted 69 posts at DZone. You can read more from them at their website. View Full User Profile

10 Reasons Web Developers Should Learn AngularJS

10.14.2013
| 86272 views |
  • submit to reddit

There is no doubt that AngularJS – the self-proclaimed “superheroic JavaScript framework” – is gaining traction. I’ll refer to it frequently as just “Angular” in this post. I’ve had the privilege of working on an enterprise web application with a large team (almost 10 developers, soon growing to over 20) using Angular for over half of a year now. What’s even more interesting is that we started with a more traditional MVC/SPA approach using pure JavaScript and KnockoutJS before we switched over to using the power-packed combination of TypeScript and Angular. It’s important to note that we added comprehensive testing using Jasmine, but overall, the team agrees the combination of technologies has increased our quality and efficiency: we are seeing far fewer bugs and delivering features far more quickly.

If you are familiar with Angular, this post may give you some ideas to think about that you hadn’t encountered before. If you know Angular and are trying to justify its adoption at your company or on your project, this post can provide you with some background information that may help. If you have no idea what Angular is, read on, because I’ll share why it’s so powerful and then point you to resources that will get you up to speed, quickly.

I can only assume other organizations are seeing positive results after adopting Angular. According to Google Trends the popularity of AngularJS (blue) compared to KnockoutJS (red) and “Single Page Applications” (yellow) is exploding.

angulartrends

One of the first single-track AngularJS conferences, ng-conf, sold out hundreds of tickets in just a few minutes.

This post isn’t intended to bash KnockoutJS or Ember or Backbone or any of the other popular frameworks that you may already be using and are familiar with. Instead, I’d like to focus on why I believe AngularJS is gaining so much momentum so quickly and is something anyone who works on web applications should take very seriously and at least learn more about to decide if it’s the right tool to put in your box.

1. AngularJS Gives XAML Developers a Place to Go on the Web

I make this bullet a little “tongue-in-cheek” because the majority of developers using Angular probably haven’t touched XAML with a 10 foot pole. That’s OK; the reasons why XAML became popular in the Microsoft world through WPF, Silverlight, and now Windows Store app development are important to look at because they translate quite well to Angular. If you’re not familiar with XAML, it is a declarative language based on XML used to instantiate object graphs and set values. You can define various types of objects with properties and literally mark up a set that will get created. The most common types of objects to create are user interface elements such as panels and controls that create a display. XAML makes it easy to layout complex UIs that may change over time. XAML supports inheritance (properties defined as children of parents can pick up values set higher in the tree) and bubbles events similar to the HTML DOM.

Another interesting component of XAML is the support for data-binding. This allows there to exist a declared relationship between the presentation layer and your data without creating hard dependencies between components. The XAML layer understands there is a contract – i.e. “I expect a name to be published” and the imperative code simply exposes a property without any knowledge of how it will be rendered. This enables any number of testing scenarios, decouples the UI from underlying logic in a way that allows your design to be volatile without having to refactor tons of code, and enables a truly parallel workflow between designers and developers.

This may sound like lip-service, but I’ve been on many projects and have seen it in action. I recall two specific examples. One was a project with Microsoft that we had to finish in around 4 months. We estimated a solid 4 months of hands-on development and a separate design team required about 4 months of design before all was said and done – they went from wireframes to comps to interactive mock-ups and motion study and other terms that make me thankful I can let the designers do that while I focus on code. Of course if we followed the traditional, sequential approach, we would have missed our deadline and waited 8 months (4 months of design followed by 4 months of coding). XAML allowed us to work in parallel, by agreeing upon an interface for a screen – "These are the elements we’ll expose.” The developers worked on grabbing the data to make those properties available and wrote all of the tests around them, and the designers took the elements and manipulated, animated, and moved them around until they reached the desired design. It all came together brilliantly in the end.

The other real world example was a pilot program with a cable company. We were building a Silverlight-based version of their interactive guide. The only problem was that they didn’t have the APIs ready yet. We were able to design the system based on a domain model that mapped what the user would experience – listings, times, etc. – then fill those domain objects with the APIs once they were defined and available. Again, it enabled a parallel workflow that greatly improved our efficiency and the flexibility of the design.

I see these same principles reflected in the Angular framework. It enables a separation of concerns that allows a true parallel workflow between various components including the markup for the UI itself and the underlying logic that fetches and processes data.

2. AngularJS Gets Rid of Ritual and Ceremony

egyptian-gods

Picture Credit: Piotr Siedlecki

Have you ever created a text property on a model that you want to bind to your UI? How is that done in various frameworks? In Angular, this will work without any issues and immediately reflect what you type in the span:

<input data-ng-model=’synchronizeThis’/><span>{{synchronizeThis}}</span>

Of course, you’ll seldom have the luxury of building an app that simple, but it illustrates how easy and straightforward data-binding can be in the Angular world. There is very little ritual or ceremony involved with standing up a model that participates in data-binding. You don’t have to derive from an existing object or explicitly declare your properties and dependencies – for the most part, you can just pass something you already have to Angular and it just works. That’s very powerful. If you’re curious how it works, Angular uses dirty tracking.

Although I understand some other frameworks have gotten better with this, moving away from our existing framework where we had to explicitly map everything over to an interim object to data-bind to Angular was like a breath of fresh air … things just started coming together more quickly and I felt like I was duplicating less code. Who wants to define a contact table, then a contact domain object on the server, then a contact JSON object that then has to be passed to a contact client-side model just to, ah, display details about a contact?

Published at DZone with permission of Jeremy Likness, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Ali Akbar Azizkhani replied on Fri, 2013/10/18 - 5:02am

 angular project is like GWT project .

 fast grow and faster than die

Maticp Petek replied on Sat, 2013/10/19 - 2:15am in response to: Ali Akbar Azizkhani

Hi,

GWT is not really dead. It's just transform into open-source project, we can expect new version this december, major update next Google IO. And first time it will be special conference for GWT - GWT.create. So from my point of view, GWT is really accelerate.

Regards,

Matic

Luis Perez replied on Fri, 2014/01/10 - 11:29pm

I like angular a lot. I've used other JavaScript frameworks in the past, template systems, binding libraries like Knockout, frameworks like backbone, etc. Each great in it's own right. 

But I find AngularJS succeeds at what it tries to accomplish which is being a pretty complete and comprehensive framework. It has a little of everything you need and what it doesn't have is easily added using their extensible system.

The toughest part which you probably hear a lot is the initial learning curve. Personally I think this is the fault of the documentation and not angular. In fact to prove it I created a blog post series that eases you into Angular without overwhelming you with the details of the framework. 

You can find the link to it right here on dzone. As of the time I wrote this comment it had 8 votes and it was only published 2 days ago:

http://www.dzone.com/links/create_an_email_app_in_angularjs.html

Like I said I like AngularJS a lot, and it's a lot easier than WPF, which I admit to have done :)

Kimberley Heuer replied on Thu, 2014/02/27 - 10:40am in response to: Luis Perez

 Thank you Jeremy for your article.  I would like to watch your video but it requires an email address in addition to a  password.  Could you verify the email address to use?

Thanks you,

Kim

Jeremy Likness replied on Thu, 2014/02/27 - 11:20am in response to: Kimberley Heuer

The code is not a password. You can register for a new account and use the code to receive the discount once you create your account. Thanks! 

Richard Boyd replied on Thu, 2014/02/27 - 3:49pm

I "tried to follow" you instructions ... but it leads into PayPal + Credit Card + etc etc.

Are you saying one has to sign up with a CREDIT CARD  via PayPal for $29/mo or $319/yr .... THEN sometime later apply the Discount Code??

(and "hope" no charges are applied ?!?)

Thanx.


Jeremy Likness replied on Thu, 2014/02/27 - 5:07pm in response to: Richard Boyd

You should be able to enter the promo code right away. This link will pre-populate it for you:

https://www.wintellectnow.com/Account/Promo/LIKNESS-13 

With the promo code even though you are "signing up" it will give you two weeks free, and you just cancel before that time and nothing will be charged. Sorry for the confusion, I know the WintellectNOW administrators are working to improve those screens so they aren't as confusing. If you have any issues at all or are concerned and want to verify please don't hesitate to contact support there. 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.