Developing Windows 8 Apps with HTML5,CSS3 and JS

Well,if you are new to app dev this piece of log will guide you to build small apps and much more.I would love to have some feedbacks after you guys are done reading this.

Lets talk about Windows 8 Architecture

To start with app dev. , one must be very clear about how and where the app in going to run and how windows 8 will render it. So lets me start with a quick round up on that.

Previously,we had the Windows Kernel and all the apps that were built were called 'Desktop Apps' and this was mostly done with C/C++ against the win32/COM APIs until the rise of C# and VB.net when they started running the apps inside Silverlight via the browser.

Another popular way to build apps were called 'Browser Apps' and these were written with HTML5 and JS . Bing maps and Office 365 are very nice examples of Browser Apps.

The Shortcoming

• The apps were mostly built for Intel compatible devices
•  There were no implementation of technologies like 'touch'.

The Need for a new Run Time(RT)

With Advent of  Windows 8 , Microsoft wanted to aim not only at Intel compatible devices but also to a whole lot of other consumer devices which were mostly powered by ARM processors and also to leverage capabilities like touch.This paved the path to the creation of a new RT and a new class of apps for that RT which is known today as 'Windows Store Apps'.

Windows Store Apps runs on Windows Run Time APIs AKA WinRT. WinRT gives you the basic of what one can expect from an RT which is communicating with the network , graphics and media and most importantly the 'Application Model' which will help the developer maintain the life cycle of an App.

Now,to help developers write their apps against the WinRT ; Microsoft created a 'Language Projection'  level which will help the developer to generate language compatible syntax for direct interaction with WinRT,

What Does This Imply?

• Now,One can access the WinRT with C# , VB.net and also with C / C++ and use XAML as markup.
• HTML5 and CSS3 can also be used to interact with the winRT and JS becomes the code behind for those kinds of apps.

**Note:The HTML5 apps in Windows Store are significantly different from what existed before.

Value of  "Windows Store" Apps

• These apps run on both ARM tablets and Intel Laptops.
• These apps can be sold right off on the store and hence the name.
• They can make use of 'Contracts' like share,search,access to file system,can play to DNLA network devices and much more.
• They support view states
  1.Full
  2.Fill
  3.Snap
• Application Lifecycle which helps to determine the behaviour of the application according to the nature of the user.

Accessing Windows RT API using JS

Windows Namespace lets you have direct access to the winRT and the various low level APIs . 

Example:

• Windows.ApplicationModel
• Windows.Devices
• Windows.Graphics

But again,to code against these low level APIs will take much effort and to make things easier ; Microsoft built a wrapper on top of the 'Windows' Namespace and which is called as 'WinJS'.

WinJS,sounds easy?

• WinJS object lets you have access to the windows namespace.
• Comes with bunch of controls , the very same which the XAML devs have it in Windows.XAML viz list boxes, ratings and much more
• Gives access to App container and App Lifetime Events through WinJS.Application
• Simplifies View States 
• Helps us to create classes and namespaces, also dealing with Async and promises.
• Offers predefined themes (Light & Dark)

Where and How is your App going to run?

After the user has downloaded your application off the store , in a system folder the app source will exist which means all the HTML5,CSS3 and JS files will be there.When the user launches it using the live tile, an App Container is created which is responsible for the lifetime of your application in the memory.Since JS, does not compile down to an executable ; so Windows includes "wwahost.exe" and this very same process which holds the 'Chakra JS Engine' and 'Trident HTML5 & CSS3 Engine' . Its important to know that these are the same engines which are used by IE10 but here we don't have IE running at all , instead its a process here.Finally, the HTML5 and CSS3 with the JS are pulled in ,processed by the engines and are rendered to the device.

Now that you have an idea about the Architecture and App Lifecycle .Let me quickly jump into App Container and explain how the application behaves.

Application Container

Application Container in the memory is like a Sand Box in which the application runs.The application container gives managed access to the system resources and access to other files ,apps and devices through "contracts". Handles process life time viz Activation,Suspension and Termination.

How App Container deals with the code

The app container has some security implications while the code inside the app container executes and hence the app container has 3 major context in which the code runs 

• Local Context
• Web Context
• Cross Context

Local context

• Has access to WinRT API
• Can retrieve cross domain media
• Can make XMLHttpRequests
• CANNOT run remote scripts
• Example : Standalone Apps

Web Context

• Can load remote cross domain scripts
• CANNOT access the local system using RT APIs
• Example:Apps like Bing maps 

Cross Context

• Use an iframe in the local context in HTML5 page.
• Load the iframe in the web context with the content that you want to send.
• Use the iframe.postMessage to pass messages back and forth.

How to bind and instantiate the resource with the context

Local Context

• The very first page of the app has to be in the local context
• Local resources loaded with ms-appx:// URIs

Web Context

• Remote resources loaded with http or https schemes
• local resources loaded with ms-appx-web:// schemes

Now that you know enough about how and what to do.Lets simply pop out VS2013 and start off .Following screenshot will help you to know what to select in the project.

So after you have selected the Blank app . You will have to put your HTML5 code and JS.For the guys who are not that good with codes or want to have an experience of how things look in the design time can hit "open in blend" by right clicking on the default.html file in the solution explorer.
below is a view of how its gonna be.

I have written an application and you can see it look and feel of the app in blend also can alter and edit anything on the design front.

The developer has to keep in mind all the views of the app should be looking at least decent if not perfect.
So below are the Screenshots of how my app looks like in the Filled,Snap and Portrait view

So now that you have an idea to how the apps work you should try making one for yourself and just for reference.you can get the app I demoed here on my http://tinyurl.com/demoheremyam

Here is me testing at 5.00am

Intro to Windows Azure

Why Azure?

   To answer this question lets look a bit ahead an analyze some question and on the basis of them derive what and why we go for azure.

  What Does it take to run an App on the Web?

So the few major things that decides the working and performance of the app on the web are 

• OS  - How to keep our OS up to date.
• Network - How load balancers,routers and DNS interact with our           system.
• Storage - How to manage the data required and generated by our           application.
• Scale - How to reach to many users who are geographically               distributed.

The two major things which are SO not included in list we just made.

• Everyone has to deal with this no matter what they are building.
• This has NOTHING to do with the application which we are building.

Is there any better way?

yes,there is. There is something which can take care of all the complexities and let us only worry about the Application what we are building.

Here's Azure!

Azure is Microsoft Cloud Computing platform.That means it is a place to run your application on the internet. But there's more, Windows Azure takes an application eccentric view ; which means from the initial design, development and testing  to deploying on the cloud on the touch of a button to monitoring and scaling your application when its running on the internet.And finally, Azure helps you ti understand your application and build a better version and deploy it on the cloud without incurring any downtime.

Azure's Structure

• Fabric : Its the abstract set of compute resources in the data centers.Inside are many systems running windows.
  
• Storage : The storage service is there to give you a reliable experience in a scalable way.
  
• The Developer Experience:The fabric, Storage with all the APIs on the cloud ; integrating them to visual studio and finally is given in the form of an SDK which can be downloaded for free.This means one can build and test apps locally before they can deploy them on the cloud.

The utility Model 

 The utility model is a pay-as-you-use model which means that Azures scales the application that is on the cloud in respect to the usage of resources. It's much like the electric bulb that you turn on and turn off everyday. The electricity you consume, you only pay for that much.This is one of the key features which helps any developer to make use of optimum resources , without wasting them.

This is what Azure in a nutshell and how it can help you building the new coolest thing on the cloud.