By Tyler Church, Architect and Director of Development
The hype is alive and well:
And the cynics are kicking just as hard:
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:
- 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:
- 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.
- 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.
- 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()
- Other decorators and lifecycle hooks make it very easy to write code that receives certain data and handles various events.
- 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 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 <input> 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.
Some of the things we now love about TypeScript:
- Use ES6. Since TypeScript can compile to older JS versions, many ES6 features that aren’t yet widely implemented in browsers are usable today.
- 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.
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:
- 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.
- Templates are different now and you should make sure you’ve read this: https://angular.io/docs/ts/latest/guide/template-syntax.html
- 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.
- 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.
- 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.
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