What is Project Spartan and is IE dead?

It is naughty & generally a bad idea to isten to rumours but around September 2014 & again early January 2015 you may have heard that Microsoft was developing a new browser with the code name Project Spartan.

However it wasnt until 21st of January 2015 at a Windows 10 preview event that Microsoft confirmed the existence of this browser and gave us our first peek.

Oooo but most importantly what does it look like?

Well we can’t get our hands on it yet so we are reliant on demos and Microsoft blog articles. Here is a picture I have taken from the IE blog of Project Spartan’s UI to give you some idea:

spartan

A nice clean simple UI that bears very little resembalnce to Internet Explorer.

Tell me about the new features in Project Spartan..

Well it is still very much in development but here is a summary of some of the new features we know about so far compiled from various blogs, the Window 10 video and tweets from IEDevChat:

  • A nice new clean UI that bears little resemblance to IE’s
  • Ability to annotate & comment on web pages (and PDF’s!) to highlight issues/impress your co workers with your cat drawing abilities
  • Spartan can save content for later viewing offline. This feature is also integrated into Windows reading list application & I assume can sync between devices
  • Reading view – a distraction free version of a page optimized for the reading of content. This feature was actually first introduced in the Metro version of Internet Explorer however you probably never noticed unless you had a Surface device as Windows Metro mode was er pretty horrible
  • Integration with Microsoft’s digital assistant Cortana. In the launch event a demo was shown where the user started searching for weather in the address bar & the browser showed a weather forecast specific for that users location.
    A more complex example was also shown where Cortana was aware the user was tracking a particular flight & automatically pulled flight status details when the user searched for the flight/airline
  • Updated F12 developer tools – you can see some of these great new features in the latest version of IE11
  • Fixes for over 3000 interoperability issues
  • Possibility of an extensibility model (or perhaps more accurately one you’d actually want to use!). @IEDevChat tweeted “We’re working on a plan for extensions in Project Spartan. Stayed tuned!”  and “Still building our plan for extensions, but we’ll share more once we have details”. Cant wait to see what they have planned & I hope it will be similar to Chromes model
  • Microsoft say they are working on implementing over 40 new web standards including support for accessing the dom using XPath syntax, Web Audio, Media Capture API, WebRTC 1.1, Touch Events, Content Security Policy, HTTP/2
  • Apparently IE preview has the best support for ES6 features at the time of writing
  • A new User Agent String containing various other browser identifiers aimed at making sites work that would previously have excluded IE by user agent sniffing (never a good practice)

annotation

Above Project Spartan’s annotation features shown at Windows 10 event

Spartan sounds interesting how can I play with it now?

Not quite. You can’t quite yet play with the new UI/annotation features as they are still cooking but you can see the new rendering engine in action by downloading a preview of Windows 10 at http://blogs.windows.com/bloggingwindows/2015/01/23/january-build-now-available-to-the-windows-insider-program/ & enabling Edge mode by opening up the browser and going to about:flags.

So is this the end for IE?

Jacob Rossi says “Spartan is the browser we expect people will be using on Windows 10”.

So for the majority of consumers in the future er kinda yes..

However this is not the full story.

Before I answer this we need to understand that browsers are actually made up of many individual components and subsystems. In fact it’s probably better if you head over to the IE blog here and you can learn all about what makes up Internet Explorer from the people that actually create this stuff – go on i’ll wait.

Internet Explorer in its rendering related system(s) contains a huge amount of code dedicated to providing support for legacy versions of IE all the way right back to IE 5.5.

As you can imagine maintaining this became a bit painful (and does anyone really need support for weird IE5.5 rendering issues – no you don’t) & can slow progress. With Spartan Microsoft decided to draw a line in the sand and based Spartan’s rendering engine on IE11’s standards support and went to work throwing out the older legacy rendering stuff (and a few other items such as vbscript that no one not even its mother will miss).

