OOP in WinJS #1: Namespaces

Universal Apps are currently the best option for building "game changer" Microsoft-stack apps for Mobile, Windows, IOT, Cloud and even XBOX.

For Native, you can use languages like C#, VB, C++ for building Universal Apps and Games. But, you can also use JavaScript for building Universal Apps so that the audience of this article will know all about WinJS library which is used for UWP JS apps.

WinJS is a framework that has many libraries within that lets you do everything a native app can do. But as you well know, real life is sometimes different than building apps as a hobbyist: There are rules, coding standards, and code reviews.

The point of writing article is to get you used to OOP in WinJS.

I am planning on a 6-series article:

1. OOP in WinJS #1 : Namespaces
2. OOP in WinJS #2 : Nested Namespaces
3. OOP in WinJS #3 : Classes
4. OOP in WinJS #4 : Inheritance
5. OOP in WinJS #5 : Encapsulation
6. OOP in WinJS #6 : Asynchronous Programming

In our first lesson, we will be creating namespaces and using them in our project.

Namespaces

Namespaces are blocks of code grouped together for easy readability primarily very useful for code reviewers and developers.

We'll be using Universal Apps, but you can also use same knowledge in Windows or Windows Phone specific projects that use WinJS library.

Let us start with creating our WinJS application!

Building Application

Run your Visual Studio 2015 (I use Community Edition here).

Click New Project, JavaScript, Windows, then click Universal.



The project will be created and default.js file opened up, but I have a better idea. Why don't we create a new JavaScript file?

Click on your js folder and Add new Item. Name it as you like (for instance, I named it "app.js").



We're going to define several namespaces to do specific jobs. Generally, these namespaces will only write some output.

// Namespaces
WinJS.Namespace.define("SensorJob");
WinJS.Namespace.define("ShareJob");
WinJS.Namespace.define("ServiceJob");
WinJS.Namespace.define("UIJob");

We've declared 4 namespaces with each one does specific jobs.

Now lets fill these namespaces with some functions:

SensorJob.Job =
{
  Output: function () { return "Test Message coming from SensorJob"; }
};

ShareJob.Job =
{
    Output: function () { return "Test Message coming from ShareJob"; }
};

ServiceJob.Job =
{
    Output: function () { return "Test Message coming from ServiceJob"; }
};

UIJob.Job =
{
    Output: function () { return "Test Message coming from UIJob"; }
};

Once we called each function, they will write message in console window.

Let's call them!

First link your app.js in your default.html file:

<script src="/js/app.js"></script>

Then create a script block in default.html and call these functions:

<script type="text/javascript">
      console.log(SensorJob.Job.Output());
      console.log(ShareJob.Job.Output());
      console.log(ServiceJob.Job.Output());
      console.log(UIJob.Job.Output());
</script>

Now run the app and see the output message in JavaScript Console.

This sample was easy for you to understand how namespaces are defined and how functions are created inside these namespaces.

 

Read more articles on Universal Windows Apps:

• File Handling In Windows 10 Universal App
• Static Resources In XAML For Universal Windows Platform