To begin with, lets talk about two of the most important things are that come to mind when we talk about performance testing.

The Metrics to Measure

First lets consider the metrics to measure. Few important metrics that should always be considered are:

  1. Response time which could include Javascript file load time, Image load time, CSS file load time, Content Download time etc.

  2. Number of HTTP Request and HTTP Response status.


Coming to second part i.e. Dependencies. Now this could be broadly classified by 2 groups:

  1. Client-side testing
  2. Server-side (API level) testing

Most of the people focus on testing their servers and APIs. But server-side testing is not enough these days, as its hard to find applications which do not use Javascript/Ajax today.

In single-page apps, the performance equally depends on both the client-side and the server-side.

Since single-page apps are Javascript/Ajax enabled, measuring performance from server/API level is not enough. Even poorly written javascript code can majorly affect the performance of the app.

Client-side performance testing can also be done using popular tools like Google Page Speed or But they cannot test different modules of the application separately. They’d just test the URLs you enter. To test different sections of your application, we can follow a different approach.

In this blog post, I’m going to show you how to use the most popular open-source tool (JMeter)[] to performance test AJAX-enabled websites.


A well-known limitation of JMeter is that it isn’t a browser i.e its inability to execute Javascript. This and that when JMeter makes a request to a page, AJAX calls are not automatically executed. JMeter does store Javascript requests when recorded but this is done as individual sampler.

Now to overcome this challenge we have a few options we can work on:

  1. Use WebDriver Sampler to measure the response time in a real time browser. Combining this with JMeter load test, we can measure the real time user experience when we apply severe load.

  2. Use JUnit Sampler to create selenium scripts using tools like Eclipse. Using this approach one can export JAR fie to JMeter and run the test in browser.

  3. Simulate an Ajax request using JSR223 sampler.

Lets talk in further detail about these methods to performance test.

Using JMeter WebDriver Sampler with Selenium

Web Driver Sampler automates the execution and collection of Performance metrics on the Browser (client-side). You can download this plugin from the link shared below.

A large part of performance testing, up to this point, has been on the server side of things. However, with the advancement of technology, HTML5, JS and CSS improvements, more and more logic and behaviour have been pushed down to the client. This adds to the overall perceived performance of website/webapp, but this metric is not available in JMeter.

Simply add the following to your test plan:

  1. Firefox Driver Config
  2. Web Driver Sampler
  3. View Results Table

Now add the following JavaScript code in WebDriver Sampler


The only problem with approach is that the automation capability is limited. But again that depends on the application.

For more info, visit

Using JUnit Sampler

Using this method all we need to do is create a JAR file using Eclipse and export it to JMeter.

Creating JAR using Eclipse

  1. Create a JUnit Test case in your project.

  2. Write the following selenium code to open your homepage.

package wing;

import static org.junit.Assert.*;


import org.junit.Test;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;

public class home {

