What is Angular?

Angular is a JavaScript framework that solves a problem that most people, even developers, didn’t realize they had on their websites. Workload distribution.

To explain workload distribution, let me provide you with an example scenario…

Imagine you’re on a shopping website, and you’re looking at buying an Emoji Smiley Face ChiaPet. Even though you like the Smiley Face, you think you decide to check out the Winky Face option.

When you click the link for that option, your browser tells the shopping website’s server what page you want. The server figures out what HTML that page will need, what data it needs to fill that HTML with, and which CSS files and JavaScript files it needs to display the HTML correctly. Then it sends all of that data to you, and the browser reloads into the new page.

This is called a ‘post-back’. The vast majority of this data will be identical to the last page. Same site header, same CSS and page template, but you’re getting it all again because you want a houseplant with some attitude.

Most of the data between these two pages is the same.

This isn’t necessarily a problem if you’re using laptop with a decent Internet connection. But what about if you are on your phone, using your mobile data?

Browsers have become much more powerful in recent years. Angular takes advantage of this to take a large amount of work off the server and the Internet connection, and it shares more of the burden with the user’s browser.

In an Angular site, your server sends all of the HTML, CSS, and JavaScript needed to the browser when the user first comes to the site. From there, your browser just has to ask for the raw data to fill in the different pages without refreshing the page every time. This means less work that the server has to perform, less data transferred, and a much faster load time for the next page when you can’t make up your mind on the shape of your Chia planter.

Angular 1 Details

One of the things I realized when I started working with Angular 1 is how much faster it was to develop the UI. For example, if I wanted to list out the names of some employees, I could write something like this…

<div ng-repeat=”employee in employees”>

</div>

Angular will output each name in my list of employees. Compare this to having to write at least 100 lines of JavaScript to get the same action to work with jQuery. 

Want to let people search through that list? Just add a textbox and use it to filter the list!

<input type=”text” ng-model=”search” />

<div ng-repeat=”employee in employees | filter:search”>

</div>

That connects the list to the textbox and filters down the values shown to whatever the person entered.

It's easily the difference between 16 hours of development time and 1 minute of development time.

Other great Angular features:

• Unit testing
• Script dependency handling
• Modular design patterns to help multiple developers work in parallel
• Single-page application

Angular 2 Details

On September 14, Angular 2 was - at long last - officially released. For more than a year prior, developers have been trying the Angular 2 release candidates in projects. These versions were not entirely stable and subject to changes that could break the project you were working on. Now with the official release, we should start to see many of the stability issues smooth out and no more breaking changes. However, many developers were trying to jump into using it before the official release because of some very exciting upgrades. The biggest update is the switch to TypeScript.

TypeScript is an open source scripting language developed by Microsoft that gets compiled into standard JavaScript before getting added to the webpage. TypeScript is better than JavaScript for developers because it helps avoid hours spent trying to find simple syntactic bugs. Essentially, it forces the developers to be more specific as they’re writing code, and TypeScript allows their text editors (Visual Studio Code or Atom.io, for example) to tell the developer when they’re making mistakes.

When you’re building an Angular application, especially Angular 2, you’ll probably have a build system, such as Grunt or Gulp running with Node.js to compile all of your TypeScript files into JavaScript, minify the JavaScript, and add the file references to the index.html file for you. There are ways to automatically do this every time you change make a change in the project. You can have a browser window open to show you the changes you’re making to the site in real time, which greatly simplifies your development workflow.

Angular 2 also has drastically reduced the size of their framework, which means less data needs to be sent to the user’s browser. In addition, they have modularized their framework, so you can cherry pick the features you want to use in case there are aspects your application doesn’t need. Or if you can do some functionality better with custom software, you can write your own module to replace Angular’s.

How To Decide Between Angular 1 and Angular 2

If you’re about to start a pet project, something short term with few developers, then it might be worth trying out Angular 2. Once you have your project’s build system running smoothly on your computer, development can be extremely fast and easy.

But if you have a project that is long term with many developers, I’d recommend Angular 1. In my experience, attempting Angular 2 projects with this size proves to be a burden. You end up spending a significant amount of time debugging problems with the build system not working properly and upgrades that have broken features.

With Angular 1, you can easily create a tried and tested seed project with a build system using the Yeoman scaffolding tool. I’m not saying you won’t run into issues with your development project, but in my experience these issues are far less frequent.

About a year ago, Dave Ceddia of The Angularity blog put together a flow chart to illustrate the process. His recommendations still ring true today.

This isn’t to say that my recommendation won’t change soon. Angular 2 was only just released officially a week ago. There will be bugs that need to get fixed, not just with Angular but also with the build systems developers use to create the projects. In a few months there is a good chance that a lot of the problems developers have encountered will be smoothed out. But I have no doubt that Angular 2 will be the future of web development.