locked
Trouble Understanding the Event model / Program Flow - feels like Spaghetti code.

    Question

  • Hi All,

    I'm trying to wrap my head around the best practices for building apps with WinJS, largely starting from the sample code and then reading the docs, but I feel like I'm missing something important.

    When you create a gridview-based project, you wind up with a page that has:

    1. An HTML file
    2. A page-specific JS file
    3. A data.js file

    In the examples, data.js is a hard-coded dataset, which is fine. However, I'd expect in most cases you'd want to load your data asynchronously.

    That would mean:

    1. The request for data would have to be initiated by the page, presumably on it's load event, right?  In the examples, the data is collected and grouped in data.js, so it's already ready for the page.   Assuming each view needs different data, and the data takes a while to generate, data.js is either (a) not shared, or (b) should not, ever initiate requests for data.  I'm assuming b.
    2. If #1 is true, what's the point of data.js using " WinJS.Namespace.define" to provide the data to the view?  In the real world, the view will have to initiate the request, and ask for a callback.  So, people probably shouldn't be using this at all, should they? 
    3. Data.js looks like spaghetti code to me.  It returns data, but it's *pre-grouped* for the view *including* the background colors.  There is no separation of concerns at all.  It doesn't make much sense.  So, I'm guessing data.js really doesn't represent a datalayer... which begs the question of what a good datalayer would look like, and at what point you'd inject things like the background colors for the groups.

    I have a feeling I'm missing out on some of the best patterns here, and if there's a good doc around it I'd love to check it out.  I feel like the boilerplate code may be encouraging bad practices.

    Tom


    • Edited by Tom Lianza Tuesday, May 1, 2012 9:10 PM
    Tuesday, May 1, 2012 9:07 PM

Answers

  • Hi,

    Data.js is a sample data source. We can treat it as a mock up. This helps us to focus on UI development when we don’t need to incorporate with real data. We can modify the sample data so its structure is the same as our real data. Once the UI is ready and we want to test against some real data (probably obtain the data from a service), we can just modify data.js so that it requests the service instead of using the hard code data. If we want a more flexible solution, we can create a method ReturnData. Inside this method, we can either return data from data.js or a real service (like a service locator pattern). Then all we need to do when we want to switch to real data is to alter this method.

    In addition, data.js assumes our application only need a single collection of data. If that’s not enough for our scenario (for example, each page needs different data source), we are free to create our own data source. Usually a project template only covers basic scenarios. A common approach in a more advanced application is to create a view model for each page, and the data sources in the view models.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, May 2, 2012 8:15 AM
    Moderator
  • I went on to find this example code, which was helpful in advancing my understanding of some better practices: http://code.msdn.microsoft.com/windowsapps/ListView-custom-data-4dcfb128
    Wednesday, May 2, 2012 9:29 PM

All replies

  • Hi,

    Data.js is a sample data source. We can treat it as a mock up. This helps us to focus on UI development when we don’t need to incorporate with real data. We can modify the sample data so its structure is the same as our real data. Once the UI is ready and we want to test against some real data (probably obtain the data from a service), we can just modify data.js so that it requests the service instead of using the hard code data. If we want a more flexible solution, we can create a method ReturnData. Inside this method, we can either return data from data.js or a real service (like a service locator pattern). Then all we need to do when we want to switch to real data is to alter this method.

    In addition, data.js assumes our application only need a single collection of data. If that’s not enough for our scenario (for example, each page needs different data source), we are free to create our own data source. Usually a project template only covers basic scenarios. A common approach in a more advanced application is to create a view model for each page, and the data sources in the view models.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, May 2, 2012 8:15 AM
    Moderator
  • I went on to find this example code, which was helpful in advancing my understanding of some better practices: http://code.msdn.microsoft.com/windowsapps/ListView-custom-data-4dcfb128
    Wednesday, May 2, 2012 9:29 PM