Category: JavaScript

Feb18201618 February 201619 February 20162Commentsby Gregor Suttie

MSWebDay – What I took away from it

Posted in Best Practices, Events, JavaScript, KnockoutJS, MVC, NuGet, Training

Today, Feb 16th, I attended MSWebdevday ran by Microsoft in Glasgow which was an event covering all things web related from Microsoft, the speakers were @christosmatskas, @thebeebs and @martinkearn and was an all day event.

The Schedule for the day covered various topics and it was great to learn so many new things and get my first glimpse at some new technologies, I always love learning something new, and I even sat next to the illustrious Gary Ewan Park, someone who I have chatted to a few times on twitter but not every managed to meet.

Ok so lets cover the actual event:-

The first talk was by on What’s New in ASP.Net Core 1.0 and was a tour of the new features, how to get it, how to use it, whats new, whats no longer there and he also talked about how you can just take the files and drop them into a folder when deploying, there’s no gac, you can just deploy the Core files in a folder alongside your code, this is very neat, its cross-platform, and it means you could have the same site running under different version of Core going forward should you choose to or need to have this.

The second Talk was Building with JavaScript Task Runners, this was mainly about how to get gulp, how to set it up and how to run some tasks to minify your css, javascript files and all that good stuff, how to add it into Visual Studio as a build step after you compile your code, showed an example gulp file and lots more.

The third talk was Entity Framework Core 1.0, and covered EF and how to use it, how to use code first and also mentioned EF6 how its improved greatly from previous versions and why you should choose this version at the moment whilst EF Core 1.0 is still being worked on and has the tooling added to it for the Core 1.0 release.

The fourth talk was APIs: the cogs behind the machine and this talk was about api’s and mainly web api and how in Core 1.0 there is no MVC and WebAPI its just one thing now and your controller is an API controller, so no need for MVC and WebAPI there is just the controllers now which kind of merge both together.

The fifth talk was Dev Ops in Azure and this covered deploying your website to Azure, making changes, showing the changes, getting the publisher file for using in side Visual Studio and publishing your changes from Visual Studio using Git int his example to deploy your changes from within VS up to the new Azure portal.

The sixth talk was Hitchhikers Guide to JavaScript, this talk focused on ECMAScript and the future of JavaScript and basically how a lot more code that we write will be JavaScript and we saw examples of the features coming in the next few years etc.

The seventh talk was Web Performance and how to check your websites performance using tools like YSlow and Google Page Speed etc and then how to go about making it make far less requests, cache JavaScript, enable IIS features and how to optimise images etc to make your website perform much faster that it currently does.

The eight talk was Single Page Applications and was about KnockoutJS and Angular, talking about Angular 2 and how it makes use of TypeScript and showed code covering KnockoutJS and AngularJS.

The ninth talk was about Hybrid Web Apps and how you can create application that can appear as Windows 8/10 tiles, make use of Microsoft Office and showed some very neat stuff using ManifoldJS which is itself very cool stuff.

Other stuff mentioned
I wrote some notes during the talks (should have taken a lot more) but a couple of things I need to look at are listed below:-

Summary
The event was great, full days learning, a lot of content covered, great speakers and good turn out. Spoke to some guys I chat to on twitter and all in all an awesome day spent learning some new stuff. There was a lot of content, I’ve missed half of it I’m sure so take a look at the slides on the site at MSWebdevday.

Dear Microsoft can we have some more of these days please? – especially Azure and Core related content.


Mar18201318 March 201318 March 20132Commentsby Gregor Suttie

Code coverage results for your JavaScript

Posted in JavaScript, TDD, TeamCity, Testing, Tools

I wanted to find out if there were any tools that can display code coverage results for JavaScript code (without the need for Java on the server or having to use Node), I experimented with a few different frameworks, test runners and what not and have spent a couple of hours looking in to this, in the end I opted for the following:-

jasmine_logo At work we currently use Jasmine which is a behaviour-driven development framework for testing JavaScript code along with PhantomJS which we use to run the tests using a specrunner (there are several ways to do it but this works for now)

I have installed the Visual Studio Extension called Chutzpah which is a JavaScript Test Runner which gives you a few nice things such as integration with TeamCity and the ability to right-click and then select Run Tests similarly to unit testing your C# code with your favourite unit testing framework.

chutzpah

Ok so back to code coverage for our JavaScript code – Matthew the guy who created Chutzpah is working on integrating code coverage into the next release so in the mean time here is how you get it to work – enter one further library called Blanket.js – Blanket.js is used to give us the code coverage results and currently supports Qunit, Mocha and Jasmine. An adapter API exists for supporting other test runners.

