5 reasons to use AngularJS in the corporate app world

large-companyAngular

The current situation in the world of corporate apps can be described with one word, chaotic.

Between legacy code that has been around for N years jumping from developer to developer with no documentation. To over complicated interfaces that are over complicating the code. To a mixture of N technologies in one single app. Lets face it, these things were not built with maintainability and support in mind. The problem we face today is, how do we fix all these apps? Where do we start? How do we bring sanity into them? How do we bring them into state of the art tech stacks?

This post represents my opinion of why using AngularJS in corporate applications will not only bring sanity to your apps, but it will allow them to evolve into the future.

1) Start little by little

In an Enterprise you are probably starting with an ugly brownfield project, not a nice green field. Something that has been cooked and baked many times over. Making sense out of it is so hard that developers normally tend to just throw away and rewrite. This of course affects cost and time.

With AngularJS this is not the case. You can start by sprinkling it in some places of your app that you can slowly start to rewrite. Believe me I’ve done this before and it actually WORKS. Not only does it work but it allows you to put the seed of a soon to become amazing application. Given the fact that you can put your ng-app anywhere, you can say for instance – Hey, why don’t we start updating this app with the home screen. Then you get your back end guy to write the web services (yes I am a front end developer),  you start writing your tests with Karma Test Runner (thank you Voijta Jina) and in no time you suddenly have a Controller a View and Model for the home section of your app, which kicks in when a the given home route is reached. All of this controlled by AngularJS and living nicely encapsulated in its own little world. My friend you have just done a very very good deed.

2) Fast developer adoption, at just a click away

Technology changes so fast that keeping up to speed has become quite a hard task. You either have the right ways of learning or you suffer buying all kinds of O’reilly books and trying to figure out how this thing works.

One of the cool things that have popped not so recently into the scene are Javascript MVC frameworks. These came to be because the community realized how much Javascript was becoming hell to maintain and make sense out of. Javascript MVC frameworks are a good thing and need to be learned and applied when necessary, such as in our case of web applications.

With AngularJS if you know absolutely nothing about JavaScript MVC frameworks you can basically just hop into the AngularJS site, take the tutorial (which is quite cool by the way) and in 10 lessons or so (About 15-30 mins) you will know exactly how to start breaking out and building up an application using a Model a View and a Controller (MVC) and the best part, having all of it be testable.

This allows for large teams to go online at any point in time, take the tutorial and, because they are learning from the same source, they can ask and feed from each other at their own pace. This is very important specially if you have a team that is working remotely from each other.

3) Productivity and Scalability.

Having the ability to scaffold a project quickly with all the goodies that you need is key to getting started and producing efficiently. I’ve been in projects that take about 1 week just for everyone to jump on and install everything that is needed for the given project. This slows down productivity and it is a clear sign that something is still missing from the recipe.

In order to fix this we can use Yeoman. Yeoman is a workflow comprised of a collection of tools that allow you to quickly start, run and build a project.

Yeoman glues pretty well with AngularJS (makes sense since they are both part of the same family). Yeoman will allow you (via generators) to create an AngularJS repo that includes all the latest Twitter Bootstrap stuff, angular goodies, Karma Test Runner etc. And glue it all together just by initializing it under a directory with any name (preferably something related to your app). It will use that name to namespace the application and with that, it will create a sample view tied to a sample controller, tied to a sample test (thank you Brian Ford).

This structure not only allows you to quickly assemble something up, but it lays the roots for something way bigger to evolve. On top of that, once you are ready to deliver, you just run a grunt command and your files get compressed and combined (use ngmin) and put into a separate distribution folder. How sweet is that!

Aside from everything because you are building a single page application, everything should be RESTFUL which means that this app can and will interact with ANY back end code as long as it gives the front end the JSON it needs. You are decoupling your code and logic making it easier to scale and evolve.

4) Tests tests tests

Situation: There are thousands maybe hundreds of thousands of lines of code in a project. You are dropped smack in the middle of it. There is no documentation and there is a new feature that needs to get implemented ASAP. You start fiddling around with the code, next thing you know something else where breaks and you have no clue why… now you have to spend hours maybe days navigating through spaghetti code to see how your change broke something else.. bad, very very bad.

One of the most important things for maintaining a large code base throughout time is the usage of tests. By using Karma Test Runner given to you by the AngularJS generators in Yeoman, you can have your unit tests running all the time in the background, that way if you change anything and hit save, your tests will automatically re-run and you will know if you are breaking something, where you are breaking it, and if the tests are built correctly maybe even why you are breaking it.

