LightSwitch Performance Win in Visual Studio 2013

LightSwitch Performance Win in Visual Studio 2013

Rate This
  • Comments 9

With the release of Visual Studio 2013 RC, we on the LightSwitch Team have made some changes in how much bandwidth our HTML Client and Server use when communicating. Let’s take a look at what we did and how it can be useful to both developers and users of LightSwitch applications.

A Slimmer ODATA Format

LightSwitch uses a REST-based protocol called ODATA for communication between the Client and the Server.  ODATA can be formatted a few different ways.  Some of these ways are more verbose than others, but fortunately for us the ODATA team at Microsoft recently worked on ways to make ODATA less verbose.

The LightSwitch HTML Client in previous releases was using a format of ODATA often called JSON Verbose.  Which as the name implies, used up a bit of bandwidth.

With the release of Visual Studio 2013 RC, LightSwitch is now using a format often called JSON Light. As you might guess, this format uses considerably less bandwidth.

Let’s take a look at the bandwidth usage now, and get an idea of just how much less bandwidth is being used.

Bandwidth Savings

The easiest way to demonstrate this is to create a simple LightSwitch application, attach to a database with data, create a simple screen, and then “launch” our app. We can then use Internet Explorer’s F12 Debugging Toolsto look at the size of the HTTP requests and response.

I’m going to walk through making a simple LightSwitch project. If you aren’t familiar with making a LightSwitch project, please check out the very short tutorial on our Developer Center

I’ve also made a simple animated gif that walks through these Design Time steps:

Designer

Launch Visual Studio and navigate to File –> Create New Project and select a LightSwitch HTML Application (the LightSwitch Desktop Application uses a Silverlight Client, which has actually already been using the JSON Light format since Visual Studio 2012 Update 2).

After you’ve done this, go ahead and click “Attach to External Database”. Lets attach to some database that already has data in it (I’m attaching to a Northwind SQL Database, but if you don’t have that available, you can attach to the Northwind ODATA Service). Select which tables you want to import and click “Finish”.

We need some way to display the data, so let’s make a very simple screen around one of our database tables.

Right click on the LightSwith HTML Project, and select “Add Screen…”

Select the “Browse Data Screen” template, and for the Screen Data just select some table that you know has data (I’m using a Customers table).

Now we can launch our app and use Internet Explorer’s F12 Developer Tools to look at a particular HTTP request.

You can follow the steps on this animated gif:

Runtime

  1. Press F5 to launch the LightSwitch HTML app
  2. When IE launches, press F12 to open the Developer Tools
  3. Select the “Network” tab and then click the “Start Capturing” button. This will start “recording” all HTTP traffic.

VS2013-Perf-LS-StartCapturing 2      

       4.  Now “refresh” your browser. You should see a bunch of HTTP requests appearing.  After the browser finishes refreshing, select the last HTTP request in the list (it should be last or close to last). It will look something like this:

/DBData.svc/MyCustomers?$top=45    GET    200    application/json    12.60 KB    0.56

I chose this request because it is the actual request to retrieve data from the Server and pull it back to the Client. So this request, and any HTTP GET/READ request like this, are the ones where we will see the HTML Client using the new JSON Light format

In English, what this request shows, is that I requested the first 45 records from my entity, and that the response came back in a JSON format.  But most important, the response size was 12.60KB and it took 0.56 seconds.

To be sure that we are using the JSON Light format, we can drill down into this a little more.  Just double click on the request, select the Response Headers tab, and look at the Content-Type header.

Response Headers 

What this shows is that our HTTP response was returned in a JSON format called “minimalmetadata” (another name for JSON Light).

(The F12 Developer Tools are pretty powerful, definitely encourage you to read up more on it if you like - IE F12 Developer Tools).

Great, but how does this compare to the last release?

I ran through the same steps on an earlier version of our product (I used VS 2012 Update 2) so that we could compare the numbers.  Keep in mind that this prior release was using JSON Verbose.

Here’s how the request looked on the previous release:

