Spartan For Developers

Project Spartan For Developers in Windows 10

Microsoft has made its goals clear and more focused about the Web and has implemented few cool features in Spartan. The salient features which has changed as based on many factors three of them are

1.More Interoprability
This clearly means that developers will have the same experience as they have with other browsers. This also means that the developers will need to write once and deploy the code everywhere .

2.New Features
The features are new experiences and specs which are there on other browsers and also some new experiences that has been brought forward with time.

3.Less boundaries Between Apps and Web
This means  the minimal difference developers will experience while they are in a App and the Browser in Windows.

Evolution of Web
 All the way back in 1995, IE came up with the Trident rendering engine. It was a single engine that used to render the Web Page. Not too long after that,Microsoft introduced HTML4,CSS2 and ES3. After that Trident was split up into two Engines which were Quirks and Strict. The Strict engine was responsible to load the HTML4 and the Quirks was kept there to make sure the older contents used to run on the Web.

 IE7 and IE8 new specs started emerging which was when IE started supporting CSS2.1.And there were split in IE7 Compatibility Mode and IE8 Standard Mode and also keeping IE5 Quirks to make the backward compatibility in place. Its probably easy for the people to guess that it was not easy for the Java Script Engine to work with all these different rendering engines.
The trend continued and to make the work a bit more simple other than the !DOCTYPE developers will given the liberty to specify “x-ua-compatible” tags to determine which way they wanted the browser to render the page.

In IE9 and IE10 and Finally IE11 had multiple rendering engines which help render the page depending on the type of !DOCTYPE you are using or the Metatags that you have added to the page or how the page itself is constructed. In this way, IE was able to render all the different pages as they were intended by the developer. This was a bit difficult for the browser because it had to make too many number of decisions in a short amount of time. In the meanwhile, Firefox and Chrome took a different route. Instead of having multiple rendering engine, they had one rendering engine which was always up-to-date. This is exactly what Microsoft is doing with Project Spartan.

Project Spartan
1. Has a single rendering engine which will always stay up-to-date.
2.So no longer switching modes depending on the page, Spartan will have just one mode which will be compatibility built into it.

Architecture of Spartan AKA Microsoft Edge

So,the rendering engine is a fresh new one named as Microsoft EdgeHTML which will have compatibility and interoperability built it and will stay always up-to-date. Although Spartan will be the default browser which will be shipped by Microsoft in Windows 10 , IE 11 will come as a default application which will help developers who had their pages running on different modes to run smoothly as they always do.

Since windows 10 will power a whole lot of devices and Spartan will be shipped to all the devices by default the developers and testers won’t have to take the pain of testing on all the devices since its Spartan is being shipped with all of them.

Features Added to Spartan

Spartan includes the rich HTML 5 Features which will help developers create new experiences on the web. There are about 200+ interoperability fixes which will make Spartan more standard compliant and work with web as it is out today. Few of them are being listed below.

 

Minimizing the difference between Web and WebApps

The journey begins with Websites which are nothing but Web pages which we are looking at through Project Spartan.

The Hosted Web Apps are a totally new addition to Windows with Windows 10.This is where the majority of the resources are hosted on a server. The app can be discoverable from the store and can run locally on device.

The packaged Apps have been there for sometime now, there has been significant improvement in this type . Now they support use cordova or a web view as well.

Let’s go into details on Hosted Web Apps

 

In today’s world the Hosted Web App architecture is something like this.

 

So, the developers start with a Web Site. The web site is wrapped inside a WebView and that is put inside a Native App Container. This is how when the app is launched the WebView points towards the Web Site and the content is loaded. Also, Native Code can be paired up and with the help of custom bridge and hence some of the APIs can be exposed or events to fire them inside a WebView. All of this is hosted as a Web App and distributed with one or the other Store.

Now in case of Windows 10

The process here is much more easy and simplified. The native app container will directly point to the Web Server and hold the Web Site. Additionally, developers won’t need Custom Bridge to add native code to their application. With Hosted Web Apps in Windows APIs can be contained in the app container. This means the code running on your Web Server will be able to call the Windows APIs much like JS store apps do today. This can also be paired with Native Code which can also be exposed to your web site.So, native C++ or C# can be exposed to the DOM as a JS method. So that you JS can call native and native can return content to the JS.Also, since the Windows APIs are being accessed directly from the web site , stuffs like Notification and lock screen integrations will be easy enough to implement.

