angular2

Does Angular 2 live up to the hype?

By Tyler Church, Architect and Director of Development

The hype is alive and well:

“Angular 2 is not just another framework”

“Angular 2 is easier”

“Angular 2 is the future”

And the cynics are kicking just as hard:

“Learning Angular 2 was excruciating”

“Angular 2 is too little too late”

”Angular 2 isn’t worth it right now”

As we watch Angular 2’s first production release version roll-out, many of us are asking ourselves these questions: Who do I believe? Just what is in Angular 2? Is it really that much better than Angular 1? Do I upgrade now or do I continue on with my existing framework, especially if that is Angular 1?

We took the dive into Angular 2 – Here’s how it went!

When Angular 2 went into beta, we began experimenting with it. And (spoiler alert!) Angular 2 became the basis for our newly released Cycligent Git Tool, a free graphical Git tool that makes Git much easier to understand and use.

So what do you need to know about Angular 2?

todoangular

The first thing to know about Angular 2 is that it’s different from Angular 1. We mean really different. As in its better to forget what you know about Angular 1 then to try and apply it to Angular 2. There are a lot of things with the same names (though even more things with different names), but don’t let that lull you into trying to do things in the same way as you did in Angular 1. Core concepts have changed. You’re not in Kansas anymore.

Our recommended approach is to take the general sensibilities you’ve gained about building single-page apps with you, but leave everything else you know about Angular 1 behind. If you try to make Angular 2 work like Angular 1, you’ll just end up causing yourself large amounts of unnecessary grief.

So what is Angular 2 going to give me?

Before getting into the specifics, I think generally what you’ll find with Angular 2 is that everything has been very well thought out. Angular 1 was also the product of some deep thinking about web apps (which is one of the reasons I think it was so successful), but you can tell with Angular 2 that they’ve gone even farther, removing many of the warts that Angular 1 had.

Here’s what’s new and great:

  1. Similar to directives in Angular 1 (but don’t take the similarity too far, they’re different!), they’ve become much more flexible and easier to think about, and are a breath of fresh air compared to what came before. Some of the new niceties of Components:
    1. Each component is a class that stands on its own. This makes them very easy to read, very easy to test, and very easy to separate them out into separate files.
    2. Components no longer pollute a module namespace. In Angular 1 it was very easy to be lazy and throw many or all of your components into one module, and even if you properly separated them, it was difficult to understand the dependency chain that you created. In Angular 2, you list out the Components that you are using in the places where you are using them, so it’s very easy to tell what needs to load what. And if you’re using TypeScript, missing dependencies will become compile errors.
    3. With constructs like ViewChildren, Angular 2 will automatically keep a list up-to-date with all the child Components. No more querying around calling .controller() or .scope()
    4. Other decorators and lifecycle hooks make it very easy to write code that receives certain data and handles various events.
  2. Better events and outputs. Angular 2 changes the way events are handled. The new name of the game is: If there’s an event, you can bind to it. So say goodbye to ngClick, ngKeypress, and friends. Just grab the DOM events you need by their normal names. Angular 2 also makes it drop-dead simple for your Components to emit their own events and other data, and it follows the same conventions as the built-in DOM events, which makes it very easy to use.
  3. No more $scope.$apply(); In Angular 1, if you wanted to integrate with any non-Angular JavaScript code, you were forever making calls to $scope.$apply() or $scope.$digest(). Even with lots of practice using Angular 1, I would still find myself confused in situations where I’d go “Why didn’t the UI update!?” only to finally realize that I had called out to a non-Angular function, and Angular had no idea anything had changed. Angular 2 adds hooks to all the various async JavaScript operations you could do, and therefore everything generally “just works”. After being used to Angular 1, I was skeptical about this at first, but it works well!
  4. No more $scope at all! It was never abundantly clear in Angular 1 when you should put a property on $scope, or a property on a directive, or a property on a controller, or some other place. Now $scope is gone, and you simply add properties to your Component classes as they make sense in the design of your class.
  5. Easily share data between Components. In Angular 1 if you needed to share some data between directives you had a weird dilemma: Do I use a Provider? A Factory? A Service? A Value? A Constant Value? It seemed like I always had to reread the docs to figure it out. In Angular 2, you make a class that contains the data, you decorate it with @Injectable(). Done.
  6. Worry less about stylesheets. By default, styles used on a Component are scoped to a particular Component, so you don’t have to worry about styles on some special <input> Component you’ve built trashing the styles on all inputs on the page.
  7. Feel good about accessing the DOM. Angular 2 is no longer trying to be jQuery by including their own “jqlite” module. We could argue about whether this is good or bad, but I think it’s good. Rather than wondering where Angular ends, and DOM manipulation begins, it’s often much more clear in Angular 2 where Angular isn’t going to help you; indicating that you should reach out to a library like jQuery.

