Category: KnockoutJS

Feb18201618 February 201619 February 20162 Commentsby 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:-

Developer Developer Developer Day in Scotland – DDD Scotland
WebHackWednesday on Channel 9 – WebHackWednesday
Free tools for cross-browser testing – Dev.MicrosoftEdge.com
Project Oxford Api – Just go play here and try it out
TodoMVC – Helping you select an MV* framework
Remove the # in urls in Angular – use Html5Mode within routing config.
Microsoft Virtual Academy – Free Online Technical Training

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.

Feb0520135 February 20135 February 20131 Commentby Gregor Suttie

KoLite – dirty flag and more

Posted in KnockoutJS

KoLite its written by John Papa and Hans Fjällemark and has helpers which add some extra very nice functionality to KnockoutJS.

I was working on a project which uses KnockoutJS and had the need to implement the idea of setting a dirty flag if a user made a change to a form, this would in turn enable a save button and allow the changes to be saved.

KoLite makes this very easy indeed, I decided to put together some quick code demonstrating the features I mention – at work jsfiddle.net doesn’t work too well so I have added the code to a sample app and uploaded it to GitHub.

The original samples and more information can be found here, I thought they could do with being expanded upon a little.

The ViewModel I used for the demo code is as follows:-

code2

Dirty Flag and how to use it

The code on line 10 is creating the dirtyflag by using KoLite’s DirtyFlag – I pass in which observable’s I want to monitor to see if they become dirty when they’re value changes.
The code on line 27 is setting up a computed observable which will return true if the observables have theyre values changed, otherwise it will return false.

So by having some observables updated we can track for dirty changes and then decide what we want to do on our form, an example would be to enable the clear form button as well as enable the save button on when we have the dirty flag set to true.

Grey out button when Ajax request is in progress

The code on lines 29-33 is making use of the KoLite asyncCommand
If you then add the code below, to the html then we have the functionality were after.

[sourcecode language=”csharp”] <button data-bind="command: saveCommand">Save</button>
[/sourcecode]

Grey out button when Ajax request is in progress and show activity icon

If you add in the extra binding like so:-

KoLite will now add in an activity icon within the button, and that’s it – in the example code I am using an Ajax post to call the MVC Controller and whilst this is off doing work the activity icon spins.

My demo code can be found here
You can download the code for KoLite here

My DotNetCurry Magazine Articles

Posted in KnockoutJS, RavenDB, Training

Over the last couple of months I have been privileged to write a couple of articles for the free .Net Developer Magazine brought to you by
DotNetCurry.

Its been my first attempt at writing for a magazine and has been a lot of fun, maybe in the future I can write more articles.

Please enjoy and give them a read – and sign up for the magazine – its FREE!

Create a Snappy UI with KnockoutJS -> Issue 3
This article explores KnockoutJS and what KnockoutJS gives you as a developer.

Web Essentials for Visual Studio 2012 -> Issue 4
This article explores the Visual Studio 2012 Web Essential add-on.

What’s New in RavenDB 2.0 -> Issue 5
This article explores RavenDB 2.0

Take a look at these articles and hopefully you will learn something new – Gregor.

Oct29201229 October 201229 October 20123 Commentsby Gregor Suttie

KnockoutJS – what I’ve learned so far

Posted in KnockoutJS, MVC

I have been using KnockoutJS at work for the last few weeks and thought it might be an idea to blog about my findings whilst using KnockoutJS within an MVC 4 project, so here goes: –

With KnockoutJS you can get a really slick user experience if you show discipline in structuring your code, you can separate out your concerns using unobtrusive JavaScript – i.e. don’t put your JavaScript in the HTML, yes add data-bind attributes but that should be all you need, your JavaScript can be referenced from a file within a JS folder or similar keeping your HTML clean and free from being polluted by lots of inline JavaScript.
If you’re wondering how you go about going from your MVC model and working with this in KnockoutJS then look no further than KnockoutJS mapping. This plugin will take your existing Model from c# and convert it into what you will use within KnockoutJS, for example if in your model you have a string[] defined like so:-
[sourcecode language=”csharp”] public string[] EmailAddresses { get; set; }
[/sourcecode] then the mapping plugin converts this to an observableArray, and if you have a simple string property such as: –
[sourcecode language=”csharp”] public string Email { get; set; }
[/sourcecode] then the plugin will map this to a knockout observable for you.
When using ObservableArrays note that the number of items in the array is tracked – not the actual values within the array – this is important if, if the front end requires updated to the values within the array then you need to make the items within the ObservableArray observable also.
Take a look at the ko.utils code mentioned here for some hidden gems when working with KnockoutJS.
Dont store a lot of information in observables if you don’t have to, it’s not a good idea to store 10,000 records in an observable array and then bind that to a grid (Only store what you need in observables)
It can be a good idea to display on your page the contents of your viewmodel whilst you’re debugging so you can see what the observable and observable arrays you’re using contain
[sourcecode language=”csharp”] <div id="debug" style="clear: both">
<hr />
<h2>Debug</h2>
<div data-bind="text: ko.toJSON($data)" />
</div>
[/sourcecode]

