Developing Metro Apps in HTML and JS
Join the DZone community and get the full member experience.Join For Free
Last Friday I attended the first Windows 8 developer day in Belgium. It was a
great opportunity to learn a bit more about developing Metro apps. One
of the demos given by Giorgio Sardo showed how easy a HTML 5 application
could be copied and pasted into a Metro app without having to rework
even a single line of code. At first sight this looks pretty amazing,
but I got me thinking.
The first thing I noticed is the fact that the HTML 5 application was
actually a game. That is one of the reasons it could be easily ported to
a Metro app. If we would want to port a business app like an e-commerce
site, that wouldn’t be so easy. One of the important issues when
developing Metro apps is the design. The philosophy of Microsoft when
designing an application is that all applications have a similar look
& feel and should react on the same way.
Almost all websites are designed for a single resolution and that is in
contrast with the Metro philosophy where all apps should optimize their
viewport for every screen. This means you’ll have to redesign your
application so it changes its content to fit to the screen. Also you
should implement the capabilities to change the view depending on the
position of your device (landscape or portrait mode) and the multitask
options which allows you to run multiple applications side by side.
Next to the Metro design these Metro apps should at least have some specific windows 8 features like redefined search and sharing capabilities. It's only at this point you really start to take advantage of some of the new windows 8 features. But the most important thing you should implement is the live tile. This must engage the user to consume your application. You can do this by providing the user real-time information about your app.
A second consideration is the fact when you just copy and paste your web
application, you don’t take advantage of all the possibilities present
in WinRT. With WinRT you can make calls to the operating system. For
example you can access the webcam, save a file to the file system; share
namespace. In here we find the Promise object that enables an easy way
for the developer to handle asynchronous calls. Because all calls that
take more than 50ms are preformed asynchronous by default, this can come
in handy when you are making WinRT calls.
After the theoretical part, it was time for the real work: an
App-a-thon. Here we got the possibility to put all our theoretical
knowledge into practice. Together with 4 RealDolmen colleagues (Maarten Balliauw, Xavier Decoster, Wesley Cabus and Angelo Trotta) we developed a metro Nuget Package Explorer.
This allows the users to view NuGet repositories and their package
details. All this information gets retrieved from the given feeds and
gets stored in an IndexedDB for performance. The application is
Surprisingly, developing this application went pretty fast. I took some
time to adjust to the fact your writing a client application with
reused pretty easy. There was one thing we were struggling with. When
working with the promises you have to be very careful to call objects in
the UI-thread, otherwise you can get some strange exceptions.
After a whole day Windows 8, I was really excited to start develop metro
apps. Enabling developers to develop a metro app in HTML/JS was
definitely a good choice Microsoft made. This way a whole new group of
developers can start building Metro apps. But the business has to be
aware that you can’t just copy and paste your web app in a Metro project
and call it Metro app. Metro apps have a philosophy and that should be
respected. Also it would be a shame if you wouldn’t take advantage of
all the new features that Metro apps provide.
I’m looking forward to the next app-a-thon and hope that our team can
come together again to win the contest this time. (Ended second last
Currently I’m trying to port our Linq2IndexedDB project to use the WinJS promises instead of the jQuery promise. I hope to announce this feature in the near future.
Published at DZone with permission of Kristof Degrave, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.