Windows 8.1 App Development 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.

http://4.bp.blogspot.com/-3QX1TIHrgJQ/VJ8ZweIW2XI/AAAAAAAACTI/dOKJ4yqE6uQ/s1600/Screenshot%2B(1).png

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.

http://2.bp.blogspot.com/-XOxp1LlCHDQ/VJ8b1WBqhRI/AAAAAAAACTU/zzFzF2q-xrc/s1600/Screenshot%2B(2).png

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)

http://2.bp.blogspot.com/-BRUiYx1fkuw/VJ8i882HcLI/AAAAAAAACTk/vM5DM7VrRtA/s1600/Screenshot%2B(3).pngWith 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?

http://3.bp.blogspot.com/-GeV0vRKR_GY/VJ8nEY_qTQI/AAAAAAAACTw/pYTTh36-j60/s1600/Screenshot%2B(5).png

• 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?

http://2.bp.blogspot.com/-RfRdxCfFZ2E/VJ8tCMCaW3I/AAAAAAAACUA/BqUp7w5N9SE/s1600/Screenshot%2B(6).png

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.

*
*

http://4.bp.blogspot.com/-g9ooRcxU4T4/VJ83kWVBbWI/AAAAAAAACUQ/tEU5aPzMvCM/s1600/Screenshot%2B(7).png

*
*

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.

http://4.bp.blogspot.com/-ySWyJ-wwUt8/VJ8-3vFRcEI/AAAAAAAACUg/YF6gyA9KTNI/s1600/Screenshot%2B(28).png

http://3.bp.blogspot.com/-RoCkBT7s0k4/VJ8_3VHPpWI/AAAAAAAACUo/tbUSOXNvcdQ/s1600/Screenshot%2B(29).png

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

http://1.bp.blogspot.com/-k6yRTS-ODhE/VJ9BmBsIgOI/AAAAAAAACVE/tnCN6D-rKsc/s1600/Screenshot%2B(30).png

http://1.bp.blogspot.com/-a3xbaZ1bz0w/VJ9BmOt7jQI/AAAAAAAACVA/0ThkSrvky4g/s1600/Screenshot%2B(31).png

http://1.bp.blogspot.com/-neO5h6cwIqs/VJ9Bk39fDfI/AAAAAAAACU4/QlSl0uulBW4/s1600/Screenshot%2B(32).png

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

http://1.bp.blogspot.com/-4z519-MpJDQ/VJ9FzMMJxEI/AAAAAAAACVU/rc3N49xf_Mk/s1600/Screenshot%2B(10).png

Here is me testing at 5.00am