Routing with Web Components

README.md

Basic routing using Web Components

You can see a live demo of this here.

I experimented a little bit with web components and Polymer in the last few days and come up with a routing schema using web components. I would like to know if there are any flaws or shortcomings you can see.

I will start with the basic usage:

demo-app.html

    <!-- Create a new component-router and bind the routeData to the local route variable -->
    <component-router routeData="{{route}}">

      <!-- Define the route(s) this component will be activated on-->
      <component-route route="component/:id:/data/:data:"></component-route>

      <!-- only load component if something is routed. -->
      <template if="{{route && route.id <= 2}}">
        <!--  Dynamicly load a component (using HTMLImports) and pass in custom data -->
        <component-loader path='component-{{route.id}}.html' data="{{route.data}}" ></component-loader>
      </template>

      <!-- Show error -->
      <template if="{{!route || route.id > 2}}">
        <p>Component {{route.id}} not found. There are only two components.</p>
      </template>
    </component-router>

A component-router is to define a space where different routes (component-route) can be defined and are rendered. Each component-router will only be visibel if a containing route is matched.

The component-loader is used to dynamicly load a sub component (which is another custom element) all attributes except the path are passed to the loaded component and can be used there.

Example of a component: component-1.html

<polymer-element name="component-1" attributes="data" noscript>
  <template>
    <h1>Component - 1</h1>
    <span>Show some data: {{data}}</span>
  </template>
</polymer-element>

Thanks your for the notes. You are right that there is a overhead in doing it this way. Why I choose to implement it like this is that only the things that are needed to display the routed component are loaded and subsequently cached. This will make the initial page load faster.

I think it really depends on the use case as you noted.

On thing that comes to mind regarding this technique is that componentes are just removed from render-tree but the javascript object are all kept in memory. It would be great to explore a way to destroy a custom element and reinitialise it on request afterwards, to keep the memory footprint as low as possible.

The component-loader is using Polymer.import. You are right about the boilerplate code for loading routes and using an extended component-loader for that would be a good idea. I think that the component-loader could be interesting on its own.

I will setup a repo and than all work regarding the component-loader can be gathered there.

Another thing to think about is how to pass down attributes to the loaded component, do you expect the component-loader to have a attribute like data that expects an object like:

<component-loader path="component.html" data="{ 'attr' : 'value' }" />

which will result in the attribute 'attr' to be set to 'value' on the loaded component.