Lets build a small demo of Hosted Web Application




1.Creating a new JS Universal Apps

  

2.Two Changes and deleting the default files
1.Changing the Start Page to target the website you want to target
2.Adding a rule and stating that anything which is inside the link is a part of my app and anything which is not is web and needs to be handled by opening up in a new browser.

     3.And I have the Geek Monkey Studio app running as a Hosted Web App. The Code can be downloaded at http://bit.ly/1FfDnZx

There are couple more things to keep in mind while building the Web Apps.
The manifest of W3C needs to be followed while writing the Web App. Below is a clear picture of how it looks like.

I hope this article was useful and I wish to come up with more detailed articles about using Windows APIs and Web App Dev in Windows 10.Till then , Happy Hacking and

Building Direct Ink Experiences on Windows10

Pen and Ink in Windows 10

What is Pen and Ink?
Windows 10 brings in the most humanly form of Communication. The way this happens is by taking in the goodness of Inking as a form of communication with people inside an application.

Power of Digital Ink

 

This clearly means that the Ink can be sent as an Ink which means we can simply send this ink to anyone exactly as is. Any form of Metadata can be added for example search, wherein people can search with the Inking itself.Also, we can simply use the Ink and convert that into text or shapes then send it across as a medium of communication.

Here are two examples of Inking and then saving it in Word 2013 and  Then taken up in word 2007 to check the file consistency. Which is truly amazing and awesome.

 Figure depicts how much human form of inking is possible with Direct Ink

 

Another Example will be a Digitally Inked B’day card for a loved one

Direct Ink in Windows 10

Direct Ink is a family of technologies. The one of the most crucial feature of Direct Ink is it has the least latency. The software latency is minimized to make sure the user has a great experience on every device. The timing is although set to be 50ms to give a realtime experience.

This whole technology leverages the Direct X GPU. The Direct Ink keeps the responsiveness of the user thread alive while the whole workload is being taken by the GPU beneath the Ink canvas.

The whole idea of Inking is not this simple there are some comprehensive features which has made the Input and User Experience more fluid.

Pressure Recognition
 All the inking which is being done is to enable a more human interaction and connect the digital world with the traditional Pen and Paper world. The emphasis on words is very important and hence the Direct Ink has so much to offer. The Inking is of a Vector nature and hence has the capabilities of understanding where to put more emphasis on and although it varies from device to device the pressure recognition adds more life to what has been written.
The vector nature allows zooming into without distorting the image of the Inking.

Palm Recognition
Most of us drag our palm while we write something. The ability to detect the palm and exclude the palm from the actual inking is one of the crucial factors which has been implemented in the Direct Ink technology.

Implementing Inking on Windows 10

 

The InkCanvas Element
This is a Universal Control which can be utilized to make awesome experiences. So lets implement it on vs2015
Two main points
1.Take care of the Z axis
2.Make sure you make the background “transparent”


Lets make it up to Visual Studio 2015

                                                                               

SplitView Control – A New XAML Control VisualStudio2015

SplitView Control – A New XAML Control

The Introduction

The very idea of  SpiltView originates from the Navigation Framework inside a XAML application.The navigation framework was introduced since Silverlight.The major components of the Navigation Framework were
1.Frame
2.Page
The Frame here is much like the browser which was used to contain a page which can be navigated back and forth.Here, the Front forward stack and the Back Stack.
They supported series of methods namely
1.GoBack()
2.GoForward()
3.CanGoBack()
4.CanGoForward()

But often its only about the navigation which the developers are concerned about. This is why you have SplitView . SplitView helps us navigate with “type” and not the URI which we used to do in Silverlight. Also, we don’t have to care the physical location of the file as well. 

The Page
The page has the two methods
1.OnNavigatedTo(Param)
2.OnNavigatedFrom()
These two overridden method which help us to navigate and hence help us to interact with the page.
 Although there are few more things worth noticing in Page.NavigationCacheMode which are primarily concerns of if the page is supposed to be created again or the same instance of the page will be rendered.

 Jumping with SpitView

