Share via

Windows 10: Project Spartan For Developers

  • Article

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 Interoperability: 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.

http://2.bp.blogspot.com/-VL_Oryaa5EU/VWlCkIi7KzI/AAAAAAAADC8/_s_lIsMU7Ck/s320/Screenshot%2B%252893%2529.png

 

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.

http://1.bp.blogspot.com/-hJQEsmGwycw/VWlC2uPd9RI/AAAAAAAADDE/-2Sq_TUpRBM/s320/Screenshot%2B%252892%2529.png

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 th is 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.

http://4.bp.blogspot.com/-kmenSWEopXU/VWlDKcSHgkI/AAAAAAAADDM/SsoP6zPtBlU/s320/Screenshot%2B%252894%2529.png

 

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

 http://3.bp.blogspot.com/-vqEBZSn9Vb4/VWlDg_cBG5I/AAAAAAAADDU/uh-4mEOzee4/s320/Screenshot%2B%252896%2529.png

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.

http://4.bp.blogspot.com/-x4Ib_s6Pd8M/VWlEJh3I7_I/AAAAAAAADDc/4iU6KRhDuF0/s320/Screenshot%2B%252898%2529.png

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.

 http://4.bp.blogspot.com/-9ZuY_mCAsAc/VWlEy0LQrnI/AAAAAAAADDk/HmBWnpUC3h0/s320/Screenshot%2B%252899%2529.png

 

Minimizing the difference between Web and WebApps

 http://3.bp.blogspot.com/-4l7IS3yqyfw/VWlFdSRpe4I/AAAAAAAADDs/OyY-ShurVoU/s320/Screenshot%2B%2528100%2529.png

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.

http://3.bp.blogspot.com/-v0pwDUSf0YA/VWlFyeYT9qI/AAAAAAAADD0/feeAZ3JJDcA/s320/Screenshot%2B%2528101%2529.png 

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

http://4.bp.blogspot.com/-9xdjsoWcd6Y/VWlGGTca4XI/AAAAAAAADD8/Hpjc9u9S8-A/s320/Screenshot%2B%2528103%2529.png

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.

http://3.bp.blogspot.com/-lVXj_2TqZA8/VWlGZNOFmHI/AAAAAAAADEI/MXkK4Ia9qto/s320/Screenshot%2B%2528105%2529.png

Demo

Lets build a small demo of Hosted Web Application

Creating a new JS Universal Apps

http://3.bp.blogspot.com/-CKcT_7W3UK4/VWlG_PwqAmI/AAAAAAAADEM/N8_aLd7K4i8/s320/Screenshot%2B%2528121%2529.png

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.

http://4.bp.blogspot.com/-11nuVyWF5YQ/VWlHcnIh8-I/AAAAAAAADEU/hZ2B3sw042w/s320/Screenshot%2B%2528116%2529.png

And I have the Geek Monkey Studio app running as a Hosted Web App.

http://2.bp.blogspot.com/-8ANKsQh-Zhs/VWlH7JK4nUI/AAAAAAAADEc/Mps6qedH71c/s320/Screenshot%2B%2528111%2529.png

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.

Downloads

The Code can be downloaded at http://bit.ly/1FfDnZx