Sagar Ganatra's Blog

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.

Today I was trying to understand the FlexBox layout introduced in CSS and was impressed with what a few CSS properties can do to help you solve layout issues. The standard itself has gone through some iterations, but I believe the current one is stabilised and is not likely change completely. Anyway, the layout proposed here helps you align the elements in the DOM tree horizontally and vertically. It also helps you reorder these elements.

I was having a conversation with my college friend about the enhancements in XHR2 and I was showing him how one can  upload a file to the server using plain Ajax . He asked me whether I can upload a large file to the server such as a video file. I tried doing that but was bumped when the server reported with 400 error telling me that the 'POST size has exceeded maximum limit'. This got me thinking whether I can upload chunks of a large file to the server. I referred to the FileSystem API and came across the slice method that allows you to get a fragment of a file.

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.