My First Date with Angular JS

Who’d have thought one day we’d be running entire applications from within a web site? From Google Docs and Maps, Wikipedia, Facebook, Quake - the humble web browser has been pushed far beyond it’s original ‘static page’ beginnings. As browsers evolve, ensuring backwards compatibility while allowing new features is a delicate process; a trade-off of backward compatibility with new development approaches means developers are left with tools that hold a lot of baggage. The tools of today aren’t quite equipped to build the applications of today. So how do web developers create large and complex projects when the standard tools available to build them aren’t up to snuff?

JavaScript is the de-facto client-side scripting language, which is perfectly fine for developing smaller applications, but - unless you’re well prepared - the development of large applications can be challenging. There are many options to overcome these hurdles of application scalability, manageability and productivity - whether it be new languages like Dart or Typescript, or using a framework like Angular or Ember to provide a structured way of building a web app.

If Google Trends holds any weight, AngularJS is quite popular at the moment. Earlier in the year I had some one-on-one time with Angular and was able to relive all the joys and pains of learning a new framework. So what does Angular have to offer?

Productivity - “We do so much together!”

My most loved feature of Angular is the data-binding. Angular is essentially an MVC framework, with one point of data that everything can access and update, and all done without writing tedious “this equals that” code. This will save you a lot of time when developing data-heavy apps, and certainly a strong case if deciding on Angular for a project.

They even make it fancy with all data updates in real time, so as you’re filling out your client information, you can already see the page around you drawing off that data and changing. A simple ‘collect and show data’ app can be written with ease and yet still look shiny and expensive.

The modular design is another one of it’s great features - structure your code correctly and you can build reusable elements, which can really speed up development when working in teams on large projects.

Structure - “You can be a bit controlling...”

This ain’t the wild west - if you want to do anything in Angular, you’ll need to work within it’s structure. It’s great because there’ll be no nasty surprises when you come to edit code another developer has written (assuming they don’t make any crazy hacks). But it’s quite tedious too, especially for minor things. It can sometimes feel like creating blueprints for pitching a tent. In fact, some of the more straightforward things you’d instinctively know how to do in pure JavaScript can become small puzzles to solve in Angular - especially when starting off.

Performance - “I’ve had better...”

Angular is heavy. If you’re the kind of person who avoids anonymous functions because they feel weighty and a bit dirty - then you’re going to have a hard time in Angular. Everything seems to be an anonymous function. Needless to say, I felt quite uncomfortable and had to learn to let my better judgement go for the sake of my sanity.

A lot of performance problems stem from Angular’s data binding. In Angular, when you create a variable on the model and attach it in the view, it listens for any changes on the view and on the variable. Use it in more places, and these listeners add up, and soon you’ll have visible slowdown. Alternative Modules and methods have been developed to try and ease some of the performance woes, but you feel like you’re always on the optimisation clock. When making any small change, you’ll be thinking ‘will this come back to bite me?’

Longevity - “But how long will it last?”

“Minor version releases in AngularJS introduce several breaking changes that may require changes to your application's source code; for instance from 1.0 to 1.2 and from 1.2 to 1.3.” - Angular JS Website

Minor versions are not compatible with one another and what you build today may only be relevant for a short time. This is quite scary and something we ran into on my first Angular project. If the whole site is 1.1, and you need to build a new feature, do you do it in 1.1 knowing it will eventually be obsolete and that effort will be required again at some point, or do you plan for the future and build in 1.3, then try and figure out how to make a 1.1 app with a 1.3 page work together? Or just rebuild your entire app.

Avoiding pre-built frameworks or building a framework to suit your needs in JavaScript would avoid possible imposed versioning issues, though it’s debatable if you’ll be better off in the long run. For a company - a project with high developer turnaround may be better suited to a well known framework.

What’s next? - “Is there something you’re not telling me?”

If you’re familiar with building websites using something more complex than just static HTML pages; you’re no doubt heard of tools like XAMPP, EasyPHP, MAMP. These are ways of being able to write and run server-side code on your personal computer without the need for an external server.

Client-side coding is classically a lot easier - if building a single page app in JavaScript, you may find just opening the HTML file in your favourite web browser is enough. But with Angular, things get more complicated. If you take a glance over this instructional - terms like ‘npm’, ‘bower’, ‘grunt’ pop up often, and these you must learn to be production-ready.

There’s quite an ecosystem of tools to learn on top of just the framework when developing in Angular. Even if you know how to use the framework, there’s a whole other side to learn with regard to preferred methods of adding modules, compiling files, validating code and so on.

Summary - “So will I see you again?”

Wondering if you should use Angular for your next project? With high reusability in a structured framework, Angular provides a good platform for developing large, data-driven web applications. There’s a bit of a learning curve, and some room for improvement in backwards compatibility and performance, but if you can accept these, then Angular might just be your perfect match.