Sagar Ganatra's Blog

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.

Another big announcement today. I've joined Myntra.com which is India's largest online fashion store. I've ordered stuff from Myntra a few times in the past and it has always been a great experience buying from them. Now that I'm working with them, I'll buy more :) More importantly it's a new day and beginning of a new journey. I'm all excited about my new job and I hope to learn a lot in coming days. Wish me luck!!

The title says it all. Today was my last working day at Adobe and I've decided to pursue my career elsewhere. I've spent more than three and half years at Adobe, working as a part of the ColdFusion Engineering team. Over the last few years I've learnt a lot from the team, from the ColdFusion community and from many others at Adobe. I've developed interests in HTML5, JavaScript and other related technologies and frameworks and I've decided to pursue my interests.

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.

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.

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.

I finally completed reading ‘Steve Jobs Way’ by Jay Elliot. I wanted to know how Apple became so innovative and so successful and I knew that Steve did an awesome job to bring this company to a state which is very well known today. Before I started reading this book I had a notion that this book would focus on how hard work or dedication would pay off and all that stuff that one would generally see in any book. This book was different. Different in a way that it taught me the qualities a leader in any industry should have.

My Adobe Developer Connect article on 'Getting Started with RESTful Web Services in ColdFusion 10' is now live. Learn how you can get started with creating, publishing and consuming RESTful Web Services in ColdFusion. -  http://www.adobe.com/devnet/coldfusion/articles/restful-web-services.html

I like the media queries feature added to CSS 3, that allows web application developers or designers to define styling sheets for a range of output devices. A media query consists of a media type and one or more expressions that limits the style sheet scope. I was wondering if JavaScript can be used to update the elements in page, say changing the source attribute of an image based on the device width. Turns out there is a function matchMedia which accepts a media query string as input and returns the result.

I've been looking into ways in which a web application can be made more user friendly and HTML5 does include some powerful features such as PageVisibility, Navigation Timing, etc,. that can be used to provide good user experience. Today I was looking into FullScreen API that allows you show any of the elements in the DOM in Full-Screen mode. Suppose you have a HTML5 video embedded in a page and would like to play that video in full-screen mode then it is now possible with the FullScreen API. Similarly say if you have an image element, it can also be shown in full screen mode.

I’ve always liked the Virtual File System (VFS) implementation in ColdFusion, but I always griped about one thing. The files written to the VFS are available at the Server level and are not specific to an application. However, ColdFusion 10 now includes support for Application specific in-memory file system. This means that, if you write a file to the virtual file system, only those files in the same application can access it. If an attempt is made by another application to access this file, the server would happily throw an error.

I’ve been playing with the WebSocket feature introduced in ColdFusion 10 for some time now. I was trying out pushing images over a ColdFusion WebSocket channel and it worked just fine. But this time I wanted to put WebSockets to test and wanted to push large data at regular intervals. I thought maybe I can push video data over WebSockets and it turned out that there is no direct way to stream video data to many clients. I came across the function - drawImage that can be used to draw an Image or Video on a HTML5 Canvas. Once an image is drawn on the Canvas, it’s base64 encoded data can be obtained by calling the toDataURL function on the Canvas object.  This data can then be transferred over a ColdFusion WebSocket to all subscribers who can then use this  data to draw the image(video frame) on a Canvas.