SplitView is there for navigation affordance which means this gives a smoother way to navigate with menus and making the UI more smoother and fluid.

Where Do you use a SpiltView?



Universally this is Also know as the “Hamburger Menu” because it has two pieces of bread forming a nice Big Boy burger . But yes, That’s the split view. It’s a menu which takes care of a tons of problems a developer has while transiting from one page to another or simply just navigating from one part of the app to another.

Behaviors of a Split View

 
 
SplitView on taping pops out a menu and shows different options. Although its not mandate to have the Split View respond to tap request.

Where do you get the SplitView from?

The new Segoe Font will have the SplitView. All these are vectors and are oriented to Windows 10 Style.

 

Application of the SplitView

SplitView namely has 3 Properties
SplitView.Pane
SplitView.Content
SplitView.PaneDisplayMode

Lets Talk in details about SplitView.Pane

Pane is where the developer puts in all the buttons which are either on the left or the right of the Application.The Pane will also take in what kinds of buttons are going to be available for tapping  in the application.

The SplitView.Content

The most important property is the Content property. The Content Property sits over the frame and gives a navigation affordance. The Content also gives us a lot of grip with the overlay on the UI.

The SplitView.PaneDisplayMode



Depending on if you SplitView is open  or closed we have the PaneDisplayMode has its property.

The Inline when set to true will give a jolting experice to user as the content will shift the SplitView opens up. In case of the overlay although the content will not shift ,It will simply have the splitview menu coming out as a flyer over the content. The CompactInline will have the capabilities of shifting the content to a large extent if the SplitView is set to true or just have a sleek thin outline when set as false. The Compact overlay will have the same properties like the overlay only difference is in both the cases of Compact Overlay there will be a slight shift of content.

Understading UAP and Building Universal Apps with Blend 2015

This article will be dedicated to Development of Universal Apps . Leveraging Universal App Platform and VS 2015 Blend.


Universal App Platform



This is a collection of Contracts and Versions which are a set of  low level APIs which is exactly against which a developer will be writing their Apps.Everytime one has Windows 10 installed they can go ahead and check out this file which will give them an idea about what UAP versions are supported to him.

Windows as a Service

This is exactly where the fun begins. The APIs in UAP are a converged set of APIs which are going to be the same irrespective of the platform of Windows or the Version of Windows the developer is trying to deploy.The APIs are nothing but the superset of the same which we used in Windows 8.1 . Now, since “Windows as a service” will have regular updates the developers will not have the issue to migrate their solution every now and then. They can simply, build against UAP and which is going to fit in just fine with all the upgrades .

Layout of Apps

The fundamental of  the laying the application has not changed . Although, there are few new tags but the Package.appxmanifest remains unchanged. There is just one single HEAD project, because since in Windows 10 we will targeting multiple platforms against one single Windows Core; there is no family specific binary for each of them.But yes, developers can choose to have multiple Heads can can easliy to go the shared project style , they totally can do that.

Laying out the Interface

The Xaml based UI remains exactly what it used to be. There has been major focus on

1.Reusibility
2.Quality
3.Value
4.Scalable
5.Accessible

Lets start by making a sample application using Blend and making the full use of UAP .

Figure1. Choosing the UAP and Changing the Name.

 Figure2. The XAML file

Figure 3. Choosing any device where I would love to run the App.


 

Figure 4. Adding an Sample Data Source to the App.


 

Figure 5. Dragging it to design where It can run on a runtime


 

Figure 6. The Sample Data source has been added and is ready for building and deployment



 

Figure 7. App is running on a Simulator 

Figure 8. App running successfully!

Exploring Blend and Merits of UAP
1.Blend now uses the same Visual Studio shell which enables the developers to have the exact same capabilities in terms of intellisense , auto complete inside and much more.
2.Blend has Data Management , Resource Management which are a few Unique things which Blend has to itself which have been brought forward to Visual Studio 2015.
3.UAP has made it possible to have one single binary across all the platforms of Windows.