//Build/ tour bangalore

The sum up of //Build/ Bangalore

This is where I will be sharing my experience of long waited Build ’15 where we had many interesting topics to spice up stuffs before Microsoft officially releases Windows 10 for regular users.

Let me jump with the starting of how it started and the fellow teammates I traveled with. It was on June 10, 2015 when 3 people from Geek Monkey Studios(Abhishek , Pooja and Myself) went to Leela Palace to start experiencing the flow of Build. The whole idea was to give the developers a very clear idea about the areas which Windows 10 will target and Microsoft goals with Edge as well.

The Sessions
Keynote was by  Pete Brown who talked in details about how the computing platform has evolved over the decades and how Microsoft will be looking towards it in near future. He talked in depth about the new IDE and Dev tools, the new browser and the HoloLens. The IoT was kept in focus as it’s the next big thing in terms of computing and Pie 2 along with Intel Galileo Gen1 extends the support of Windows 10 as IoT computing platform.In the later half he showed a really cool demo on IoT using Pie 2.

The Azure cloud platform was taken by Neil Huston where we got to experience how fast the cloud is evolving and how much more we can rely on Azure as a Cloud Platform. The power of ML , Bigdata , Hadoop has really extended the ecosystem and its not very hard anymore to experiment with these. There are few other stuffs as well, this includes the Stream Analytics and the Service Bus on Azure which can be used for data analysis and talking to IoT devices in realtime seamlessly in a hassle free manner.

The Universal App Platform was given by Kiran Kumar where we got the in depth of the new App Model which developers can start hacking on. This is the new, fresh and there are immense set of opportunities which will empower the developers to write apps from one windows platform and run it across any windows 10 builds. The developers can leverage the converged model approach and make something really wonderful with it. There are also a new section of applications which has been announced “ Hosted Web Apps” this means that any website can be deployed as an application and this requires no extra developmental skills because it can be done by the JS UAP from Visual Studio 2015 RC.

The Web was taken by Sen Chauhan , this was the most interesting topics as he walked us through a journey where we saw how the web has evolved and how the new Edge will surpass the web standard web experience and we can make the most of it. The new features and the specs were covered as well. The underlying difference of IE with Edge was focused on.

It was one hell of a experience when today and I will be sharing more on TechNet Wiki by talking about the new experiences and technologies.

Adaptive trigger for XAML UAP Development

Adaptive trigger for XAML UAP Dev

The major focus this article will have is how to have the developers build great UX for the Windows 10 applications. This requires us to perform the best practices which we have been doing for decades as Web Developers. The Web Developers had to encompass so how to render pages in different kinds of screen sizes and devices.
Now in Windows 10 UAP app dev, the app just has one binary which potentially means that the app has to run on all sort of devices. So the UI has to be adaptive such that app can get rendered in all types of screen sizes which means from a small phone screen to a surface hub of 85 inches. So there has to be some practices which will help us achieving the goal.

The offerings of the XAML Toolbox

XAML views is a type of feature which ensures that the XAMl will be broken down into multiple parts while the developer still has one single code behind. The usage of this can leverage the app dev the power of how to share the particular XAML to tester or any other developer and hence ensuring better quality. Also, this is one of the major parts where we can start building our own apps in a better and simplified manner.

XAML RelativePanel ensures that the XAML tree will be more organized and this means that each child will be rendered relative to the all the other children. The adaptive story begins from here and hence is going to be a big thing.

Now, having said all the above there the very important point here is the fact that the developer doesn’t need to bother themselves with any of the rendering stuffs. The whole process is being automatically given by VS2015RC with Blend under the hood.

Visual State setters and triggers

The point before was to animate everything mostly using Object Key Frames when we wanted to go from Collapsed to Visible.But there was nothing in between collapse and visible.Now we have setters to do they work and simply eliminate the animation.
Triggers on the other hand will give the developer control on when will the VisualState when the MinWindowWidth or MinWindowHeight is set to any given value.

Demo

I will be walking through a small demo how to make the full use of such the VisualState.StateTrigger and see the experience.

I will be using Blend 2015.

Creating a New Project

Adding new assets[rectangle]

Creating three Visual States and then placing the rectangles wherever I want them to look like in that particular video state

Renaming Visual State to ensure that we have different Visual State for different screen sizes to use it

Setting Visual State for Phone and likewise for Tab and Desktop.

And we have the dynamic UI rendering with Adaptive Triggers.

Hope you had nice time reading the article. Thanks for your time and patience.

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