Course info
Dec 5, 2013
2h 52m

WinJS - the Windows Library for Javascript - is a framework created to help build Windows 8 applications using Javascript. This course will give an overview of the framework features and covers the fundamental parts that are the building blocks of the framework. The features covered in this course are classes, namespaces, mixins, events, bindings, promises and the navigation framework.

About the author
About the author

Gergely is a developer at Microsoft, working on next-generation Skype applications. He has been developing for the Windows Phone and Windows 8 platforms since their announcement, building highly-rated applications like Cocktail Flow and Weather Flow. Gergely lives in London.

Section Introduction Transcripts
Section Introduction Transcripts

Classes and Namespaces
In this module we'll be looking at how we can define and accent classes using WinJS. Before we start, let's take a moment to understand what this module will help us achieve. We'll see in the first part of the module that working with JavaScript classes can get a bit more messy than we'd like. It is possible to use classes in JavaScript; however, using them feels a bit unorganized, kind of like when there are too many cables lying around in a server room. Luckily there are tools to organize cables, and in a similar way WinJS provides a set of helpers to organize our code in a much more tidy way, so by the end of this module you'll be able to use the WinJS tool set to work with classes using cleaner syntax and better structure. Now that we know our goal, let's take a look at what we'll be covering in this module. The first question most people ask when it comes to JavaScript is does it support classes? Answering this question is not as straightforward as a simple yes or a no, so in the first part of the module we'll be looking in a bit more detail into what classes are in JavaScript and how they are supported. After this we'll move on and see how WinJS adds support for defining classes. We'll see that the syntax offered by WinJS is definitely cleaner than what JavaScript itself has to offer. After this we'll look at how we can derive classes from one another and create subclasses using WinJS helpers. Finally, we'll look at how namespaces offer a more structured way to organize our code. We'll see that namespaces in WinJS are a helpful tool not just for organizing code, but can also be used for information hiding. So, let's kick off by looking at classes in JavaScript.

Mixins and Events
Hi. This Gergely Orosz, and welcome to this module on Mixins and Events in WinJS. The goal of this module is to introduce a new concept in WinJS, mixins. We'll see how mixins are a powerful way to reuse functionality or to mix functionality between classes. And the reason we're covering events in this module is well, because as we'll see, there are also implements of using mixins. We'll start the module by introducing mixins, understanding what these are, and how we can use them. We'll then go through the mixins that WinJS ships with and see what we can use them for. Finally, we'll go through how we can use events in WinJS, and we'll see that to implement events we need to use some of the built-in WinJS mixins. So, let's start out by understanding what mixins are.

Data Binding
Hi. This is Gergely Orosz, and welcome to this module on Data Binding in WinJS. The goal of this module is to learn how we can have the UI of our application be updated when the underlying data changes. The process of automatically updating the UI from the data source itself is called data binding. In this module we'll be learning how we can set up and use data binding, and we'll see that using data binding will make our applications simpler, more decoupled, and easier to maintain. Apart from making the code cleaner and helping separate the view and the data, data binding is also an essential component for building applications that follow the MVVM pattern. We won't go into details into this pattern in this module, but when building large applications you'll almost certainly find yourself using data binding to structure your code in a clean way. We'll start with a few simple examples to understand what data binding is and what are different types such as one time, one way, and two way are. We'll then look into how to implement the most commonly used data binding, one way data binding, and how we'll need to use observables to do so. Then we'll learn about data binding converters and see examples of using them. Finally, we'll show an implementation of two way data binding. So, let's start off by understanding what data binding actually is.

Hi. This is Gergely Orosz. Welcome to this module on Promises in WinJS. The goal of this module is to help understand and use promises. Promises is an asynchronous programming concept, which allows working with asynchronous operations in a nice and clean way. In WinJS promises are a really important part of most applications, so because of this it is critical to understand them and know how to use them. In the first part of the module we'll be understanding what promises are, how we can use built-in WinJS promises, and how we can create promises ourselves. Then we'll dive deeper and see how we can do some more advanced things with promises such as joining them together, wrapping non-promise values into promises, and other useful promise features. Finally, we'll see how we can implement truly asynchronous promises in the WinRT layer with examples that use C# and C++. This final part will show how easy it is to wrap C# and C++ methods into asynchronous promises that we can consume from JavaScript. So, let's start by understanding what promises are.

Pages and Navigation
Hi. This Gergely Orosz, and welcome to this module on Pages and Navigation in WinJS. The goal of this module is to learn about WinJS pages and navigating between them. By using pages in our application, the app can be structured in a clean and modular way. In this module we'll be going through the most important things to know on using pages and navigating between them. We'll start learning about the WinJS Single Page Application framework or SPA framework. We'll then see how to create pages in our app and how to navigate between these pages. And we'll finish off by learning about how to store the state of pages and how to make use of the page navigation stack when moving back and forth between pages. So, let's start by learning about the WinJS SPA framework.