/DBData.svc/MyCustomers?$top=45&$inlinecount=allpages    GET    200    application/json    31.10 KB    0.71 s

What this request shows, is that we again got the top 45 records from our entity, and it returned a JSON format that had a response size of 31.10KB and took 0.71 seconds.

We can break this down like so:

 

Visual Studio 2012

Visual Studio 2013

Improvement

Customer Entity Request Response Size

31.10 KB

12.60 KB

>50%

Customer Entity Request Response Time

0.71 seconds

0.56 seconds

>20%

Conclusion - Less Bandwidth, and Faster Processing Time

Less bandwidth means quite a few things, but as we can see here we got faster processing time for the HTML Client and the Server. This is also beneficial for scenarios like hosting your web site in Azure. Less Bandwidth means it will cost you less to host it. To conclude - faster load times + cheaper web site hosting = WIN.

One last very important piece - if you’re a VS 2012 user, and you are wishing you could use the new JSON Light format with your HTML Client, then read up on this article from Huy Nguyen about how you can make this happen with a very simple NuGet Package update.

Hopefully our investment in less bandwidth is helpful to you and the LightSwitch apps you are making. If you've got any questions, comments, or feedback, please share them on the LightSwitch forum.

Thank you!

image Matt Sampson: Senior SDET Visual Studio LightSwitch Team

Matt works on the Visual Studio LightSwitch team as a Senior SDET, where he has been working for the last few years. He also runs his own blog where he opines on all things LightSwitch. You can find him on Twitter tweeting about Visual Studio, or occasionally tweeting about Anime shows.
Leave a Comment
  • Please add 4 and 5 and type the answer here:
  • Post
  • sounds good but did not solve the Speed Problems with the Silverlight Client and this is a bigger Problem for all who have SL cliensts out then a little bit faster HTML client which is still relativ fast...

  • @Robert - the Silverlight Client (for LightSwitch) has actually been using JSON Light for since Visual Studio 2012 Update 1.  So we did make that improvement there a while back.

    The SilverLight Client does have some separate performance problems (you've maybe seen several forum threads or blog posts about this already - http://bit.ly/1ab8lCN and a blog I wrote a while ago - http://bit.ly/VuDRVD.

  • Hi Matt, The design time performance is serious if you got more than 200 tables.

    Are you guys really have this scenario tested?

  • @Ryan,

    Hey Ryan, 200+ tables is really an ERP sized project IMO.  And LightSwitch users don't typically use our projects to create ERP sized apps.

    But that being said I think I know the issue to which you are referring:

    social.msdn.microsoft.com/.../ca5cdc8b-4da2-49aa-9453-30bbda488b23

    Please follow that for updates (I believe the thread mentions that we have found issues around projects of this siz e and have addressed in the RTM release of VS 2013)

  • This should be good news for its users. The visual studio is a software application that provides comprehensive facilities – including source code editor and build automation – to programmers for software development. When installed, the functionality is available as a service. It allows users to create new applications by moving programming and building blocks.

    DbaiG

    Bolee.com

  • Hi Matt, you said that "the Silverlight Client (for LightSwitch) has actually been using JSON Light for since Visual Studio 2012 Update 1."

    I am using VS 2012 Update 4, but when I examine the headers of my GET requests, I am seeing that the content type is atom+xml. Is there a way I can either verify that my LS desktop application is using JSON light format, or configure it to do so?

  • @Kevin - Hey Kevin - The GET Request is most likely just saying that it "accepts" atom/xml from the Server. But in the actual RESPONSE you should see the response in the JSON format.

    ATOM/XML format will look like straight up xml, so you probably won't get the 2 formats confused.

    But check the response from the LightSwitch Server (use a tool like Fiddler like I did above)

    HTH - matt Sampson

  • Hi Matt, thanks for the reply. Using the F12 Developer tools in IE, I see where the "Accept" field is under Request Headers, however, under Response Headers it shows the same thing: Content-Type application/atom+xml;type=feed;charset=utf-8.

  • The images are really helpfull :D

    Thanks for this Information Matt!

Page 1 of 1 (9 items)