Microsoft has a long and storied history in the field of web development. After Internet Explorer (IE) effectively won the first ”browser wars“ of the late 1990s and early 2000s, development on IE stagnated. IE6 was released in 2001 and quickly amassed 90% of the browser market share at that time — but IE soon received a poor reputation because it was not updated to support the newly emerging web standards in the years that followed. The subsequent ”browser wars“ of the late 2000s, coupled with the introduction of mobile devices, quickly eroded IE’s dominant market share.
But in recent years Microsoft has fought hard to improve its reputation as a leader in the tech community, specifically under the banner of HTML5. Microsoft first began touting the benefits of HTML5 back in 2010, and soon added their first HTML5 features in IE 9.
As a developer excited by all things HTML5, I jumped at the chance to begin building Windows 8 applications. I even spoke about creating Windows 8 applications with Ext JS at SenchaCon 2013… but I quickly discovered how Windows 8 apps built with HTML5 were very different from those running in a browser.
Fast forward to 2014, and Sencha has released Ext JS 5. Among the many new features is a little known improvement that makes building Windows 8 applications completely seamless. Let’s take a quick look at how Windows 8 applications are different from basic web apps, and then dive into how Ext JS 5 makes it easier to develop Windows 8 apps.
Windows 8 Applications
Ext JS 5.0.1 and the ext-win8 Package
With the recent release of Ext JS 5.0.1, Sencha has committed to making Ext JS comply with the Windows 8 security policy. This process involves two important parts:
- We created a special Sencha Cmd package containing the configured hook (ext-win8) that is incredibly easy to install.
As a result, you can build native Windows 8 applications using Ext JS, just as you would any other web application.
To install the ext-win8 package, simply add ”ext-win8“ to your application’s app.json file under ”requires“.
//… "requires" : [ "ext-win8" ], //...
Then use Sencha Cmd to refresh your application:
sencha app refresh --packages //or sencha app build development
Sencha Cmd will then download the ext-win8 package from our CDN and install it into your machine’s local repository (e.g. /Users/arthurakay/bin/Sencha/Cmd/repo/pkgs/).
As part of the refresh/build process, Sencha Cmd will copy ext-win8 to your application (or workspace) and rebuild your application’s dependency chain, ultimately including the necessary Windows 8 hooks.
Watch the following short video to see how it all works:
The sample application from the video is also available on GitHub.
By embracing HTML5, Microsoft has opened new doors for developers and provided access to new markets for HTML5 developers. Equally important, Microsoft has shifted from laggard to leader in HTML5 support—and in so doing has signaled strong support for the idea of multi-device, multi-platform, universal apps.
With Ext JS 5 fully primed, now is the time for developers to take a fresh look at the Windows 8 platform to evaluate how HTML5 creates new options for their businesses and their customers.
Hi Arthur thank for sharing this article, I have a doubt, I try to test your demo on Window8 and I get the message that I have to Update to Window8.1, so it work for Window8 ?
Arthur Kay says
Frank – I didn’t run into that, but this package should also work on Windows 8.1. If you run into any problems, please post a thread to our forums and then paste the link here so I can look into any bugs.
Hi Arthur I was testing this app in window 8.1 with visual studio and work ok, but I have a doubts, first one:
which is the difference between use this approach and use Sencha Desktop Pacakager?
How I can run the application outside the visual studio, I didn’t find .exe when I deploy, any hint?
I want create a shortcut and run the app like native app
Arthur Kay says
I’ve tested this package on the latest Windows 10 preview – and it also asks me to update the Visual Studio project to “Windows 8.1”. Doing so, everything still works perfectly!
The difference between this approach and building something via the Sencha Desktop Packager is that this approach gives you access to the native Windows APIs – not just whatever the SDP exposed.
And I’m not 100% sure what the output file looks like. I believe via this approach there’s some hook into the Windows Store, but inevitably there’s an EXE file somewhere. I didn’t take my exercise that far :-)
I have sencha project its working perfect on and i am able to run it on my windows8.1 machine but the only problem that my css files are rendered in the screen,and the same app running properly in google chrome browser.
I have a sencha project i have followed the same steps what you have mentioned and my app running in windows8.1. But the problem in my app there css which is using webkit prefix so my app not rendered as expected how to solve the issues.
-> The same project woking in android
-> But Not in windows8.1
-> Any idea how to solve this css -webkit problem
I have sencha touch project, and I succesfully published the app on windows phone store. It is possible tuo build an app also for windows store? Or I have to port the sencha touch project into sencha extJS? I tried to compile with cordova, only using “cordova add platform wndows” instead of “cordova platform add wp8”, it works, it creates the solution, but then if I starts the app, it doesn’t work, and I have not speaking errors.
This is the best way we can have it now.