DoneJS - Dynamic Loader

Question

In Chat-Demo, there is a syntax where the code (https://donejs.com/Guide.html#switch-between-pages) is split into two blocks: one for <chat-messages/> to load whenever page='chat', and another for <chat-home/> for home.

Those two blocks are very similar.

Imagine if there where not two, but, let's say, ten or more different components to load that way (for example, a big menu of options, each one linking to a different page/component).

Do I need to create as many "if" blocks as the number of options in the menu, or there is another more compact way to do this?

Answer 1

The multiple "if" blocks are an easy way to get up and running with an app quickly. However, it does not work well when your app begins to grow. There is a technique that I have used in apps which works really well. I have uploaded a version of the donejs chat demo with my customizations. I suggest you pull it down before reading further:

https://github.com/DesignByOnyx/donejs-with-route-config

There are 3 commits so you can see the changes between each step of the process. The most important parts are in the 3rd commit:

1. Generate the DoneJS chat app with no modifications: e0398af4c23207d527c054f1fb1ea65b419119a0

2. Add the home.component and messages component: 56c2202c117049f67ff7dc52b054ad30cc5b71eb

3. Add route-config, navigation component, dynamic loading, bundling: 4a924693bfd8a3469d69a6ccb5abe8675724e8a9

---

Description of Commit #3

The last commit contains all of the magic (and the result of many hours of work from my last project). You should start by looking at the src/route-config.js file, as it contains all of the information about routing and dynamic modules for the app. There are a couple things you should know:

The "modules" object is a simple mapping of url-friendly names to the module which they should load. You can rename these however you want.

NOTE: for each item, a separate bundle will be generated during the build process.

const modules = {
  'home': '~/home.component',
  'messages': '~/messages/messages',
};

The main export is an array of routes which will be registered for your app:

module.exports = [
  { route: '/', nav: 'Home', data: { moduleId: modules.home } },
  { route: '/chat', nav: 'Chat Messages', data: { moduleId: modules.messages } },
];

For each item in the array, there are 3 properties:

1. route: the parameterized route - you can include parameters like /user/{userId} for dynamic routing as described in the docs.
2. data: the default data for the route. Whenever the URL matches the route, the default data will be merged onto the app viewmodel. See the moduleId property on the app viewmodel.
3. nav (optional): if specified, the value will be used to generate a link in the main navigation component.