[ 6 posts ]

clint

  • Username: clint9090
  • Joined: Tue Aug 07, 2012 1:08 pm
  • Posts: 2
  • Offline
  • Profile

todomvc.com and YUI

Post Posted: Thu Aug 09, 2012 1:33 pm
+0-
Hello,

I've noticed that the example YUI implementation at http://todomvc.com/ uses the following to segregate and load the components of the app:

Code:
        YUI({
            filter: 'raw',
            allowRollup: 'false',
            groups: {
                'todo-mvc': {
                    base: './js/',
                    modules: {
                        ...
                        'todo-app': {
                            path: 'app.js',
                            requires: ['app', 'todo-list', 'todo-view']
                        }
                    }
                }
            }
        }).use('todo-app', function (Y) {
            var app = new Y.TodoMVC.TodoApp();
        });


...and then within each component/module they also do this:
Code:
YUI.add('todo-app', function (Y) {
    ...
}, '@VERSION@', {
    requires: [
        'app',
        'todo-list',
        'todo-view',
        'node',
        'event-focus'
    ]
});


I have two questions:

1) is this a good pattern?
I ask because I'm building a rather large app that's comprised of several models, lists, views, and I like the separation that this provides, but I'm a bit worried about adding all the js calls to the request traffic.

2) is it necessary to define the "requires" list in both places? If not, where is the best place to define the list?

Thanks!!
-Clint

John Lindal

YUI Contributor

  • Username: jafl
  • Joined: Mon Nov 02, 2009 2:33 pm
  • Posts: 352
  • Location: Los Angeles, CA
  • Twitter: jafl5272
  • GitHub: jafl
  • Gists: jafl
  • Offline
  • Profile
Tags:

Re: todomvc.com and YUI

Post Posted: Mon Aug 13, 2012 8:02 am
+1-
1) If you want to split your code up into modules, then this is the only way to do it. To minimize the network traffic, you should run a combo handler. Ryan Grove built a simple one for running inside your NodeJS process: https://github.com/rgrove/combohandler . I built a heavy-duty one: https://github.com/jafl/YUI-3-Stockpile

2) I think you only need to put the requires in the module definition.

clint

  • Username: clint9090
  • Joined: Tue Aug 07, 2012 1:08 pm
  • Posts: 2
  • Offline
  • Profile

Re: todomvc.com and YUI

Post Posted: Mon Aug 13, 2012 10:11 am
+0-
Thanks John!

1) I haven't worked with node yet, but this might be a good opportunity to get my feet wet.

2) That's the direction I was leaning, but as I understood it, Eric Ferraiuolo worked with Addy Osmani to create the todomvc yui example, and they've got it defined in both places, hence the confusion.

Thanks again!!!

Eric Ferraiuolo

YUI Developer

  • Username: ericf
  • Joined: Mon Jan 12, 2009 8:26 pm
  • Posts: 380
  • Location: Boston, MA
  • Twitter: ericf
  • GitHub: ericf
  • Gists: ericf
  • IRC: eric_f
  • YUI Developer
  • Offline
  • Profile

Re: todomvc.com and YUI

Post Posted: Tue Aug 14, 2012 8:44 am
+0-
Yeah, Clarence Leung, Ryan Grove, and I have all worked on the YUI version of TodoMVC.

Marc

YUI Contributor

  • Offline
  • Profile

Re: todomvc.com and YUI

Post Posted: Tue Aug 14, 2012 8:52 am
+0-
One nice thing about the request calls to get templates and such is that they can be cached

Brian J. Miller

YUI Contributor

  • Offline
  • Profile

Re: todomvc.com and YUI

Post Posted: Wed Aug 22, 2012 5:53 am
+0-
The requires goes in the meta data in the YUI() call for performance reasons. When using the combo service if you specify the meta data there it can reduce the number of requests needed because it knows ahead of time what dependencies will be needed to satisfy requirements. If you don't specify that meta data the loader has to read each module that it doesn't have meta data for (any non-core, non-gallery module) and then make subsequent requests until all dependencies are satisfied.
  [ 6 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum