As the first log item, I’m going to focus on setup and initial concepts. Here I’ve listed a few topics worth looking into before beginning or during the initial stages of development.
Get the goods
The Windows Dev Center has become my new home. One of the issues while working through preview technology is that it’s of course ever changing. Searching on the web can easily bring up deprecated answers, so the WinRT and WinJS API has been the place to verify the answers given. On the UI side, the IE10 guide has proven helpful determining which aspects of CSS3 are supported.
Originally I was downloading them individually, but the all up Sample pack is a great way to see and run sample code. In order to search the samples though, I still use the Samples search on the site, and then find the sample on my local drive by title.
Using multiple monitors is an obvious recommendation, but for Win8 development I would classify it as a requirement, especially when working on the UI. Similar to development for different devices, you are building an app for one environment (Metro app) using a program in a different environment (Visual Studio in Desktop). It’s a big context switch and with a separate monitor you gain some great debugging and analysis capabilities using the DOM Explorer that comes with Visual Studio.
On the left you see the screen running Visual Studio displaying the DOM Explorer, on the right screen you see the Main screen where the Metro app is running. The #content div is selected showing the CSS rules currently applied on the DOM explorer and on the right screen you can see the div selected. It’s like Firebug built right in.
Not only is it useful for debugging and testing CSS rules, it’s also a great way to see the HTML that the WinJS custom controls are outputting.
Even more useful for CSS editing is Blend Interactive Mode, which I’ll cover more in the future, but for now I just wanted to mention it and point you to a video showing it off. I think you could do a whole video on it, but there’s a short clip here around 33:20.
Going into these projects my goal has been to use as much of the WinJS Framework as possible. Not only is this a great way to learn the new technology but I also wanted to use the framework with the most interest in working well on the pre-release platform.
I did an experiment porting over a single-page jQuery-based app into a Win8 Metro app and most of it worked without modification. The main thing I ran into was code security restrictions around how and what elements are added dynamically to the page. Check out details for toStaticHTML and Features and restrictions by context for more details on what isn’t allowed and how to restructure your code if needed.
This will clue you in on Namespaces, Classes, Property declaration, using mixins and handling DOM events. This helps bring a little of that C# feel to JS and as a bonus Visual Studio will provide intellisense for your Classes.
Single page app vs WinJS.UI.Pages
I initially got this wrong when I first started coding with WinJS. After Silverlight 4, I moved over to HTML5 app dev and became familiar with a single page app pattern. In most cases, once you instantiated an object representing a section or sub-page of the app, it was there until you told it to go away.
In WinJS, the project templates and documentation lead you towards the Pages namespace, for a good reason. Loading sections of your app dynamically rather than a top-level navigation avoids the page refresh, loss of context and linear history.
When working with Pages though, the page loading is much closer to something like Windows Phone 7. You load an initial html file with a designated “host” div, which acts as the frame or container. Then an instantiated Page object is rendered in the “host” div. This method combined with the Navigation namespace allows you to track history and provide “go back” functionality.
For a full walkthrough check out this Using single-page navigation tutorial.
Once figured out, the Fragments/Pages/Navigation namespaces can be very helpful in organizing your code and making it more modular.
@adkinn So if I grok WinJs.Promise, then(), done() ?
— AndyBeaulieu (@AndyBeaulieu) May 9, 2012
(If you don’t follow Andy, you should. Not only does he deliver geeky jokes, he’s clever guy who is on the ball with creating UIs and adding physics for fun.)
Windows 8 is “Fast and Fluid”! And how does it do that? By making the UI take full advantage of asynchronous functions. Tap a button, send a worker off to do the work and entertain me visually while I wait. Help me keep my confidence that you didn’t freeze by providing some type of animation or feedback.
Learn to love and use it well and your users will love you.
VS2012 Quick Launch
Although not a core technique needed for getting started, I learned about the Quick Launch in VS2012 this past week. The feature allows you to “quickly search and execute actions for IDE assets such as options, templates, menus”.
For example, open Visual Studio, hit Ctrl+Q and type “line numbers”. Hit enter and the Options window is opened for you with the current node selected showing the option to turn line numbers on or off.
That’s pretty quick. Nice work VS team.
The wireframes came in for the new project, so this week we’ll be starting on the UI layer. Windows 8 RTM appears to be faster than the Release Preview, and I’m looking forward to testing that with some heavy dev work.