Sagar Ganatra's Blog

Sometime back I wrote a post on using Angular and Require to create a project template . The idea was to make the application more modular and broken down into multiple components that can be easily reused. I have made some more modifications to the template, especially the naming conventions used for files and minor changes to the structure of the project.

I've been working on an Angular project for good number months. There's a lot that I've learned and I've realized that the code I wrote could have been structured in a better way. I wanted to write this post sometime back, however I thought it would be better to create an application structure first and then post my learnings. I have posted all the code on github here -  https://github.com/sagar-ganatra/angular-require-template . The template is still a work in progress, however the basic structure of the template is in place.

I've been working on an Angular project for sometime now and I usually run across issues when building the application. In most of the example applications that I've seen, all application script files are loaded upfront i.e. all JavaScript files are loaded when the user accesses application. I get annoyed by this approach; why should all the components be loaded upfront when the probability of user accessing the entire application is very less. How does one architect a multi-page application using Angular? What would be the size of the application after minifying all the JavaScript files. Most importantly how does one load the components lazily. I've used RequireJS in my previous projects and it allows you to load components on demand; the idea is to load components based on the selected route. I've tried a similar approach with Angular using ' resolve ' property in the $routeProvider .

I have been working on an Angular application for sometime now and I have started to like this approach to client-side development. It's a different approach when compared to developing applications using Backbone and Require. I was looking at routing in Angular and came across the 'resolve' property which can be used to resolve services before instantiating the Controller and it's corresponding template i.e. the domain models that are required for the View components are resolved first.

In my last post, I mentioned about two way binding a.k.a MVVM in Backbone using Backbone.Stickit plugin . The Stickit plugin does provide awesome two way binding, but in addition it includes several features that are very much apt when modifying state of model or the view. I've been using these features in my project regularly.

I have been looking into various design patterns and trying to architect client side applications using it. More often than not the MVC pattern fits the requirement in most of the applications. However, I have found myself using MVVM (Model View - View Model) pattern along with MVC. I use MVVM pattern particularly when I have to maintain the state of the model on the client side. AngularJS provides great support by allowing you to extend the markup and tying the model right within the view (the markup). It also provides components that can be used to structure the application the MVC way and hence it's appropriately termed as MVW or MV* framework. However, I use BackboneJS in most of my applications and I have been able to maintain the state of the model using the Backbone.Stickit plugin.

I've been really busy these days writing client side MVC code. A few months back I explored using Require and Backbone to build the frontend MVC structure . Since then I've been working on improving the structure of my client side code. One approach that I've used is to decouple the components. When I say decouple, the components that I build should not directly alter or affect the behavior of some other component in the page. By decoupling the components, we can ensure that these set of components can be reused and tested in isolation.

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.

I like jQuery and I use it in all my projects. Lately I've been looking into Design Patterns and Backbone framework. Backbone has a dependency on Underscore and more often than not, people use Underscore as a client-side templating engine when using Backbone. I was looking at the Underscore documentation and came across a bunch of useful methods.

I've been looking into BackboneJS for quite sometime now and thought it would interesting to build an application using the MVC pattern. Although Backbone provides various components - Models, Collections, Routers and Views; it doesn't provide a framework that can help you to structure the application using these components. While working on this application, I realized that I can separate these components in such a way that they can be made reusable or rather loosely coupled by defining the components in separate files. However, there was an interesting problem that I came across where the Views had a dependency on the Collections to be loaded first and then render the template data. I had read a little about RequireJS that allowed modules to be loaded asynchronously and also in resolving dependency. Thought I would give it a try and see whether it addresses this problem.

After taking a break for a few days and then joining my new employer, I'm writing this long pending post on Routers in Backbone. A Router can be considered as a Controller in a MVC application. Controller in any MVC application defines how the incoming request should be handled. For example, a Servlet in a J2EE application accepts the request and looks into the configuration and delegates the request to one of the handlers.

