Polymer project with several single page applications

Question

I want create the project with Polymer. Project must have several modules (for example: contacts, schedule, receptions, administration ...)

Polymer starter kit scaffold is "one SPA for the project".

How must i organize files, if i want modular project (own SPA for each module, independent module deployment). Or may be modules must be several projects?

Answer 1

There are some options, but the best approach may not be a short or a straight answer. There are many things to take in consideration.

I suppose that when you say "modules", you are talking about pieces of your software that relates to the same application, run in the same URL, are under the same authentication realm, and that one user can access one or more modules in a single day. If this description doesn't fit, you may probably have many applications, not many modules.

Here follow some options, but I think the last one ("SPA with dynamic loaded elements" approach) may suit you best:

"Loading another HTML page" approach

I suppose your app have some authentication mechanism. I don't know if you are using a REST API, but if you are, you probably need to store your tokens received when you logged in. When calling a separated HTML per module, you may be required to pass your tokens among new loaded pages. It can be done through HTML5 sessionStorage element, or maybe through cookies (not recommended due to CSRF attacks - read more here: https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet).

Benefits:

• It will unload unnecessary scripts from memory, which existed only to serve another module. You may free some memory this way.
• You can have a completely separated module, and it can help in your module organisation.

Drawbacks:

• Your browser will reload, and you will have less control over the page while this happens.
• It will reload your JavaScripts, even if they where used before. They will probably be read from cache, but browser may need to make new requests to your website in order to check for a 304 Not Modified header.
• It will take more time, and you will need to bring more information to recreate the whole screen (you already had your interface drawn and you will need to recreate that).

"All in one - SPA" approach

Benefits:

• Javascript State will be kept across modules.
• Load things once
• Your interface will be the same for every module
• You can vulcanize your app to have it in a single HTML file

Drawbacks:

• Bloated and heavy. Will load lots of things that will be probably unused.
• May generate problems due to problem in components that weren't even in use.

"SPA with dynamic loaded elements" approach

You can dynamic import new elements (I wrote a post about that in https://easyusedev.wordpress.com/2015/11/06/dynamically-loading-polymer-elements-on-the-fly/).

Benefits:

• Javascript State will be kept across modules.
• Load things only when needed
• Your interface will be the same for every module
• You can vulcanize your app to have it in a single HTML file

Drawbacks:

• Loaded elements and javascript will be kept in memory even when they are not needed anymore. There is no easy way to "unload" things from memory.
• You have some effort to implement that pattern correctly