SharePoint Framework with KnockoutJS: End-to-end Part 1: Intro.

Let’s face it – there’s not been a lot for SharePoint developers to be excited about over the last couple of years. Perhaps, however, the newly released SharePoint framework could change all that? As you probably know the SPFX is fully client-side and utilises a whole raft of ‘new’ (new to most SharePoint developers) client-side frameworks. Namely:


You don’t necessarily have to be an expert on each of these frameworks to get going and be productive with SPFX – but you need to know at least at a high level what each one is for.

You’re going to make use of the above no matter how you like to write client side code. Then it’s your choice whether you go:


Yep… there’s quite a lot of choice – which is a good thing (I think). What it eventually means is that like developers in the wider community, SharePoint developers can now select the right tool or framework for the job, and implement their client side solutions in a consistent and supported way.

Getting Started with SPFX

Firstly, before you can do anything with the framework you’ve got a few things to get set up – mainly on your own PC, but also in your tenancy if you want to debug your web parts in a SharePoint context. I followed the steps MS have laid out – beware that because it’s all preview they can (and likely will) change.

When you’re up and running with a ‘HelloWorld’ in your local Workbench, there are a number of blogs that are great sources for deep diving into specifics of the framework, including features such as web part properties etc. Of course I’ll be noting my experiences in this blog – but two blogs in particular I used to get up to speed were:


Since React JS is the de-facto framework of choice for SPFX projects, there’ll be more and more info on that – but I wanted to make use of my previous experience in Knockout JS, so this series will be focusing on that.

Why Knockout?

Debates over what the ‘best’ framework is will go on forever – but I personally feel Knockout is a great fit for SPFX projects because it doesn’t try and do too much – it does data binding, in MVVM… and it does it very well.

That said lots of the experience shared in these articles will be relevant to any framework you choose.


So let’s get started! To base our code on something, we’re going to build a ‘Coffee Round’ app. It will display a list of people in a team, and each has the option to say they’re thirsty. When enough are thirsty, one member is nominated by the app to make the drinks. It’s silly… but it gives us something to hang the concepts on.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About davros85

Software Engineer @ Microsoft, working with key customers to help them be successful on Azure