So in short Spartan is built upon the rendering & JavaScript engine of IE11 (and I guess some other components) but without the old legacy stuff.

The result is a great standards compliant platform with an awesome JavaScript engine to build upon going forwards. Microsoft are referring to this new rendering engine as EdgeHtml.dll.

But what about backwards compatibility? glad you asked let me tell you about Spartan’s dual engine mode..

I work for a bank/government agency and am worried about backwards compatibility!

To support legacy applications Spartan operates in dual engine mode and transparently switches (it is unclear what triggers this) between using the new engine & the old Trident/MSHTML engine for legacy sites.

Internet Explorer will also be made available on Windows 10 to support those guys that have built applications on top of IE’s extensibility models toolbars/ActiveX etc (you poor brave fools!).

It looks like it is still to be decided if IE will be hidden away in order to encourage Win 10 users to move to Spartan. For example in a reply to a tweet regarding if IE will be part of Windows 10 @IEDevChat replies that “We’re evaluating different approaches, but our intent is for ppl to use Spartan unless they have specific compat needs”.

Can you force EdgeHTML rendering on intranet sites?

Yes. “You can get EdgeHTML on intranet using x-ua-compatible if intranet sites are set to use compat view.”

Why can’t Spartan/IE just use WebKit/Blink as its rendering engine – my life would be much easier?

Well maybe but having no completion/a mono culture is a very bad thing for a number of reasons.

Christian Heilmann (probably best known for his work at Mozilla but now working for Microsoft) answered a comment on Jacobs article similar to this with:

“The fact of the matter is that in order to have a standards based web, we have to have different browser engines to test standard proposals against. Having a WebKit only web would be as disastrous as having an IE6 only web or a Gecko-only web. Any engine that has no competition will deteriorate over time – no matter if it is open or closed.”

And I would certainly agree – competition and different is good and drives the web forward & stops one organisation having control over the webs direction.

Will Spartan auto update?

Yes Spartan is “Evergreen”.

Which operating systems can I use Spartan on?

Initially Windows 10 & Windows Phone 10. Remember that Win 7 updwards users will be able to upgrade to Windows 10 for free so there is really no excuse unless perhaps you are in Corporate world. Microsoft said regarding potential cross platform support in the future: “No current plans, we’re focused on making it great for Win10.”  and “Spartan is currently targeted at Win10. We’re focused on getting ppl upgraded (free) but will watch Win7 demand”

Will Spartan use vendor prefixes?

It will likely still contain some but these will be discouraged. “EdgeHTML engine will have a lot of ms prefixes removed; we want to use prefixes very sparingly if ever”.

Were there perf gains from removing the old rendering stuff?

“Yes. The disk size of the engine itself is decreasing and general web page performance has improved by various metrics, including JS perf. Preview builds are notoriously not our best foot forward with perf though, but you should see good things already and we’re not done yet.” Jacob Rossi comment http://www.smashingmagazine.com/2015/01/26/inside-microsofts-new-rendering-engine-project-spartan/

Which IE engine will web driver use?

The new Edge engine. John Jansen in a comment at http://www.smashingmagazine.com/2015/01/26/inside-microsofts-new-rendering-engine-project-spartan/ said:

“We are definitely committed to the Edge engine with WebDriver. We are still working out details about how it must work, but it should never randomly switch between them for no apparent reason. I expect that you will be able to test your internet sites or intranet sites in ways the very closely mimic the actions a real user would see and do”.

Upon release will the browser still be called Project Spartan?

If history is anything to go by Microsoft Marketing or whoever names MS products has a consistent ability to remove cool names so probably not.

I am a site developer what does this mean for me?

You should continue to develop your sites and applications using current standards and everything should be marvellous.

Will Spartan be integrated as closely integrated with Windows as previous versions?

Personally I hope not & in an ideal world I would like to see it possible to run Spartan entirely off a USB stick. I have my suspicions that Spartan may have some deep links given it integrates with Cortana, Sharing of comments, Reading list etc but guess we will have to wait and see how this will work.

