JournalJan 2015

How using Angular.js can benefit your startup

Update: This article is now a few years old, but you can find out about our current approach to building web apps with Angular on the Hanno Playbook. Or check out some of our other digital product development services.

When Google launched Angular.js in 2009, jQuery was still the colossus on the framework market. We used it to enhance our applications with nifty UI effects, for seamless client-server communication and to brew coffee.

Actually, most of us were quite happy for a while. But then our apps became more and more complex, and our tightly coupled components and interfaces turned out to be very hard to maintain.

With the rise of MVC frameworks like Backbone, Angular and Ember.js, things started to change. We realised that while jQuery has done an fantastic job in getting us to this point, we had stretched it to its limits. If we wanted to better understand and manage our fat clients, we would need to take a different approach.

Angular at Hanno

Here at Hanno, we have been using Angular.js on a few projects recently, and are quite excited about where things are going. Jon and I have spoken a lot about the benefits that Angular provides in a rapid development process like ours, and how it can benefit our clients.

We even came to the conclusion that narrowing our focus a little, to actively look to work on more Angular projects and build our expertise in it, could provide a lot of value for us and our clients. As more and more developers start to embrace it, and other great frameworks such as Ionic and Foundation for Apps begin to rely on it, it feels like a solid bet for the medium-term future of our work.

That’s not to say that we intend to focus solely on Angular, but by choosing it as our “preferred framework” for now on new projects, and building up our expertise in it, we can work much faster and more effectively.

So, what are the actual benefits for you as a startup when using Angular? How can it improve your workflow and enable quicker iterations? And how does it make your team work faster and more efficient?

Here are the answers…

It’s backed by Google

Being backed by the tech giant makes Angular very attractive for startups who want to minimise the risk of their technology stack becoming outdated anytime in the near future.

All of the core contributors are now working at Google so it’s obvious that Google takes Angular seriously and it’s not going to disappear anytime soon.

Angular contributors on GitHub

Some may argue that it’s not good for a software product to be owned by a single company, but it also avoids unnecessary flame wars inside the open source community, like the one we saw when node.js got forked into io.js by its top contributors, which is a very unfortunate thing to happen when your startup relies on open source technology.

It allows decoupled API-driven development

From our experience, using Angular is a great way to work on front and backend code independently of each other.

The fact that all of the view templates are being generated on the client allow you to craft a user interface without worrying about the server stack at all. Instead, you can focus on building the UI, bringing in application data in one of the following ways:

  • Using data from an already existing data source, if an API has already been built out for you.
  • Mocking the data service. Because Angular relies on dependency injection, you can feed your app easily with dummy data and later replace it with the real data service.
One of our clients–Mirror–build their application with Angular

When we worked with Mirror recently, their engineering team was focusing primarily on building out their API. We worked on the frontend and used their API and documentation to bring data into the web application we were building. Because we didn’t have to set up any backend components, we could focus on the user interface design, while they were able to focus their resources on developing the business logic. The only downside was that we had to rely on a working internet connection all the time.

It’s ideal for quick bootstrapping

In another project, we used Angular to quickly put together some UI components in the browser. Since a lot of application logic can be written in a declarative way by using HTML tags and attributes when you’re using Angular, we hardly had to write any JavaScript in order to make that happen.

In this way, we were able to cover a lot of ground in a short period of time, and also test out new ideas quickly. We knew that some of the ideas would be ditched anyway, so we decided that sacrificing a clear separation of logic and presentation is the right way to go.

Some template code the Angular way

As opposed to unobtrusive JavaScript, where you add JavaScript as an additional, separate layer on top of your HTML, we found that using Angular—although it “pollutes” your code with UI logic and template directives—is a much more efficient way to quickly build out prototypes and test new ideas.

It has a great community and resources

The popularity of Angular has created a big community around it. As a result, many developers are picking up the framework and decide to make it their major focus so that they can worry less about where their next project is coming from.

Have a look at the following graph, which shows how much angular.js has taken off on the job market recently.

The upwards trend of Angular jobs

For you as a startup, that means you’ll probably have a higher chance of finding an Angular specialist for your team than for any other JavaScript framework.

Another aspect is the availability of learning resources: Treehouse and CodeSchool provide excellent beginner courses for Angular Stack Overflow has more than 70,000 questions tagged with angularjs, and there are tutorials to help you get up to speed with Angular in a single day:

Dedicated angular conferences are now held every year, with videos from most of the top contributors available on YouTube. Check out ng-conf 2014 in Salt Lake City and ng-europe 2014 in Paris.

Angular = the swiss-army knife?

While Angular solves a lot of our problems, it doesn’t mean that it solves all of yours as well, and it’s certainly not the best fit for every project.

Actually, there’s an interesting conversation going on in the community where people discuss the various Angular performance and rendering issues.

For many, it seems we are sacrificing the performance of an application for a faster development workflow. This may be out of the question for companies that develop for huge audiences. That’s why Google’s flagship app–Gmail– is not based on Angular.

In our case though, given the type of clients we most often work with, being able to prototype and test out new ideas is a higher priority than building extremely scalable, highly-performant application infrastructures. In the end, our clients are startups with a limited amount of time and money, and we’re talking about their medium-term goals, not the ones 2 years into the future.

That’s why we need to balance: a) spending our time squeezing every single byte out of an application and b) delivering results quickly and efficiently. For the latter, Angular does a brilliant job.

Posted by
Marcel Kalveram

With Hanno since 2014, Marcel is an experienced engineer and a React Native expert.