This is just scratching the surface, and there’s a lot more to Angular 2. If I had to pick one thing I’d say: I’m just a lot happier working in Angular 2. Angular 1 made web app development a much happier experience, Angular 2 takes that even further.

TypeScript vs JavaScript

typescriptt

One of the big things you’ll notice about Angular 2 is that they really push you to use TypeScript.

We’ve had a long history building things in JavaScript, and technologies like Angular 1 and Node.js pushed us even further into our love for JavaScript. So at first the idea of using JavaScript’s strange cousin TypeScript seemed a bit repugnant to us. One of our favorite aspects of JavaScript was that we didn’t need a compile step like our .NET and Java brethren: Just hit refresh! TypeScript required a compile step so we tried to avoid it for a long time.

Support for plain JavaScript in Angular 2 was severely lacking in the beta stages. It may have been possible, but it was very poorly documented. We fought with it for a long time, and eventually acquiesced to use TypeScript. And oh how happy we were when we did!

Some of the things we now love about TypeScript:

  1. Use as much or as little of the typing system you want! Since TypeScript is just a superset of JavaScript, you can write much of your code as you normally would, cranking up the typings wherever you feel it makes the most sense. After a period of getting used to things, we settled on using typings much more often than we didn’t. Though TypeScript’s “any” type provides a lovely escape hatch that we occasionally use when we’re writing very dynamic code.
  2. Interfaces make building a large app worlds easier. In JavaScript, passing around custom data structures is easy, but it’s not always easy to document what those structures need to contain. With TypeScript, it’s a no-brainer, just create an interface. We’ve gone so far as to write a helper script that parses our backend code and generates an API file with all the proper typings for our frontend. So if a backend function changes what it’s expecting or returning, we immediately start getting TypeScript errors.
  3. Refactoring is now a breeze. Refactoring with JavaScript always consisted of a lot of CTRL+F-ing around the codebase and saying a few prayers that I didn’t miss some piece of code. With TypeScript I’ll often refactor by just deleting or renaming functions wholesale, confident that the compiler will tell me everywhere that I need to fix.
  4. Classes are first-class citizens. We love classes, so much so that the primary client-side JavaScript library we developed includes helpers for building classes more easily (as well as lots of other goodies, like handling async script loading and – gasp! – Type checking on function arguments! I guess we were on the path to TypeScript all along).
  5. Use ES6. Since TypeScript can compile to older JS versions, many ES6 features that aren’t yet widely implemented in browsers are usable today.
  6. Language parsing tools. If you want to write any helper scripts for working with your code, or otherwise analyze the TypeScript code you have our there, the TypeScript compiler provides an API that makes it very easy to do so. It’ll take a little bit to get your bearings, but once you do it’ll be smooth sailing.

So overall the conclusion about TypeScript for us is clear: We are now enamored with TypeScript! Whether or not you take the plunge for Angular 2, your JavaScript development will be greatly improved by switching to TypeScript.

Angular 2: Now or Later?

Since so much has changed in Angular 2, many people have expressed frustration with updating their apps. Angular 2 offers an upgrade path from Angular 1,  but I can’t vouch for it directly. From a technical perspective, we think Angular 2 is leagues better than Angular 1, and so for all new projects we are starting with Angular 2.

For an existing project, whether to switch from Angular 1 to Angular 2 is a decision where you need to weigh business needs and other considerations specific to your project very heavily when considering a switch. Long-term, I think Angular 2 and TypeScript will yield productivity and happiness improvements for your developers, which should result in more business value being delivered over the long term. But rewriting an app is expensive, so the most worthwhile path would probably be to slowly convert say one page at a time over to Angular 2.

Angular 2 Tips and Tricks