Additionally in previous versions of IE many products took dependancies on IE components e.g. Outlook utilized it for rendering HTML email. Having these dependancies may have slowed development as the IE team would have had to be careful not to break these applications reliant on these components.

It is also worth noting that as Spartan updates automatically updates should not be quite as big a deal as they were previously so maybe if there is a close Windows integration it wouldnt be such a problem.

What new HTML/CSS/JavaScript features will Spartan have?

Head over to staus.modern.ie for the most up to date view.

When will it be available to use?

No idea.

Further reading/watching

You can watch the full preview event at http://news.microsoft.com/windows10story/. Note if you just want the Spartan related stuff fast forward to an hour in 🙂

https://twitter.com/iedevchat
http://blogs.msdn.com/b/ie/archive/2015/01/22/project-spartan-and-the-windows-10-january-preview-build.aspx
http://www.smashingmagazine.com/2015/01/26/inside-microsofts-new-rendering-engine-project-spartan/
http://www.aaron-powell.com/posts/2015-01-25-project-spartan-and-internet-explorer.html

jQuery mobile experiences

Mobile optimized website projects seem to becoming increasingly common so I thought I would summarize some of the advantages & disadvantages we have experienced with using the JQM framework (jQuery mobile http://jquerymobile.com/).

But why would you use such a framework in the first place?

Well you certainly don’t have to (and in many cases probably shouldn’t) but JQM:

  • Tries to take care of various niggly display issues across multiple types of devices
  • Provides an abstraction over various events e.g. rotating a device, swipes etc
  • Takes care of history management
  • Gives you various controls similar to what exists in an iphone (because in my experience most clients seem to think a mobile site should look like an iphone app – websites are different from apps grrr – anyway moving on..)

Good things:

  • Our app on the whole displays pretty well across multiple device types with little effort e.g. iphone, ipad, various android devices & win phone 7
  • Was very quick to get up and running with JQM
  • Our brief was to copy existing iphone app and we were able to do so pretty easily
  • JQM has good documentation and examples

However we also encountered a number of issues with the framework.

Bad things:

  • JQM mobile leaves other pages in the dom (even multiple copies of the same page) which means you need to be careful with giving all selectors a context. There doesn’t seem to be a way to disable this apart from turning the ajax loading off which removes one of JQM’s biggest benefits of hijax loading
  • JQM interferes with the event model and a couple of “standard” jquery type methods such as event.preventDefault don’t work properly
  • At times JQM feels sluggish (apparently this is due to delays in place to handle taps for various device types)
  • JQM interferes with markup and adds its own styling & elements. Most of the time this is fine but we had a couple of pages that crashed ipod touch devices and iphones. This seemed to be related to number of dom elements on page
  • JQM seems to queue touch events so if you rapidly click the clicks seem to be queued up when you return to a particular page
  • Its v1 so there are a number of bugs in it

I am not sure if I would use JQM again because of some of these issues – towards the end of the project I felt we were fighting the framework. Much of the functionality e.g. transitions wouldn’t be too tricky to develop yourself. It is however excellent for small projects particularly if most of your pages are static content.

Image Optimizer extension for VS2010

I came across a nice free extension for Visual Studio 2010 for quickly optimizing images within Visual Studio IDE. Image optimizer uses external services such as smushit and PunyPNG to reduce the file size of your images with no visible loss of quality. As this results in less downloads for your users it’s a bit of a no brainer to implement.

To install the extension open Visual Studio and go to Tools, Extension Manager, Online Gallery and search for Image Optimizer and then click Install.

Once the extension is installed you can right click on a folder and select Optimize Images to have all the images in the folder optimize (check the files are not read only/checked out otherwise you will get an exception when the add on attempts optimization.

Once Image Optimizer has finished optimizing the images it will give you a summary of how much it has reduced file size by. Below shows the output from a recent project:

14 skipped. 142 optimized. Total savings 57.27%