Angular.js Large Scale Architecture and StarCraft

While preparing for a recent lecture I gave about angular.js I thought about how to deliver the point on angular’s architecture for large scale application.
So I came up with a metaphor that I feel make sense, (hint: StarCraft related) so I thought I’d share it today and see what you guys/girls think of it.

null

MV(whatever)

Ever since I learned about MVC few years ago I’ve been feeling that something is missing. MVC was meant to model how human think and apply it to software design.

So the concept of breaking your app into well defined pieces is absolutely wonderful, but I always felt that Models, Views & Controllers aren’t enough when you’re dealing with orchestration, coordination and maintenance of large scale applications.

With all of the multiple variations of client side architecture patterns (MVC, MVP, MVVM, MVA, etc…) and their Javascript frameworks implementations, I was left with more questions than answers. It seems that every framework suggest something slightly different and confusing.

For example – the location of business logic, sometimes it’s in the controllers, other times in the models, and where do I put the remote services or proxies under?
Some frameworks use a view model, others only a controllers. Some frameworks call it a model, others call it entity.

You get the point – it’s confusing, but instead of solving the issue, we just name it MV* (star) and move on with our lives, dazed and confused.

MV*


There was a point when I considered DCI as a good replacement for the MVC pattern, but haven’t got around to actually test this theory in the field. Luckily, I wasn’t have to, because after moving between different MVC frameworks (JMVC, Ember), I finally got to code with Angular.js and everything finally fell into place.

Angular – Service Oriented Architecture (SOA)

I know being called a MVC framework is the fashionable thing these days, but Angular.js isn’t really MVC.
Its controllers are actually presentation models, its views are plain templates and it’s models… well.. there aren’t any, they are just plain old objects and arrays.

Angular also introduce a few cross cutting concepts like Services, Directives and Filters, that you won’t find on any other framework (as part of the core). And that’s where I think angular is actually far ahead in terms of large scale application design.

Large Scale Architecture – The StarCraft Way

If MVC is modeling the human brain, Angular.js is more like modeling the Zerg Overmind.

Angular.js Architecture - Shairez

You have the services layer, which is like a giant application brain that handles all of the state coordination, data persistence and the business logic, which is like the Zerg Overmind, it knows everything and can answer anything.
(just thought about the idea that Zerg Overmind === Google … hmm… )

The angular “controllers” are like mini brains, less capable, and responsible of view specific tasks, just like the Zerglings’ brain who knows just how to Kill Humans or Protoss, and occasionally hit a brick wall or something.

Templates and directives are like sensors and speech, which are responsible for displaying or “speaking” data to the user, and to take in outside information (like user events or data) and pass it to the controller.

When you want to extend your application cross cutting capabilities, you add a service, a filter or a directive. And when you want to add another screen or page specific view, you can add a template/controller pair.

Just like when you want a strategic action (like upgrading your units’ armor) you call the Overmind (its structures) to do that, but when you want tactic actions (like killing a Protoss) you send a Zerg unit with its mini brain and sensors to get the job done.

Conclusion

This is how I like to look at the different angular architecture parts, but that’s just me, I’d love to hear what you think.

9 comments

  1. Brilliant post! I’m exploring different JavaScript plugins/libraries and using StarCraft as a parallel to Angular is a great help… well for me anyways.

  2. hi!

    I’m a beginner programmer of angular, this is the best article about angular that I have ever read!

    congratulations

    • Thanks Man!
      You’d might want to read yearofmoo.com’s articles about Angular too, they did a great job explaining several parts in long and deep posts.

  3. Hi Shai I have 2 questions:
    1. How do you compere Angular VS Dojo.
    2.What are the best solution for Angular missing UI widgets?
    I thought about Wijmo.
    Eldad sela

    • Hi Eldad,
      1. Don’t have experience with Dojo… so can’t really compare, but as I understand, Dojo is imperative, meaning you don’t have the notion of directives and you write every dom manipulation yourself, and you as far as I know, no framework have the dependency injection capabilities that Angular have.

      2. You have several, but checkout Angular UI

      Wijmo looks professional, but I don’t know how they integrate with Angular, think you might have to wrap them with directives…

      Good Luck!

  4. I like the point of view. I too have always felt something was missing, and it’s getting even worse now with the rise of client side stuff…

    When client side wasn’t as far as it is today, a good old server side html generator was more than enough. So in terms of architecture, we’ve had time to imagine all sorts of things to make our lives easier, however, with the importance of responsive user interfaces rising, the poor and immature approaches often led to chaos…

    Even today, I work for companies whose applications contain logic in every different parts, even when it’s well structured (e.g. German ones :P )

    I’ve only just started using angular and I feel I’m already quite late, so I was browsing for examples of how to structure my project well for scalability.
    Found an interesting example here :
    - first http://www.johnpapa.net/angular-growth-structure/

    which led to the 2 following articles :
    - http://www.johnpapa.net/structuring-an-angular-project/
    - http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript (my favourite)

    and eventually this question before getting here:
    - http://forums.asp.net/p/1878319/5283729.aspx?Repository+pattern+with+JavaScript

    Which got me thinking, it is indeed very possible to set up all your repositories on the client side, with Breeze for example, you could even do cool stuff, but then, with all those possible places made available to put code in, I know people will just put it wherever their current mood tells them to…

    Finally I got here, thank god, and I finally see the light. The StarCraft way is just the way I’ve always imagined good scalable software architecture, without being able to compare it or find a good metaphor…

    I’d be interested to see what you work with on the backend and how you architecture it :) but now, I am going to go organise all my zerglings and format them to receive specific orders keeping in mind the real brain is still my Overmind.

    Happy coding! :)

    Seb

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

HTML tags and attributes are not allowed.