So if you’re like us and think these benefits of Angular 2 and TypeScript make it worth jumping into Angular 2, here’s a few tips and tricks that we hope you’ll find useful:

  1. I said it once and I’ll say it again: Forget everything you know about Angular 1. Don’t inflict upon yourself the pain of trying to use Angular 2 the way you used Angular 1. Some concepts have the same names, but your default mindset should be that you assume everything is different and you need to read up on it.
  2. Templates are different now and you should make sure you’ve read this: https://angular.io/docs/ts/latest/guide/template-syntax.html
  3. Use Angular only when it helps you, and reach for jQuery or direct DOM manipulation when it doesn’t. For example, we had a custom list view that could contain thousands and thousands of elements, with actions available on each one. Angular would try to reprocess all those items fairly often, and was generally unhelpful in making it easy for the user to perform actions on items in the list. With direct DOM manipulation, the solution was much less frustrating to implement not to mention worlds faster. It can be far too easy to tie yourself up in trying to have Angular do everything for you all the time. Don’t be afraid to reach out to the DOM directly when you need to.
  4. Prefer TypeScript over JavaScript. You might be nervous to make the jump like we were, but I think if you give it a shot you won’t look back.
  5. Avoid impure pipes. They cause Angular to re-evaluate a template as often as it can, which can slow your app down a lot, especially if the pipe is doing something computationally expensive.
  6. Avoid calling functions in your templates to set attributes. It’s tempting to write something like this: <img [src]=”urlGet()” />
    Don’t do it! Much like impure pipes, Angular 2 will see this function call and will try to call it as often as possible in case the value changes. Update a property on your Component or use a pure pipe instead.
    If for some reason you must use a function instead of a property, make it a getter instead of a function since that will cause Angular to think it’s just a normal property.

Conclusion

The combination of Angular 2 and TypeScript is a powerhouse we look forward to using throughout all our projects in the future.

TypeScript and Angular 2 push you towards designs that are easier to implement and understand than their Angular 1 counterparts. As a developer, Angular 2 and TypesScript has made me happier and more productive.

Interested in seeing what Angular 2 looks like in action? Check out the Cycligent Git Tool which is a version control GUI we built in Angular 2! (don’t worry, it’s free!)

After you’ve built your new Angular 2 app, you can use the Git Tool to deploy it to the Cycligent Cloud. Or you can sign up for a free 30-day trial here: https://www.cycligent.com

 

11 thoughts on “Does Angular 2 live up to the hype?”

  1. no backwards compatiblity = lame. Angular 1 does not follow W3C standard (i.e.: forms), don’t waste your time, digest in oo javascript instead.

  2. >Better events and outputs

    Oh, i must have missed that memo. Any good read-ups on this? (i’m sure there’s something in the readmes for this lol)

  3. >As in its better to forget what you know about Angular 1 then to try and apply it to Angular 2.

    I think you mean “than” instead of “then”.

  4. This, like so many other articles, proceeds to mostly compare Angular 2 to Angular 1. However, most of the criticisms aren’t around that (except for the backwards compatibility issue). The real point that people are getting at is that Angular 2 isn’t a great choice when you consider it against all the other JS framework options available today. Angular 2 literally doesn’t do anything that another framework doesn’t do better.

    * Angular 2 isn’t the fastest framework.
    * Angular 2 doesn’t use the least memory.
    * Angular 2 isn’t the most standards compliant.
    * Angular 2 isn’t the smallest.
    * Angular 2 isn’t the simplest to learn.
    * Angular 2 isn’t the most flexible or extensible.
    * Angular 2 isn’t the most transparent and open.
    * Angular 2 isn’t the most stable or backwards compatible.
    * Angular 2 isn’t the most unobtrusive.
    * Etc.

    So, if it’s so different and you are going to have to forget Angular 1 and essentially learn a new framework altogether, why not just learn a different framework besides “Angular”? Pretty much every major framework has advantages over Angular 2, so it makes more sense to just pick one of those.

  5. Angular 2 is definitely different than Angular 1. Angular 2 is similar to the Aurelia framework, but more heavy-handed. I like Aurelia because it is leaner, and geared towards plain JS support, although it has full TypeScript support as well.

  6. > If for some reason you must use a function instead of a property, make it a getter instead of a function since that will cause Angular to think it’s just a normal property.

    Is this really true? I can’t believe.

  7. Interesting post, thx!

    For your long list (tens of thousands elements) where you used jquery and DOM manipulation, did you take a look at ChangeDetectionStrategy.OnPush to avoid ng2 to touch if unless data input change?

Leave a Reply

Your email address will not be published. Required fields are marked *