The Google Developers Group’s organizers asked me to come and speak at their last meetup (22/5/13) about Yeoman and I was really happy about it, because after my last lecture about Angular, a lot of people asked me about the “auto refresh magic” I’ve done on every file save.
So I wanted to spread the word about Yeoman, Grunt and Bower because I think they are very important tools in every FED’s tool belt.
When you define the ‘views’ property, be aware that the ‘templateUrl’ / ‘template’ / ‘templateProvider’ properties will be ignored, so declare an abstract state with the “Layout” and define sub states with the template & controller injections.
Hi guys, last month I gave an introduction to Angular.js (in my native tongue – Hebrew), at the Google TLV Campus and it was a lot of fun.
This week I had the privilege of being on the Reversim Podcast – The biggest technology podcast in Israel (Respect!)
I’ve been listening to this podcast for several years now while driving to and from work and while running (when I wasn’t such a slob), and learned a lot of new concepts over the years and a lot of useful information that helped me to better understand the tech world around me.
It was very fun discussing it with Ran Tavory (which I’m a fan of) and hear his point of view on the same issues I’ve been trying to tackle for quite some time now. It turns out that I’m not alone in my point of view on the architecture mess called MVC.
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.
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.
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.
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 ZergOvermind.
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.
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.
I misunderstood it for saying:
Functions are taking a snapshot of the current state of the variables they can see up until that point in time, because the JS interpreter goes from top to bottom, meaning that the order of things matter.
I thought that:
The state that was before the function was defined is what it will remember, like it stores a copy of all the values of the variables assigned before it.
And when the example’s inner function was defined, the state of x was “1″.
But I was wrong:
Actually, The inner function, gets a reference to the variable binding object, which is part of the scope chain, an that object holds references to the local and other visible variables of that inner function. Meaning that if variables continue to change on the outer function invocation instance, sure enough the same inner function and its references will reflect it.
So the point of time of the function invocation matters, not only the definition. (a point to remember!)