This week I started to learn jQueryMobile and was going through the online documentation that explained the basics. While I was trying out the sample examples, I came across an issue that I thought I’ll share with you. I had posted this on the jQueryMobile forum but I didn’t receive any solution to this. The issue here is when you have two anchor elements with its ‘href’ attribute pointing to the same div (#child data-role=”page”) with one marked as a button and the other marked as a popup dialog, then which ever button you choose first its action will be applied to the other button as well. Say if you click the second button that shows the dialog box containing the page it works fine, but now when you click the first button it shows the dialog box instead of showing it as a page. This is how it works the other way too i.e. if you click the first button the page is shown (as expected), but on clicking the second button it shows the page instead of displaying it as a dialog box.

Today I was reading about CSS3 and I stumbled upon CSS3 regions . I was completely flabbergasted with what I saw and learnt today. Imagine that you’re trying to build a website for a magazine containing multiple columns (say 3). It would be arduous to fix the textual content on a particular column and then move the rest of the text to other columns. Now with Content Flow mechanism, the extra content can be moved to other columns in the layout with ease. There are just a couple of properties that you need to define in the styling sheet and you’re done. But this is not it. When you resize the browser window, the content automatically flows to other regions depending on the browser size.

The for-in loop construct in ColdFusion is generally used to loop over a structure variable. In ColdFusion 10, one can use the same for-in construct to loop over Query and List variables. Here is an example in which the for-in construct is used to loop over Query and List variables.

Yesterday Ben Nadel asked me a question on Twitter, on using filterCriteria when publishing a message on a web socket channel from server side. The method ‘wspublish’ allows you to perform a server side push to a client who has subscribed to a channel. It takes three parameters – channelName, message and filterCriteria. I always assumed that the values present in subscriberInfo and publisherInfo can be compared in Channel Listener functions (canSendMessage, beforePublish etc) before the message can be received by the client. Although this technique is available, what I found after having a discussion with a fellow developer ( Awdhesh ), is that I can specify simple conditions when subscribing or publishing.

In REST everything is treated as a resource and each resource is associated with a URI from which it can be accessed. As mentioned in my series of posts on REST ; in ColdFusion methods defined in a CFC are made RESTful by adding the attributes httpmethod and restpath. The restpath value specified in the method can then be used to access the resource. Although this would serve the given purpose, it would be a good idea to have a root resource resolve a generic URL and then have different methods that resolve other path of the URL.

I was looking into ways in which users can be authenticated before they start to receive or send messages over a WebSocket channel in ColdFusion. I found that there are two ways in which this can be done. The first approach is to call the ' authenticate'  method on the socket object. The other way is to use cflogin to authenticate the user. The authentication level can be taken a step further in various channel listener functions. By implementing these listener functions, some sort business logic can be devised wherein the logged in user with certain credentials can be allowed to subscribe or publish to a channel.

The HTML5 Web Sockets represent the next evolution of web communications. A WebSocket is a full duplex, bidirectional communication channel that operates over a single TCP socket. It has become a standard for building real time web applications. In ColdFusion 10, a messaging layer has been provided that implements the Web Socket protocol. It enables you to build applications that are based on publisher/subscriber model and applications that are based on subscriber model wherein a push from a server is possible.

A very quick post on disabling timeout for the requests. You can now set the requesttimeout to zero in cfsetting tag i.e. <cfsetting requesttimeout=0>

I was working on creating a CRUD application with REST and wanted to retrieve records with a GET request. The GET request would contain the ARTID for which the record has to be retrieved in the URL itself. To do this I had added an argument to the method implementing the GET request with ‘restargsource’ attribute set to path. The URL would be of the form: http://localhost:8500/rest/restapp/artService/getart/1 However, in another scenario I wanted to retrieve all the records from the ART table when there is no ARTID specified in the URI i.e. with the URL: http://localhost:8500/rest/restapp/artService/getart/ PathParams are always required and if they’re not specified then a ‘404 Not found’ error would be thrown. I thought of adding another method to handle this GET request with no PathParams. But, it would have made my code look clumsy and semantically not correct. However, I was able resolve this by providing a regular expression for the PathParam argument.

A quick post on the new function arraySlice added to the list of functions in ColdFusion 10. The arraySlice function is used to  select a part of the array. It takes three arguments – array, offset and length.

In ColdFusion 10, one can restrict the type of file being uploaded to the server when using CFFILE to upload the files. The new attribute accept allows the user to specify various MIME types or extensions of the file that can be accepted by the server. If the user tries to upload a file with a .txt extension but it contains xml data (application/xml MIME type) then the server would accept or throw an exception based on the value specified for the strict attribute. 'strict' is a boolean attribute added to the CFFILE tag. By default it is true and therefore wouldn't allow the user to upload a file whose contents are of different MIME type. When the strict attribute is set to false it would allow the user to upload a file irrespective of its content. However, an error would be thrown if the extension of the file doesn't match the ones specified in the accept attribute.