{"id":723,"date":"2013-10-09T08:00:00","date_gmt":"2013-10-09T08:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2013\/10\/09\/lightswitch-performance-win-in-visual-studio-2013\/"},"modified":"2019-02-14T15:43:44","modified_gmt":"2019-02-14T23:43:44","slug":"lightswitch-performance-win-in-visual-studio-2013","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/lightswitch-performance-win-in-visual-studio-2013\/","title":{"rendered":"LightSwitch Performance Win in Visual Studio 2013"},"content":{"rendered":"

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

A Slimmer ODATA Format<\/h2>\n

LightSwitch uses a REST-based protocol called ODATA<\/a> for communication between the Client and the Server.\u00a0 ODATA can be formatted a few different ways.\u00a0 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.<\/p>\n

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

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

Let\u2019s take a look at the bandwidth usage now, and get an idea of just how much less bandwidth is being used.<\/p>\n

Bandwidth Savings<\/h2>\n

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 \u201claunch\u201d our app. We can then use Internet Explorer\u2019s F12 Debugging Toolsto look at the size of the HTTP requests and response.<\/p>\n

I\u2019m going to walk through making a simple LightSwitch project. If you aren\u2019t familiar with making a LightSwitch project, please check out the very short tutorial on our Developer Center<\/a><\/p>\n

I\u2019ve also made a simple animated gif that walks through these Design Time steps:<\/p>\n

\"Designer\"<\/a><\/p>\n

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

After you\u2019ve done this, go ahead and click \u201cAttach to External Database\u201d. Lets attach to some database that already has data in it (I\u2019m attaching to a Northwind SQL Database, but if you don\u2019t have that available, you can attach to the Northwind ODATA Service<\/a>). Select which tables you want to import and click \u201cFinish\u201d.<\/p>\n

We need some way to display the data, so let\u2019s make a very simple screen around one of our database tables.<\/p>\n

Right click on the LightSwith HTML Project, and select \u201cAdd Screen\u2026\u201d<\/p>\n

Select the \u201cBrowse Data Screen\u201d template, and for the Screen Data just select some table that you know has data (I\u2019m using a Customers table).<\/p>\n

Now we can launch our app and use Internet Explorer\u2019s F12 Developer Tools to look at a particular HTTP request.<\/p>\n

You can follow the steps on this animated gif:<\/p>\n

\"runtime\"<\/a><\/p>\n

    \n
  1. Press F5 to launch the LightSwitch HTML app<\/li>\n
  2. When IE launches, press F12 to open the Developer Tools<\/li>\n
  3. Select the \u201cNetwork\u201d tab and then click the \u201cStart Capturing\u201d button. This will start \u201crecording\u201d all HTTP traffic.<\/li>\n<\/ol>\n

    \"VS2013-Perf-LS-StartCapturing<\/a><\/p>\n

    4.\u00a0 Now \u201crefresh\u201d your browser. You should see a bunch of HTTP requests appearing.\u00a0 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:<\/p>\n

    \/DBData.svc\/MyCustomers?$top=45\u00a0\u00a0\u00a0 GET\u00a0\u00a0\u00a0 200\u00a0\u00a0\u00a0 application\/json\u00a0\u00a0\u00a0 12.60 KB\u00a0\u00a0\u00a0 0.56 <\/em><\/p>\n

    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<\/p>\n

    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.\u00a0 But most important, the response size was 12.60KB<\/strong> and it took 0.56 seconds.<\/p>\n

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

    \"Response<\/a><\/p>\n

    What this shows is that our HTTP response was returned in a JSON format called \u201cminimalmetadata\u201d (another name for JSON Light).<\/p>\n

    (The F12 Developer Tools are pretty powerful, definitely encourage you to read up more on it if you like – IE F12 Developer Tools<\/a>).<\/p>\n

    Great, but how does this compare to the last release?<\/h2>\n

    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.\u00a0 Keep in mind that this prior release was using JSON Verbose.<\/p>\n

    Here\u2019s how the request looked on the previous release:<\/p>\n

    \/DBData.svc\/MyCustomers?$top=45&$inlinecount=allpages\u00a0\u00a0\u00a0 GET\u00a0\u00a0\u00a0 200\u00a0\u00a0\u00a0 application\/json\u00a0\u00a0\u00a0 31.10 KB\u00a0\u00a0\u00a0 0.71 s<\/em><\/p>\n

    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 <\/strong>and took 0.71 seconds.<\/p>\n

    We can break this down like so:<\/p>\n\n\n\n\n\n
    <\/td>\nVisual Studio 2012<\/td>\nVisual Studio 2013<\/td>\nImprovement<\/td>\n<\/tr>\n
    Customer Entity Request Response Size<\/td>\n31.10 KB<\/td>\n12.60 KB<\/td>\n>50%<\/td>\n<\/tr>\n
    Customer Entity Request Response Time<\/td>\n0.71 seconds<\/td>\n0.56 seconds<\/td>\n>20%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    Conclusion – Less Bandwidth, and Faster Processing Time<\/h2>\n

    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.<\/p>\n

    One last very important piece – if you\u2019re 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<\/a> about how you can make this happen with a very simple NuGet Package update.<\/p>\n

    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<\/a>.<\/p>\n

    Thank you!<\/p>\n\n\n\n
    \n\"matt<\/a>\n<\/td>\nMatt Sampson<\/strong>: Senior SDET Visual Studio LightSwitch Team<\/p>\n

    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<\/a> where he opines on all things LightSwitch. You can find him on Twitter<\/a> tweeting about Visual Studio, or occasionally tweeting about Anime<\/a> shows.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

    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\u2019s 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 […]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1196,155],"tags":[9,137,53,357,12,126],"class_list":["post-723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desktop","category-visual-studio","tag-debug","tag-html","tag-performance","tag-sql","tag-visual-studio","tag-visual-studio-2013"],"acf":[],"blog_post_summary":"

    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\u2019s 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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}