Last couple of months has been heads down into our next app; The app is more involved app with authentication, backend service etc. I have not been able to find time to write blog. Today, I thought of resurrecting again. Here is what we are going to do. We will go over WinJS over next set of posts – as a winjs 101 for developer.
ui-dark.css/ui-light.css : css provides the way to declaratively style a html web page. css is available to style winjs applications. This file contains the default style rules for the windows controls. MSDN documentation of the WinJS controls will document the css classes that can be used to style them. For example – refer styling of listview control here. Typical web developer will not need introduction to css. If you are not a typical web developer, css introduction here helped me in past. Do not try to go through this file at beginning, it might be intimidating. It is like seeing disassembly of a .net assembly. Ctrl+f in this file will be of most help during first few days when documentation does not help getting to css classes for a winjs control.
ui.js: this is the ui part of the wijs lib. All html 5 controls (rather all documented to be supported by IE) can be used in winjs app. There are subtle differences in support when used in native modern app vs IE. At meta level, you can think of using html/DOM to build UI without getting into details at the onset. If you are web developer, you get to leverage all your knowledge of native html controls; listing of all controls here will make you happy.
Going back to our winjs lib node in picture above, you will find string resource files below en-us node. ui-dark and ui-light.css provides different style for light and dark theme. your application will use only one of them.
Before we close on this: Why WinJS? You will the right person to make the choice for your project. I will share few of my observations:
- Are you a web developer that have sound html/css/js skills and need to code a windows store app? WinJS based application development will surely help to leverage your skills. At the same time, do not think you can get around without any additional learning curve. There are windows specific nuances. but again, you will certainly have better jumpstart here than in going with c# and xaml.
- Are you are developer that have sound c#, xaml skills? yes – then certainly, windows provides default path of using xaml & c#. That will align well and give you good jumpstart. Should you think even once of learning html/js/css way of building the windows store app? Ask yourself do you want to get exposed to html/js/css. These skills are likely more transferable to other web/mobile development platforms. They might help you in the long run and good to have these skills in your arsenal even if you are a old timer solid dev. At the same time, do expect a learning curve of 6 month even if you are a Pro in c#, xaml, ms technologies; this is assuming that you have no exposure to css/html/js.
- If you already have sound html/css/js knowledge – using this library do help for windows store app dev.
- html/css/js skills are transferable to other web/mobile platforms. This will also come with disclaimer that winjs apis or windows api knowledge development will be key and require investment of time. This knowledge won’t be directly transferable to other platforms.
- if you are building application that falls in integration category – what I mean, the application falls in category of building a native windows experience for one or more web services. json/ajax- provide a loose / lightweight way to interact with services; winjs might help.
- for a specific project, you may want to pilot to verify that framework suffices your needs. There is certainly difference in controls available in xaml vs winjs.
- winjs won’t provide two way binding by default. I wrote a naïve two way binding impl. sufficient enough for our current needs.
- in sum total, I would say staying with html/css/js stack was the biggest motivator to stay with winjs.