This is super useful because normally this is how developers test insert a new piece of code. They add in 10-15 lines, they save then whoops, something breaks. Then they comment out 8 lines of code or so. Save, rerun still breaks? No? Ok so the error must be in these 2-5 lines.

Way way simpler to do this than to have to navigate through N files of hidden dependencies and figuring out what the previous developer was thinking when they were building this out.

5) Good community support

So many times you find yourself stuck with a piece of code and have absolutely no idea why it is not working. The community has never failed me so far when it comes to helping me out with a problem. I ask a question in Stackoverflow or a Google group and within a few hours or maybe even minutes, I get the answer I was needing, sometimes even from the core AngularJS team its self! This not only helps you out but by solving your issue, others might solve their issues as well. This speeds up the learning curves and the detection of any glitches that the tool might have. It basically feeds on its self and continues to evolve and grow.

Conclusion: The usage of a very opinionated Javascript MVC framework such as AngularJS is an excellent way to start cleaning up legacy code for it allows you to start in small pieces and bring sanity piece by piece. If your tech team is not on the bleeding edge they can take the AngularJS tutorial online at their own pace and learn how to use it. Once they are done and ready to produce they can incorporate Yeoman and kick start this upgrade within a few minutes, using AngularJS, Twitter Bootstrap, Karma Test runner and many other goodies that Yeoman scaffolds out. As the developer starts building they can use Test Driven Development to create unit tests and scenario tests for everything they build out in AngularJS. This will guarantee that in the future if anyone new jumps on the project and needs to make modifications, they will be able to do so more easily and with more awareness of what their lines of code are affecting.

AngularJS is not the final bullet proof solution, but it is helping pave the way for cooler things that are coming in newer versions of Javascript such as object.Observe, better controlled scopes etc. These will in theory (and I do believe so my self) bring order in a more natural way into all applications using Javascript.

18 thoughts on “5 reasons to use AngularJS in the corporate app world

  1. thanks for sharing the details of Yeoman and tests using MVC angular js Oscar, ll try out soon :)

  2. Good reasons.. !!! inspired me to try Angular tutorials.. really good ones !! I like fact that the different views actually load without the whole page and with the browser “go back” still useful as opposed to normal ajax stuff.. thats pretty cool..

    Is GitHub doing it the same way?

    Would like to see a fully functional web app that actually makes calls to the backend and saves data in DB and retrieves it back… that will be good tutorial for people like me I guess…

  3. I have a urgent question.
    Since Angularjs requires that all the scripts are loaded before bootstrapping the app. It is loading slow for me when I go live.
    Is there a way for Angularjs to be lazyload or somehow to reduce load time?

    Thanks

    1. There are two things you can do here. One is making sure everything is modified and concatenated. Make sure to look into ng-min. Using something like requireJS in combination with angular might give you what you want. That way you can asynchronously load js files or require modules. Check this out https://github.com/tnajdek/angular-requirejs-seed
      Ant this http://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js

      1. Hi Oscar,
        I am using Requirejs as well :D

        This is a demo app using FourSquare api, Leaflet api, Foundation, MooTools, jQuery and Angularjs. This is a test for applying to a job I’m doing.
        Basically just displaying trending places in a map.

        http://www.luiscarlosjayk.com/plataforma (still working on it)

        After first load, it is quite fast as a charm ;)
        There’s no server side so I couldn’t implement any longer cache.

      2. Haven’t done compression because I haven’t finished yet coding and they give me short time to accomplish.

        Any idea how to make it faster? (I’ve heard there are some hacks to implement lazy load on Controllers)

        I know in future releases Angularjs might have lazyload for controllers, which might help on this issue.

        Regards

      3. I just found this on github

        https://github.com/rmeschian/async-angularjs

        Haven’t used it but if it does what it says it does it should do the trick. There isn’t many options for increasing page load speed. I would do the following
        1. Make sure that its angulars fault. Run chrome dev tools if you haven’t yet and scan the network to see what is causing the lag. How many files do you have?
        2. Combining and compressing will minify the size of the files that are being sent over and the number of the files (Removing overhead in round trips and headers) This is typically always the way to go to increase speed.

  4. Good summary of the main points. My company started using Angular a few months ago for some “big” apps. We had moments of doubt where some of us may have been polishing up resumes, but once we all got on the Angular wavelength, things started to come together and the code in some of the refactored modules shrank by 30%.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s