How to structure a Polymer SPA?

Question

I'm new to Polymer 1.0.

I get the whole "everything is an element" philosophy but, to what extent? How to structure all theses elements together?

TL;DR: Is there an equivalent to the main() function with Polymer and WebComponents in general ? If so , where should it be and what should it do ?

I usually look at examples, demos and projects to see how it should work, but because Polymer is so new (especially v1.0), I have a hard time finding non-trivial examples.

Long version

I get how to use Polymer to create elements. But I'm hitting a roadbloack when I want to interface them. What structure shoud I use to make components talk between them.

Coming from an Angular background I have a relatively precise view of what should go where. For example: the data is contained within scopes which are accessible from controllers, directives and html elements and you can use services to pull data from different part of the app.

In Polymer I don't get where are the boundaries of the data. Not in the component itself but outside of it, where it lives and if another component can access it. A simple drawing could help me a lot. There is no such thing explained in the polymer docs, probably because it's broader than Polymer.

To give you insights on my problem this is what I came across:

1. I set up a SPA based on Polymer Starter Kit
2. I wanted to wire it to firebase with the firebase-element

3. I created my own element which itself use <firebase-auth>:

   <link rel="import" href="../../bower_components/polymer/polymer.html">
   <link rel="import" href="../../bower_components/firebase-element/firebase-auth.html">
   
   <dom-module id="my-login">
     <template>
       <firebase-auth id="firebaseLogin"
         user="{{user}}"
         location="https://my-project.firebaseio.com"
         provider="facebook"
         on-error="_errorHandler"
         on-login="_loginHandler"></firebase-auth>
   
       <button on-tap="login">Login with facebook</button>
       <button on-tap="logout">Logout</button>
     </template>
   </dom-module>
   <script>
   Polymer({
     is: 'my-login',
     properties: {
       successRedirect: String
     },
     _errorHandler: function(e){
       console.log(e.detail);
     },
     _loginHandler: function(e){
       if(this.successRedirect){
         // How can I tell pagejs to redirect me ?
         app.route = this.successRedirect;
       }
     }
   });
   </script>
   

Basically How do I tell pagejs (my routing library) to redirect the app to a page after a successful login ? My pagejs config lives in it's own routing.html file and I don't understand how to piece together all of this.

I hope someone will be abe to understand this broad question and hopefully help me.

Thanks

Answer 1

Short answer: Event Listeners. Place an event listener on your router. Have the login handler fire the event on the router. The router will pick up that event and then redirect.

...
_loginHandler: function(e){
  if(this.successRedirect){
    // How can I tell pagejs to redirect me ?
    var router = document.querySelector('router');
    router.dispatchEvent(new Event('redirect', {redirectURL: this.successRedirect});
    app.route = this.successRedirect;
  }
}
...

Then in your router:

connectedCallback() {
  this.addEventListener('redirect', function(event) {
    var url = event.redirectURL;
    // Redirect using the router's API.
  });
}