More soon as I use it more and more, hope that helps.

Tags:KnockoutJS MVC

Oct20201220 October 201223 January 20132 Commentsby 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.

Open up a new web solution either MVC app or a Web app
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.
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.
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:CoffeeScript Web Essentials Web Essentials 2012

Sep0920129 September 20129 September 20121 Commentby Gregor Suttie

What I learned last week – 3rd September – 7th September

Posted in KnockoutJS, Pluralsight, RavenDB

This past week I have been mainly working with KnockOutJS, if you looking for a way to create a rich UI that users will love and your building a website then I highly recommend you take a look at KnockoutJS

What I learned this past week

Web Essentials 1.1 for VS 2012 by Mads Kristensen has been updated, you can read more here – go check it out.
RavenDB Backups – I decided to instead of using the RavenDB Backup.exe – I am going to stick with just exporting the tenant database and saving this off to a network share.
At work we are looking at introducing CoffeeScript – CoffeeScript is a language that sits on top of JavaScript and compiles down to JavaScript but has added benefits including making your code cleaner and has much more signal to noise ratio – more on CoffeeScript soon , I’m off to learn more on it via PluralSight.
Redgate have taken on the 2 developers who write Glimpse and will be adding to the project – you can read more here.

What did you find useful this week? – please let me know by leaving a comment after the beep.

Aug30201230 August 201230 August 20122 Commentsby Gregor Suttie

jsfiddle.net – what is it and why is it so useful?

Posted in jQuery, KnockoutJS, Pluralsight

If your writing a web application and using any kind of JavaScript library then jsfiddle is something worth taking 5-10 minutes to look at in my opinion.

You can try out your JavaScript (any library you can think of) add some HTML and sprinkle with CSS and quickly see the results, its a no brainer.

At work we are starting out on a web application which we will be using KnockoutJs on and jsfiddle will be invaluable, I have been watching the Pluralsight and Tekpub videos on KnockoutJs and wanted to blog about jsfiddle after watching John Papa talk about it in one of his KnockoutJS modules.

John’s courses on Pluralsight are awesome and I highly recommend them, the one I refer to was his course on Buiding HTML 5 apps (middle one below):-

jsfiddle.net is a website where you can test out some JavaScript code snippets you have, before you add them to your project, it’s an excellent little test harness for ideas and trying things out.

You can save the fiddles you create and share fiddles with others if you can’t get something working and could use some help with some tricky JavaScript.

Ok less talk more action:-

Browse to jsfiddle.net and then sign up for an account, the reason you want an account is so you can save fiddles for later and come back to them in the future.
You can add in pretty much any JavaScript library as a a managed resource so that you test all kinds of stuff, jquery, jquery ui, knockoutj, kendoui and more.
If you see a blog post that mentions a js fiddle and you want to it then I will show you how to use it below:-

How to create your first fiddle using jsfiddle

For simplicity we will use the demo from the knockoutJs website which has fantastic tutorials on how to use knockout.

Since this demo is going to use KnockoutJS we will add a reference to KnockoutJS
Browse to https://github.com/SteveSanderson/knockout/downloads and then copy the location to the latest version of the knockoutJS library, at this moment in time this link to the file we need is :- https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js
To add this to our jsfiddle look at the left hand side looking for ‘Add Resources’ and then paste in the link to the js file and then click the plus icon.
The screen is split into 4 sections:-
- Top Left is for HTML
- Top Right is for any css styling you wish to add/try out
- Bottom Left is where you add your JavaScript code.
- Bottom right shows the output you would see in the browser
Add the following into the top left hand window pane (Html):- [sourcecode language=”csharp”] <p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
[/sourcecode]
Now add the following into the bottom left window pane (JavaScript):-
[sourcecode language=”csharp”] // This is a simple *viewmodel* – JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.firstName = "Bert";
this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());
[/sourcecode]
And thats it we are ready to save the fiddle and test it out.
To test out our code click Run up at the top and you can use your favourite browser to check for any errors that may arise as you play around with the code.
A very simple demo but you get the idea on whats possible, and if like me your trying to learn KnockoutJS its an invaluable tool.

Ok now that you get the idea, go create some fiddles and test our your ideas using any JavaScript library you can think of – enjoy!

Aug27201227 August 201223 January 20131 Commentby Gregor Suttie

Starting out learning KnockoutJS

Posted in KnockoutJS

So I want to learn KnockoutJS as we are going to be using it on a project at work very soon, I have had a look at it briefly but not really used it in anger as they say. I will be using this for the next few weeks at the very least so lets get started learning it.

In order to learn knockoutJS I will be using the following resources (click the images):-