OHDSI Home | Forums | Wiki | Github

Refactoring routing

Developers
#1

Following up on some conversation in this thread: New utilities and components in ATLAS, and some experimentation I’ve been doing with possible new js frameworks (considering Aurelia.io at the moment),I’ve got something sort of working that could allow us to possibly toss out a lot of hard-to-follow routing code in app.js and index.html. (This is based on code I’m working on here: https://github.com/Sigfried/Atlas/tree/aurelia-poc-no-webpack/js/components.)

So, instead of a ton of route handlers for every possible url path (which all actually go to the same page but set some observables that control some data loading, module loading, and which div appears in the main display area in index.html), we would just have a single handler something like this:

       '/?((\w|.)*)': function(plainPath) {
            let path = self.router.getRoute();
            let first = path[0];
            let component = route2componentName(first);
            let last = path.pop();
            if (last.indexOf('?') > -1) {
                self.querystring(last.slice(last.indexOf('?') + 1));
                last = last.slice(0, last.indexOf('?'));
            }
            path.push(last);
            requirejs([component], function (module) {
                self.currentView(component);
                self.routePath(path);
            })
       },

It matches any route and, like the current setup, loads an appropriate module and sets the ‘currentView’. Instead of having a ton of divs in index.html, each containing a different component and only one of which is expected to display at any given time, we could have a single div that dynamically loads the correct component:

        <div id='current-view' data-bind="component: {
                      name: component,
                      params: {
                          model: pageModel,
                          path: routePath,
                          querystring: querystring,
                      }
                    }"></div>

So, this basically works, but of course ATLAS doesn’t work with just this change because many of the route handlers run specialized code and none of that is getting run in my little test. But it would be much better to relocate that special code to the component being loaded anyway and move it out of app.js/index.html.

I do think we’re likely to be changing routers at some point (Aurelia has its own router, for instance), but if we make the change I’m proposing first, it will be much easier to change routers later.

Just to be clear, I’m not currently working for anyone and I’m not volunteering to implement this change unless someone would like to pay me to do so, but given the code I’m showing here, I think the change would be pretty straightforward.

t