	public void test() throws MalformedURLException {
		WebDriver driver2 = new RemoteWebDriver(new URL(""),DesiredCapabilities.firefox());


Note: In the above code we are using RemoteWebDriver to open the browser on a different machine since we will integrate our test with jenkins.

Once this is done you just need to export the JUnit test case to JMeter. Just copy the JAR file into JMeter/extras/JUnit folder and restart JMeter.

After this just click on “Search for JUnit 4 annotations” in case you created a JUnit 4 test case and you ll find the JAR file with class name in drop down.

Simulate an Ajax request using JSR223 sampler

Normally this method is not recommended. But if above solutions don’t work well with your system you can go for Beanshell and use any scripting language like groovy to create Ajax request.


Below are some points to keep in mind while creating performance test plan:

  1. Create custom scripts for different use cases and create a threshold for various metrics.
  2. You can also use headless browser testing using HtmlUnitDriver or Xvfb depending on your system. This approach would work well if you need to combine these with your load test.
  3. You can integrate your tests with Jenkins using the performance plugin. It really helps with reporting and you can simply run it with each new build. In fact, that is also how we do it here at Wingify.
  4. Client-Side performance testing is always done using 1 or 2 threads. But if you need to use it with your load test then you can simulate as many threads as you wish to.

There’s a lot more exciting stuff you can do to handle Javascript/Ajax enabled applications. This is just a brief summary of the work we do here at Wingify. Hope this helps you get started. There can be many ways you can achieve amazing results. If you have any questions/comments, or create something awesome, we will be more than happy to hear from you.

Back in November, I, along with some colleagues from Wingify went to Singapore to attend CSSConf and JSConf Asia. A part of DevFest Asia, it is the best way to meet and connect with front-end designers and developers in South East Asia. It was the first time CSSConf was happening in Asia, and our own Kushagra Gour had the opportunity to speak at it. He talked about 10 Commandments for efficient CSS architecture. The conference venue was Hotel Amara Sanctuary, on the island of Sentosa, Singapore.


The day began with boarding the MRT and the Sentosa Express to get to the venue, and meanwhile being mesmerized by the marvelous Singaporean skyscrapers. A sip of coffee at the Jimmy Monkey Cafe made our eyes open wide, and began Thomas’ introduction to Asia’s first CSSConf. It is commendable for a small bunch of people to organize conferences for the community at such large scale, working part time.

The quality of the talks at the conference was way above our expectations for a first-time event. The speakers and the topics they spoke about were pretty interesting. Below are the talks that I found really intriguing, and I recommend everyone to go through the videos and slides for them:

No More Tools by Karolina Szczur

Her talk made an interesting point: with all the rapid development happening in the front-end realm, we’re making use of tools more than ever, which when mixed with biases and preferences, do more harm than good. She explained what puts apart good tools from the bad ones, and the telltale signs of a tool doing more harm than good.

Build Scalable, Automated CSS Both You and Your ’Back-End’ Coders Can Love by Christian Lilley

As front-end developers, we have been conditioned to live and breathe CSS, both good and bad parts, beckoning a love-hate relationship with it. But it is rather cumbersome for someone new coming in ease into the concept of cascading style sheets, and that coupled with misused practices makes people think of CSS as some sort of dark magic. Christian’s talk separates the good parts from the bad ones, and points the listeners into a direction everyone can take to make CSS a language everyone can love.

Inside the AirBnB brand evolution by Fiona Tey

AirBnB’s product is so simple, yet efficient to use, especially their mobile app that it makes you feel a sense of satisfaction competing products or even luxurious hotels couldn’t match. Booking for a stay with the locals via AirBnB has always been exciting inspiring for me. And today it was a fortunate time to see the face behind such great product design.

What are we doing, anyway? by Ben Schwartz

If you’re like me, perhaps you ask yourself this question as the sun rises each morning. Recall a time when that wasn’t really the question? Ben’s talk took the listeners on a nostalgic ride to the years of hacking around and creating things from the past. Recall spending nights working on creating things as the first ray of sun hits the window, the pride of showing around your project in your peer group, hours upon hours of creative brainstorming to build something exciting? Ben extracts out the secret sauce for that feeling of happiness that stems from creating something and how to hold on to it to keep treading that road.

Words of Wisdom


JSConf had multitude of interesting talks. Below are the ones I found rather inspiring to attend:

Bad Form by Chris Lienert

“Your password must contain an uppercase and a lowercase letter, a number, a dinosaur’s name and your grandmother’s maiden name”: do sights of such messages make you cringe? Or perhaps you recall the frustration of filling out a large form and you missed out checking those terms and conditions and the page complains by asking you to fill everything over again? If you do, this talk will let you share your frustrations and learn about what you as a developer can do to create better forms for a better web.

Fun with JavaScript and Sensors by Jan Jongboom

In terms of what JavaScript can do on the browser and on mobile devices, Firefox OS is the best example of openness and accessibility to the lower language features. Jan, in his talk introduces several sensor APIs, primarily for Firefox OS that you could make use of to create your next big innovative app or game. Perhaps you could even mix and match the data from various sensors, or perhaps from a set of devices put together to create something awesome!

Translation Workflow and Formatting Complex Translations by Tingan Ho

Tingan goes about solving the problem of i18n and l10n by introducing concepts like CLDR, pluralization, and ICU’s message formats. He also publishes his localization module l10ns at the end of his talk. If you’re planning to translate your app into multiple languages, especially east-Asian ones, this is a must see talk.

WebTorrent by Feross Aboukhadijeh

BitTorrent is a great protocol to share data between users across the world. Feross introduces the underlying functionality of BitTorrent and the advantages of a distributed network when compared to a centralized one. He also highlights certain shortcomings of the protocol that are centralized, like torrent files and tracker servers, and how we could solve these problems. Finally he describes WebTorrent, a project that makes use of WebRTC and special “hybrid clients” to connect to the BitTorrent network.

Gibbering at Algoraves - JS in Live Audiovisual Performances by Charlie Roberts

Possess certain skills like the ability to play music and you have the chance to perform it live in front of an audience. But writing code, especially JavaScript isn’t that way. That’s what we thought before this talk. Charlie introduces Gibber, a creative coding environment that lets you create music and visuals on the fly. Be ready for a trippy ride of a JavaScript live coding performance towards the end of the talk!

It might seem like I’ve described every talk at both the events, but the truth is that the quality of the talks was so impressive that it is hard to not praise the speakers for the efforts they have put in to prepare a stellar presentation. Looking forward to the next installment of DevFest Asia in 2015!

Last week, we announced that Wingify would be sponsoring the JSFoo 2014 conference in Bangalore. We have always been looking out for opportunities to give back to the community, and what could have been better than hosting a run-up event for JSFoo in Delhi. We got in touch with HasGeek and expressed interest in hosting the Delhi run-up event. They were more than happy to let us do so.

Since it was the first time we hosted such a big event, we were both excited and nervous. We had started preparing for the event about a month in advance. To market the event, we spread out information about the event on meetup groups we were connected with, and also created a Facebook event for it. In total, we received about 100-120 signups for the event. Of all the signups, we expected about one-third of them to actually turn up for the event, for whom we started to arrange for food and logistics.

What’s exciting is that more than 50 external guests from 30 different companies and colleges showed up. We were really humbled with such great turnout and would like to thank each one of you who joined us for the event.

The event started on time (10:30am) with Suchit Puri taking the stage. He welcomed us to the event and introduced the first speaker Rudi M.K., who was about to speak on “A new approach to scientific computing using JavaScript“. He talked about the possibilities of using JavaScript for mathematical and scientific computing. He had a few examples of using JavaScript on the server side for complex mathematical computation. It was really enlightening to see so many libraries coming up in support of scientific computing in the JavaScript ecosystem.

Rudi speaking on “A new approach to scientific computing using JavaScript”

Next was the workshop on “Learning JS concepts/techniques by implementing jQuery” from our very own Kushagra Gour . He had created a very interesting web based system specially for this workshop which he called “Prayas”. It allows the organizer to set JavaScript test cases and the participants to enter the JavaScript code which is evaluated against these test cases. It also has a very good UI which updates in real time giving you a good idea of how many of the participants have submitted in the code correctly.This made the workshop really interactive wherein the participants implemented some basic jquery methods in javascript.

Kushagra Gour taking workshop on “Learning JS concepts/techniques by implementing jQuery” with his awesome "Prayas" system on screen

The workshop was followed by lunch after which we had Shwetank Dixit talking on “Understanding WebRTC: A Whirlwind Tour”. Shwetank introduced WebRTC and then went in-depth on the topic, explaining how the technology works and how are different network related problems addressed. He also showed some really cool WebRTC demos. was one of them. We hope that attendees would have gone back and tried WebRTC.

Shwetank giving demo of WebRTC

Next was our very own Himanshu Kapoor talking on “Managing API Resources and Their Relationships on the Front-end“. This was indeed a very interesting talk wherein Himanshu talked about how we handle RESTFul resources on the front-end. The talk was primarily about our learnings of maintaining API resources and their relationships with using our internal project called ResourceManager for AngularJS (soon to be open sourced).

The last talk of the day was presented by Ankit Rastogi on “Ten Useful JavaScript Tips & Best Practices”. It was a very interesting interactive presentation on JavaScript optimizations tips and tricks. The presentation had a lot of questions which asked the audience to find whats wrong with the code, this made everyone really interested in the presentation. Everyone was really amazed by how implementing very simple things you can get many folds of processing/speed improvement in your code.

The day ended on a high note with everyone really appreciating the speakers and the organizers for all the hard work everyone put in. There were a lot of discussion after the event on organizing more such events for different communities in Delhi NCR region. Wingify as a company believes in engaging and giving back to the community and we would be more than happy to host more such events in future. If you feel that there is any technology related community which needs a place to host the event, please write to us at [email protected].

Presentation slides from the event:

  1. A new approach to scientific computing using JavaScript - Rudi M. K.

  2. Learning JS concepts/techniques by implementing jQuery - Kushagra Gour

  3. Managing API Resources and Their Relationships on the Front-end - Himanshu Kapoor

  4. Ten Useful JavaScript Tips & Best Practices - Ankit Rastogi

  5. Understanding WebRTC: A Whirlwind Tour - Shwetank Dixit

Wingify Engineering on Twitter

Also, we are happy to announce that Wingify’s engineering team is now on Twitter! Follow us on @wingify_engg to get updates on awesome things being cooked here.

The front-end has become the heart of today’s web application development, and JavaScript drives a core part of it. New technologies, libraries, frameworks and the likes come up each day, and the existing ones continue to grow and evolve as time goes by. There is so much to learn, and so many learnings of your own to share, that community involvement becomes indispensable.

Our single-page application, VWO, is powered by a nifty combination of web technologies on the front-end, ranging from Grunt to AngularJS. The development process of the new version of the application was very rapid and full of challenges. We had dabbled into the previously unexplored territory of single-page application development at such a large scale, and having pulled it off in a relatively short span of time has been quite a feat.

Sponsoring JSFoo

For the very reason of community involvement being indispensable for better development, we are sponsoring JSFoo 2014 in Bangalore this year. Our engineers will be present at the conference. Should you be interested in our work, and would like to know more about what we do, want to work with us, or just want to say Hi!, drop by our booth (B1), or catch any of our team members at the event.

JSFoo Run-up Event (Delhi)

We’re also hosting a run-up event at our office in Pitampura, Delhi on 6th September 2014. There will be talks and a workshop too.

Join us at the run-up event. RSVP here.

As a part of the run-up event, we’re organising an online JavaScript competition.

Online JavaScript Competition - Visualize

The premise of this competition is simple - to use JavaScript and HTML5 canvas to create something visually appealing. The theme of the competition is Squares. You are free to create anything with JavaScript, canvas and squares.

If visualizations, particle effects, fractals, interactivity, JavaScript and canvas are some of the words that excite you, this is the competition for you. Below are some examples of JS creativity:

Below are some valid sample entries:

Making Submissions

Submissions for the competition need to be done as a deck on CSSDeck. Read here to know about submitting on CSSDeck. Optionally, you can also submit your entry via another code submission site like Codepen, or by uploading it on your server. Once you are ready with your submission, please tweet it using the following template:

I submitted an entry for Wingify-JSFoo online competition: <CSSDeck link here> @wingify @jsfooindia #wingifyjsfoocompo #js

Let the submissions begin!


  1. The deadline for the competition is 20th September 2014, 23:59 IST.
  2. Your entry should use Javascript, HTML5 Canvas and Squares to create something visually appealing.
  3. CoffeeScript is allowed.
  4. Judgement will primarily be based on visual appeal. Secondary parameters include code quality and smoothness.
  5. Multiple entries by a single participant are allowed.
  6. Bonus points for using vanilla JS.
  7. The results will be announced after 20th September 2014 here on the blog as well as on our twitter account: @wingify.
  8. You must be living in India to be eligible for this competition.

If you have any questions or suggestions, comment on this post or send us an email.


The best two entries in the competition will be rewarded with prizes. There are three consolation prizes as well.

Winner Prize

Runner-up Prize

Consolation Prizes

  • Software licenses of Sublime Text or JetBrains WebStorm.

Wingify @ JSFoo

Our engineers will be present at the conference. If you are interested in our work, want to know more about what we are doing, want to work with us (we’re hiring), get some cool goodies or just want to say Hi!, please visit our booth (B1) or catch any of our team members. We’d love to talk to you!

We look forward to meeting in Delhi for the run-up event and in Bangalore for the conference!

Edit - 23rd September 2014

Results for our JS competition are out!

You will be contacted individually for further process. Congratulations!

DOM Comparator is a JavaScript library that analyzes and compares two HTML strings, and returns back a diff object. It returns an output which is an array of operation objects.

DOM Comparator on Github

Here’s a simple example:

var stringA = '<ul><li class="active">list item 1</li><li>list item 2</li></ul>';
var stringB = '<ul><li>list item 1</li><li>list item 2</li></ul>';

// Compare the two strings
var result = VWO.DOMComparator.create({
    stringA: stringA,
    stringB: stringB

// Expect an array of VWO.Operation objects to be returned,
// the first one of which looks like below:
    name: 'removeAttr',
    selectorPath: 'UL:first-child > LI:first-child',
    content: {
        class: 'active'


The Campaign Builder is one of the core components of our A/B testing software VWO. It allows you to make changes to any website on the fly. Assuming the target website has a small snippet of VWO Smart Code (Javascript) inserted, the changes made by the user are applied when the A/B test is run. These changes are little snippets of jQuery operations that are applied on the client-end.

One of the major problems faced when applying such changes that they did not regard for dynamic content that might have been rendered by the client’s website’s backend. Let us consider a simple example:

Imagine somebody wanting to run an A/B test on all the product pages of an eCommerce website. He wants to modify the “Buy Now” button on all such pages and make it appear bigger and bolder, so that it captures the end-user’s attention better. He navigates to some product page, selects the button and tries to edit it. Assume that that button has markup that looks like below:

<a href="javascript:addToCart(16);" class="add_to_cart">Add to Cart</a>

The Campaign Builder provides an “Edit” operation, that opens up a rich text editor for the user to make changes to any element with ease. Assuming, he makes the text of the button bolder and changes the color to a bright red, here’s what the resulting markup would look like:

<a href="javascript:addToCart(16);" class="add_to_cart" style="font-weight:bold;color:red;">Add to Cart</a>

Internally, an Edit operation is identified by the element the operation is applied on, and the new markup provided by the user, which in this case is the above code. It means that if a Buy Now button is found on any page, it will be replaced with the above code. The jQuery code for such an operation would look something like this:

// A unique selector path to identify the element
var selector = '#product_description > P:first-child + P > A:first-child';
$(selector).replaceWith('<a href="javascript:addToCart(16);" class="add_to_cart" style="font-weight:bold;color:red;">Add to Cart</a>');

Notice how this would not only add the styles to that element, but also change its href to always execute addToCart(16); regardless of the product page the user is on. Essentially, the dynamic content rendered by the client’s backend has now been replaced with static content.

DOM Comparator to the Rescue

With DOM Comparator in place, the initial markup of the Edit operation above will be compared with the final one, and a difference would be returned. The difference would contain the minimal changes necessary to be made to the target element, thereby impacting dynamic content as less as possible.

For the above example, here’s what the list of resulting operations would look like:

    "name": "css",
    "selectorPath": "#product_description > P:first-child + P > A:first-child",
    "content": {
        "font-weight": "bold",
        "color": "red"

Live Demo

Click here to view a live demo.

What’s Next

The library is currently in a pre-alpha state. It works well for a good number of cases, but does not for a lot of others. And for certain complex cases, it might not be performant enough.

Our current plans are focused on improving the library as per the below priority list:

  • Correctness: For almost all the cases, the first priority is to get the output as correct as possible to the expectation. This has been our prime focus thus far.
  • Performance: Once we ensure the cases perform correctly, the next task is to profile and optimize for performance. Since tree comparison is a pretty complex operation, we will be looking into possibilities like spawning a worker for performing tasks, or delegating to a Node.js server for comparison.
  • Readability: For a complex algorithm, it is equally important for the code to be readable. In the coming versions, certain complex logic, especially in the classes VWO.DOMMatchFinder and VWO.StringComparator will be refactored from the point of view of readability.
  • Documentation: Writing a documentation is as hard as writing code, if not more, is what I have realized when documenting this project. Over time, we will spend some time improving the documentation, and also release a reference manual for the classes used.


If you are interested in contributing to the project, we would love to hear from you. Just fork the repository and submit a pull request.

Further Reading

Head over to the documentation if you’d like to know more.