UI Tips
By Andrew Flick and Anthony Lombardo
With everyone talking about the Web 2.0, client-centric applications are becoming very desirable. A client-centric app performs the majority of its processing directly on the client-side, without requiring a postback to the server. This model provides a rich experience for the end user, but has the potential to make the application developer s life a little more difficult. The good news is that by following a few guidelines, you can save yourself from hours of torturous debugging and agonizing performance analysis.
Prototype vs. Closure
When using JavaScript to emulate OO concepts, there are generally two main paths. You can build an object using either the closure model or the prototype model. The closure model is easier to use, but the prototype model offers better performance. Let s look at the following example:
//This is an example of using the closure model function car() { var _make=""; this.get_make= function() { return _make; } this.set_make= function(make) { _make=make; } }
In the example above, notice that the properties and methods of the car object are all created when the new car object is created. The closure model used here will create a copy of these functions on each object of type car that is created. This means that if you create new to up 50 cars, each will have memory reserved for the member variable and two member functions. Now let s take a look at how we can create the same object using the prototype model:
//This is an example of using the prototype model function car(){} car.prototype= { get_make:function() { return this._make; }, set_make:function(make) { this._make=make; } };
In the prototype example above, notice that the constructor is an empty shell. The member variables and functions are all being defined off the prototype, instead. This allows each instance of the car object to share a single definition of the member functions. When each new car is created, it will be pointed to the single method instance created in the prototype, instead of receiving its own copy. This not only improves initialization time, but it also reduces memory that will keep your pages running faster.
Memory Leaks
C++ isn t the only language with memory leaks, you can accomplish the same in JavaScript. With varying degree in each browser, memory leaks are a real problem and can quickly degrade the performance of your Web apps. The most important advice we can give you is to read through and understand these patterns. Once you understand the code patterns that cause a leak, you can practice defensive coding and avoid memory leaks altogether. This is much easier than trying to track down a leak. If you are already in a situation where the leak exists, there s a tool out there that can help. Drip is available on SourceForge and can be downloaded from http://sourceforge.net/projects/ieleak/ .
Coding Standards
One final word of advice: Follow a good coding standard when authoring your JavaScript library. Many would argue that comments and spaces bloat the size of the file, as do long descriptive variable names. However, there are tools available that can compress the files for you. There s no reason to sacrifice readability if tools exist that can take your developer-friendly code and turn it into a bandwidth-friendly file.
Andrew Flick is Product Manager - NetAdvantage Windows Forms Technologies & TestAdvantage for Infragistics, Inc. Prior to joining Infragistics, Andrew played an avid role in presenting on emerging .NET technologies throughout the Midwest to a variety of User Groups as well as numerous Student Groups. As an active member of the INETA Academic Committee, Andrew has authored content on building successful User Groups, as well as numerous white papers on building an effective community. A Microsoft MVP, Andrew joined Infragistics in July of 2004 as a Technology Evangelist, where he was responsible for the creation of reference applications and authoring .NET technology articles for industry leading publications, as well as the world wide delivery of Infragistics Technology demonstrations. Andrew currently serves as Infragistics Product Manager for NetAdvantage Windows Forms Technologies & TestAdvantage. As product manager, he spearheads the product management and strategies of Infragistics Windows Forms Product Lines from establishing the direction through delivery. Working directly with the Director of Development, he sets the direction, plans, and manages product development. Contact Andrew at mailto:[email protected].
Anthony Lombardo is Product Manager of NetAdvantage - ASP.NET Technologies for Infragistics, Inc., and is responsible for spearheading product management and strategies for Infragistics ASP.NET product line, working directly with the Director of Engineering to set the direction, plan, and manage product development. Prior to joining Infragistics, Anthony served as a Network Administrator for North Brunswick Board of Education and worked for Rutgers University in their technical support division. Since beginning his career with Infragistics in 2000, Anthony has been involved with every aspect of the development cycle, including playing a key role in the creation of the Presentation Layer Framework for ASP.NET, assisting in the creation and implementation of Infragistics Visual Studio 2005 project plan, and determining the product feature set for NetAdvantage 2005 for Visual Studio 2005. Contact Anthony at mailto:[email protected].