I've been trying to build a CRUD application using Backbone.js and was able to retrieve a set of records into a collection using the fetch method . To perform other operations i.e. Create, Update and Delete I could always invoke Backbone.sync but I was exploring on the lines where this is performed implicitly. The fetch method sends an implicit GET request on url specified in the Collection, similarly I was looking for other methods that allow you to send POST, PUT and DELETE requests to the url. While I was building this application, I did come across a condition where Backbone was not sending a request. I was finally able to figure out as to why that happened and then it was a simple fix in my Backbone application as well as in the REST service.

From past few weeks, I've been learning Backbone.js in great detail and I think it's a great framework that helps you modularize your code easily. Last week I wrote about ' Model validation in constructor ' and then started to look at Collections in Backbone. The Model objects can be viewed as table rows and the Collection as a table. A Collection can declare the model property and indicate what kind of data it will hold. I was looking into ways in which a Collection can be populated by fetching the model data from the server. One way to do that is to ask the Model to fetch the data and then add the response to the Collection . The other way of doing this is to fetch the Collection data directly from the server i.e. instead of defining a Model you create a Collection by fetching the data from the server. Usually when you send a request to the server, the response data is essentially a collection of objects. In this case you really don't need a Model to be defined. ...

I've started to look at various Design Patterns in JavaScript and one of most popular Design Patterns in any language is the MVC Pattern. In JavaScript, there are various libraries out there which helps in modularizing the application. However, I've heard a lot about Backbone.js and I thought this would be the right time to give it a try. I've not learnt Backbone completely, but I've gained a good understanding of the Model part of the MVC in Backbone.

Last week I'd played around with couple of design patterns in JavaScript ( Constructor and Module pattern ). I really liked the Module pattern i.e. the approach taken in JavaScript to enable encapsulation of data in a Class (functions in JavaScript). I was building an application using these Design patterns but found that making Ajax request inside a function in a module was not the right approach. JavaScript would send a request and start executing the next statement. I wanted to use an approach that would push the data from the Model whenever there was some new data available. This lead me to try the 'Observer pattern' in JavaScript.

Couple of days back I wrote about the Constructor Pattern in JavaScript  wherein I explained how classes can be simulated using functions in JavaScript. Also, on how the prototype property can be used to extend another class. The other important element in any of the Object-Oriented programming language is the concept of encapsulation i.e. providing private members that can be accessed only by the members of the same class. I came across the Module Pattern today and found that it is quite easy to achieve encapsulation in JavaScript. Though the variables in JavaScript can't be declared as private or public, but closures can be used to emulate encapsulation.

Over the last few weeks I've been learning Object-Oriented concepts in JavaScript and have been building applications on top of it. I've an understanding of Object-Oriented concepts in many of the Server side programming languages and was trying to draw parallel lines with JavaScript. As it turns out, JavaScript is a class-less language but the concept of classes can be simulated using functions. In JavaScript, functions are not primitive types but are special kind of objects and hence you can set properties on them and can also invoke methods on them.

Yesterday I explored the MVVM design pattern in Kendo UI that allows the model data to be separated from the view. Also, whenever data in one of them changes it is reflected in the other. Today I was exploring various data bindings that can be used and one that caught my attention was the source binding. The source binding allows you to set the HTML content of the target element by rendering a Kendo template with a View-Model value. For example, say you have a combo box (select tag) and you want to populate it with data (option tags), then instead of writing several option tags you can define a template and provide source binding for the same. This will show a list of options from the ViewModel.

Kendo UI is completely new to me and I got introduced to it when Brandon Satrom left Microsoft and joined the Kendo UI team. I had interacted with him when I was working on jQuery ‘Pinify’ plugin . Kendo UI is a HTML5, jQuery based framework for building both web and mobile applications. It not only provides a set of UI widgets and other data visualization components but also a framework for data binding, animation and drag-and-drop. Whilst I was looking into the framework I stumbled upon the Mode-View ViewModel (MVVM) design pattern built into it.