Architecture of aurelia.io

Site Feedback
1

Hi,
I find the new site very good and interesting. :+1: especially what you did to combine static rendering and progressive enhancement!

I am trying to figure out what you did.

  1. There are components like <search-panel> and <side-bar> which are classical aurelia CustomElements. aurelia-docs.js is loaded, which includes require.js, and the bootstrapper is called. I get how this works.

  2. Then there is the <nav> element which has its view server-side-rendered and has aurelia bindings like ${activeTab == ‘home’ ? …} in it. How does this work?

  3. When you navigate between pages in the navbar, only index-fragment.html is beeing loaded. How does this work?

  4. And finally I noticed, that window.aureliaDocConfiguration is beeing set. Whats that for?

I would be thrilled if anyone could give me a hint. :grinning:

2

anyone?? Is there a repo where I can look at sources?

3

I asked the same as I was going to do a PR to fix the layout on mobile screens as the left menu takes up much of the screen. Apparently the repo is private.

1 Like
4

I’ll try to answer it by myself:

  1. CustomElements like <drop-down> are declared as .globalResources(["./resources/drop-down",...]); and can be bootstrapped through Progressive Enhancement with an aurelia.enhance() call. See guide here.

  2. The Server side rendered static html page has a body tag like <body aurelia-app="main" id="app-host">. Inside the body there are aurelia bindings, triggers and aurelia CustomElements. How its done: The aurelia-app="main" attribute calls the main module. Inside the main module aurelia defines globalResources (see 1.) and bootstraps the aurelia app with a call that looks something like this:

     aurelia.start().then(a => 
 { let viewModel = a.container.get(App);
   aurelia.enhance(viewModel, "app-host")
   .then(() => viewModel.activate())
 });

    I am not sure about how to get the viewModel. I am reverse engineering from minified code here. Maybe someone knows better?

  3. Once you navigate to e.g. guides you click on a <a href="docs"> tag and get a html response with aurelia bindings etc. from “docs/index-fragment.html”. How its done: Aurelia uses aurelia-fetch-client to add index-fragment.html to the url and fetch the response. Once it returns, aurelia uses InlineViewStrategy to dynamically enhance the template. Like:

     let viewStrategy = new InlineViewStrategy(`<template>${response}</template>`);

    (Here is an example how to use InlineViewStrategy). viewStrategy is the return value of the activate function which is being called, once aurelia.enhance() returns. (See 2.)

  4. window.aureliaDocConfiguration is a JSON that is used inside aurelia as a config object like: this.config=window.aureliaDocConfiguration

5

@loaded02 since this disussion started with your own question followed by your own answer, I am assuming that you got it by the reverse engineering process. It might be a nice gesture to write a complete document / blog about such hybrid apps for our AUCS project that will soon be looking for interesting technical documents.

6

Hi @adriatic! This is a good idea. I tried to answer it in an understandable way. But a Blog Post is a good idea. I have never written one before, but you should never say never. I’ll look into it.