My First Date with Angular JS
Developers around the world are finding some framework to love, but did Angular have me at Hello (world)?
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?
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...”
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.
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.
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.