March Madness - pfft. More Like Angular Madness.

Posted Apr 27, 2017

March is here, and that means spring time (for some of us), as well as some long-lived US traditions, such as March Madness. For those who aren't familiar with March Madness, it's single-elimination basketball tournament held between universities during the month of March each year. The rest of us participate by trying to guess which team will win by filling out tournament brackets (also known as Bracketology - srsly) and wagering money in states where gambling is almost always illegal. March Madness is "fun" because you can't ever predict who is going to win what game. Filling out a tournament bracket is tantamount to picking lottery numbers.

Since most tournament games are played during the day, some agencies have begun to track the amount of worker productivity that is lost during the month of March. In 2015, some estimated it to be nearly 1.9 billion dollars in productivity lost to March Madness.

That's très commas.

March Madness is great, but for those of us who aren't going to be devising creative ways to watch basketball at work while pretending to do actual work, we at Kendo UI are presenting you with a "Month Of Angular" on the Telerik Developer Network.

Month Of Angular

All month during March, the Telerik Developer Network will be publishing articles on how to migrate 1.x concepts to modern Angular. We're calling it a Month Of Angular. These articles were written by some of the top minds in the Angular community and we're going to finish the month off by combining all of these articles into a comprehensive resource that you can come back to at any time to get a definitive set of helpful migration content.

IMG

One of the biggest hurdles that most people have when picking up modern Angular is moving from an Angular 1.x mindset. This is because most people moving to Angular (2+) are coming from an existing Angular background. That's pretty tricky because Angular today is miles different from the Angular 1.x of days gone by. Some of those changes are good, and some are gnarly. Some are logical and some seem like mental gymnastics. As such, some people have a hard time moving to modern Angular and tend to hang out on the latest 1.x branch as long as humanly possible. That's too bad because today's Angular is chocked full of improvements to just about every area of your application.

Goodbye Directives

One of the first and most noticeable changes in Angular is that the concept of directives is drastically reduced. I might have been one of the first to take issue with the convoluted concept of directives in 1.x. It was a massive over-complicated concept that was powerful, but excruciatingly hard to wrap your head around.

Angular is now all component based. That means that instead of creating directives, you spend the majority of your time building components. These components are simple JavaScript classes and markup that is bound to properties and functions on the classes. Each of these components is scoped and isolated from other components including the ability to include and encapsulate it's own CSS. That's really powerful stuff! While directives are still present in Angular, you'll find yourself using them less as the component model provides most of the functionality that you might traditionally turn to directives for.

TypeScript!

I included an exclamation mark (or bang for all you brogrammers out there) because TypeScript is AWESOME. I made awesome in all caps because TypeScript is all-caps awesome. I hyphenated all-caps because that's what the editor suggested I do.

TypeScript is an entirely new experience in JavaScript development. It elegantly brings static language concepts and typing to JavaScript in an unobtrusive and marvelously simple way. TypeScript enables all sorts of wonderful tooling inside of great IDEs such as Visual Studio Code and WebStorm. No more guessing at methods and debugging bad imports. TypeScript helps catch all of these things at design time. This is really important because Angular is very modular in it's setup. There are a lot of libraries and dependencies that make Angular work. Furthermore, it encourage a very modular application setup that will result in quite a few folders and files on your system. This is great for application architecture, but really difficult to keep up with without a language smart enough to help you out.

TypeScript is really like a co-worker who helps you find your mistakes without being a jack hole about it. That should be TypeScript's new marketing tag line. Microsoft - that one was for free.

Performance

One of the oft heard wailings about 1.x is that it was "slow" in larger applications. This is because Angular 1.x watched pretty much everything inside of controllers and templates for changes. The more objects you added, the more it had to watch until eventually it was like trying to clean out the Panda exhibit.

EMBED: https://www.youtube.com/watch?v=K3tNgwQwKK4

Angular is now between 5 and 10 times faster than 1.x. It is built for scale. It does this through a variety of changes, the most noteable being that bindings are now one-way (unless otherwise specified), and Angular is much smarter about how it checks bindings for changes. It takes binding code and literally turns that into native code via just-in-time compilation which results in screaming performance.

You Can Say You Know Angular

If you don't know Angular and you feel like you are the only one, I promise you, you are not. Most people are just like you - confident with 1.x and hesitant about modern Angular. Follow us during the month of March and while we can promise that you will be an Angular 2 expert, we can guarantee that you will not be intimidated by it. It is not nearly as complex as it seems, and honestly, not nearly as different from 1.x when you get into it.

So head over to the Telerik Developer Network and subscribe to our RSS feed. If RSS isn't your thing, you can also follow the official @kendoui account where we'll tweet articles and updates as they come in

Angular Attack is nearly upon us. Now is the time to learn Angular.