Ninja tips and tricks and good coding practices in creating Metro style apps. RRS feed

  • General discussion

  • Hello everyone!

    What are some good practices to create clean and readable code in Metro style apps?

    Take for instance the placement of templates; where should they go to maximize maintainability and readability? Some alternatives are:

    • In a separate file.
    • Where they would appear/be rendered in the HTML document.
    • At the bottom of the HTML document, or at the top.


    Separation of code (JS) and design (HTML):
    In general, is it better to write templates to generate/render HTML elements dynamically rather than creating them in JS (thinking of document.createElement(“div”))?


    Do you have any secret ninja tricks or tips that make you create Metro style apps faster/better/more shiny?

    Wednesday, July 25, 2012 6:26 AM

All replies

  • I would first say, check out my book :) http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx I try to put lots of little tips and such in there (and more will come with the next preview...)

    To address your template questions, the key thing is that if they're declared in markup, they need to occur prior to any other element or control that references them, meaning that they need to be in the DOM or else the referencing controls won't find them and might fail to instantiate. This is why they're typically in the same file as the controls that use them and appear before those controls.

    Whether you use a markup template or a function that does the rendering depends on your requirements. In a number of cases you must use a rendering function rather than a declarative template, otherwise you don't have the needed control over the details. Check out the ListView Optimizing Performance sample (and Chapter 5 of my the book in the next preview will go into this) for many examples.

    Other than that, here's a short list of considerations that make an app really work well beyond its visual design:

    Stuff that's really necessary:

    • Handle all view states: handle portrait, snapped, filled along with landscape.
    • Handles resolution scales well, both display sizes and pixel scaling.
    • Work with mouse, keyboard, and touch input, the latter of which means that touch targets need to be the right size.
    • Move chrome/commands off-canvas, generally
      • Search to Search charm
      • Sharing functions to share source, though you may retain what you have as it’s integral to the experience
      • Settings to Settings charm including logins and profile management
      • Other commands and navigation to app bars
    • Handle suspend/terminate/restart and suspend/resume well (being sure, for example, to refresh anything that might have gone stale on resume)
    • Use page controls to navigate
    • Have a great splash screen and branding graphics

    Things that are nice to do but not as critical:

    • Handling network connectivity or lack thereof (caching strategy/offline story)
    • Network cost awareness (for large transfers primary)
    • Provide live tiles
    • Design a roaming experience—what settings transfer to the user’s other devices?
    • Good use of progress indicators when transitioning pages.
    • Honing performance especially if using collection controls (this is the stuff with templates, especially, but also listview incrementalLoading and randomAccess behaviors)

    For apps in JavaScript, finding perf-critical pieces of non-UI code that could be implemented as WinRT components will help improve performance. Being mindful of memory consumption and CPU demand will help make an app use less power, e.g. not using superfluous animations or running JS timers for that purpose as opposed to using CSS transitions and animations that will run in the GPU. Making sure, also, that back-end services you might be employing can provide you with the assets you need for a great user experience is also important--e.g., can it provide the image sizes you want, especially across resolution scales?

    There are other specific tips when you get to certain details, but that's one reason I'm writing a book :)


    Wednesday, July 25, 2012 8:52 PM