Does Angular 2 live up to the hype?

  • One of the big things you’ll notice about Angular 2 is that they really push you to use TypeScript.
  • TypeScript and Angular 2 push you towards designs that are easier to implement and understand than their Angular 1 counterparts.
  • After you’ve built your new Angular 2 app, you can use the Git Tool to deploy it to the Cycligent Cloud.
  • And if you’re using TypeScript, missing dependencies will become compile errors.
  • TypeScript required a compile step so we tried to avoid it for a long time.

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?

@webMASTAHnet: Does #Angular 2 live up to the hype? – #javascript #js

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?

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:

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.

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!

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.

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.

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 Component you’ve built trashing the styles on all inputs on the page.

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.

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:

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.

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.

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.

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).

Use ES6. Since TypeScript can compile to older JS versions, many ES6 features that aren’t yet widely implemented in browsers are usable today.

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.

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.

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:

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

* Angular 2 doesn’t use the least memory.

* Angular 2 isn’t the most standards compliant.

* Angular 2 isn’t the simplest to learn.

Does Angular 2 live up to the hype?

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.