At this point you might be thinking its a fair amount of work to get this going but I will simplify the steps required to get your JavaScript code outputting code coverage results.

  • Download Blanket.js and look for the file called blanket-jasmine.js, add this to your Scripts folder inside your web application. This file is blanket version that works with Jasmine.
  • Add the Nuget package jasmine.js jasminenuget
  • Add some JavaScript code as below for example this is code.js
    • [sourcecode language=”csharp”] var stringLib = {
    vowels: function (a) {
    count = 0;
    for (var i = 0; i < a.length; i++) {
    if ("aeiou".indexOf(a[i]) > -1) {
    count++;
    }
    }
    return count;
    }
    }
    var mathLib = {
    add5: function (a) {
    return a + 5;
    },
    mult5: function (a) {
    return a * 5;
    }
    }
    [/sourcecode]
  • Add a JavaScript file with your Jasmine tests for the code above like so :-
    [sourcecode language=”csharp”] describe("general", function () {
    it("A basic test", function () {
    expect(true).toBeTruthy();
    var value = "hello";
    expect("hello").toEqual(value);
    });
    });

    describe("stringLib", function () {
    it("will get vowel count", function () {
    var count = stringLib.vowels("hello");
    expect(count).toEqual(2);
    });
    });

    describe("mathLib", function () {
    it("will add 5 to number", function () {
    var res = mathLib.add5(10);
    expect(res).toEqual(15);
    });

    it("will multiply 5 to number", function () {
    var res = mathLib.mult5(10);
    expect(res).toEqual(50);
    });
    });
    [/sourcecode]

  • Ok so we have some JavaScript code and Jasmine tests for the code, lets add some required links to our Jasmine specrunner page so we can see the code coverage
    results output to the screen, edit the spec runner like so:-

    specrunner2

    The above screen shot shows that we have added a reference to both our JavaScript code file and the file containing the Jasmine tests.

  • Now if we browse to the specrunner page for Jasmine we will see the results of the test – green for passed and red for failed (no code coverage results yet).

    jasmineresults1

  • Now lets show the JavaScript code coverage results – which is as simple as adding in the line to reference Blanket for Jasmine:-

    specrunner3

  • Refresh the specrunner page and you will now see your JavaScript code coverage results like so:-

    specrunner4

    The screen shot above shows us 100% code coverage, so no lines of JavaScript are coloured red (not covered)

  • If I comment out one of the tests we can see the difference below:-
    specrunner5
  • And there we have it code coverage results of your JavaScript, brief post but enough to get you started I hope, next time I will add this to TeamCity and see what that gives us.

Oct20201220 October 201223 January 20132Commentsby Gregor Suttie

Create CoffeeScript using Visual Studio and the Web Essentials Add-On

Posted in JavaScript, KnockoutJS


“CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way”

If your writing JavaScript in your web application, and the chances are these days you will be, then CoffeeScript is well worth a look – if your like me and you don’t particularly like writing JavaScript then bare with me you might learn some new tricks – CoffeeScript attempts to make your life easier when writing JavaScript and for the most part does a good job, it’s not all plain sailing as you might expect if you have worked with JavaScript much in the past.

Ok lets crack on, if you have Visual Studio handy make sure you have installed the Web Essentials Extension. This is a beauty of an add-on and has a nice little add-on for CoffeeScript included.

  1. Open up a new web solution either MVC app or a Web app
  2. Right click on your solution and then click Add in the next menu look for CoffeeScript, click this and we have a new CoffeeScript file added to your solution.
  3. On the left hand pane of the split is where you type your CoffeeScript and this is converted into JavaScript on the right hand side.
  4. Each time you save your changes the JavaScript file is updated for you – if you make any syntactical changes incorrectly then the preview tab on the right hand side will show you which line the error is on.

Some CoffeeScript basics are as follows:-

  • Semicolons are not required -> ;
  • Parenthesis are usually not required -> ()
  • Curly braces are usually not required -> {}
  • Commas are sometimes not required -> ,
  • Indent your code by tabbing for the start of a code block
  • Decrease indentation – end of a code block
  • The following screen shot shows you Visual Studio 2012 using the Web Essentials extension and I have added some CoffeeScript on the left and Web Essentials does the rest for me turning this into JavaScript.

  • To learn more about CoffeeScript check out the official website here.

Summary
CoffeeScript can be useful when your using something like KnockoutJS and you want to structure your code nicely using JavaScript classes and namespaces – I have been suing it recently and it has good points and bad points.

The good: – It allows you to structure your JavaScript easily and you can use namespaces as you would within C# classes. Less code is always good in my opinion and with CoffeeScript its easier to write less code to create your JavaScript files.

The bad: – Tabbing indents your code and this is how you create functions and loops and so on, miss one tab out and you can be left scratching your head but with some care this should be easily fixed.

Learn anything useful? – please let me know by leaving a comment after the beep.


Tags: