Provide a way to compose apps together

lets think about something that takes a donejs-app or component and returns a app if XXX and a component when YYY

also add something to read routes of apps if they are apps and combine them to a single viewModel

use case

Sometimes you want to code a donejs-app a small one that you can run test all indipendent like a donejs app but then use that app directly as a component in a bigger app.

Solutions:

• code a wrapper
• code some build process (that would loose route information i think)

example:

• coding a user manager as a app
• coding some other app that uses the users but displays total diffrent stuff + the user manager

my current solution

• donejs add app
• create routes on component usage add appName route(‘<appName>/{page}’, { page: ‘artist-list’});
• on component use remove or ignore can-route
• use a extra route.js inside your app that holds only the route viewModel
• merge stache bodys some how and stach headers or assign extra route for the app/component main

other solution

• create a extra bundle as component and as app.

findings:

Gregg Roemhildt @roemhildtg 14:10 @frank-dspeed I was looking into loading components from different apps in separate project folders, and it sort of works, but I ran into an issue where It was in a file project 1, trying to load project2/file/file and imports in that file had import stuff from '~/other/other which steal interpreted as being in project1 even though the file is in proejct2

Solution

I had set up steal's paths to use this: "project2/*": "/apps/project2/*.js"

[roemhildtg]

I kind of have a working sample of this I can share shortly. But what do you all think of using partials to render child apps?

For instance, my parent app has a progressively loaded “page” object that contains a renderer function. And my parent app template would render that page with something like this:

{{>header}}

{{#if pagePromise.isPending}}
<i class="fa fa-2x fa-spin fa-spinner"></i>
{{else}}
    {{#if pagePromise.isResolved}}
        {{>pageData.render}}

    {{else}}
        {{#if pagePromise.isRejected}}
            {{>error}}
        {{/if}}
    {{/if}}
{{/if}}

{{>footer}}

pagePromise is a getter tied to can-route, so if the page changes, the pagePromise gets resolved again and sets pageData with the new renderer. pageData would look like this:

import renderAdmin from './templates/admin.stache';
import './styles/admin.less';

import Article from './Article';
import PersonBasic from './Person_Basic';
import PersonAdvanced from './Person_Advanced';
export default {
    render: renderAdmin,
    // add some properties for the admin page
    views: [Article, PersonBasic, PersonAdvanced],
    getActiveView (id) {
        return this.views.filter((view) => {
            return view.id === id;
        })[0];
    }
};

Routes can be set up in a centralized config that might look something like this:

export default {
    routes: [
        '{page}',
        '{page}/{view}/{section}',
        '{page}/{view}/{section}/{id}'
    ],
    page: 'home',
    pages: [{
        path: 'can-admin/config/pages/home/home',
        // props for navigation links
        title: 'Home',
        iconClass: 'fa fa-home',
        id: 'home'
    }, {
        path: 'can-admin/config/pages/news/news',
        title: 'News Manager',
        iconClass: 'fa fa-news',
        id: 'news'
    }]
};

This seems to be pretty flexible and also pretty performant at first glance. I’ll share a demo once I get some things ironed out.

[justinbmeyer]

Thanks for the follow up. I understand much better now.

I don’t want to use npm to manage these deps because they were developed as separate apps.

Why does developing them as separate apps mean you can’t use NPM?

If I were doing this sort of thing w/ just canjs, combining cereals-app and grains-app, I would do something like the following:

cereals app

cereals-app/
  package.json
  index.js
  cereals-app.js        
  cereals-app.stache

where cereals-app.js is a component like:

VM = DefineMap.extend({})
Component.extend({
  tag: "cereals-app"
  ViewModel: VM,
})

and index.js basically boostraps everything:

route('/{x}/{y}/{z}')
var template = stache("<cereals-app>");
document.body.appendChild( template() );

grains app would look the same.

Then I’d create a cereals-and-grains app that would combine them like:

route('cereals/{x}/{y}/{z}',{page: "cereals"})
route('grains/{a}/{b}/{c}',{page: "grains"})
var template = stache("{{#if page}}<cereals-app>{{else}}<grains-app>{{/if}}");
document.body.appendChild( template() );

While this doesn’t scale upward great, I think it should handle things pretty well. To scale better, we’d need a folder-based routing system that also is able to render one app or another.