<script> for page templates in separate HTML files

[Sergey]

Hello,

I want to use separate HTML files for each page template instead <ons-template> in the index.html.
Of course for incapsulation I want to move JavaScript related to this page to appropriate HTML file.
But if I add <script> element to template HTML file - this script don’t moved to the index.html with page template. As I understand Onsen UI page loader extract from template and append to index.html only <ons-page> element.
Moreover, if I insert <script> element inside <ons-page> :

<ons-page>
  <script>
    function myFunction()
    {
    }
  </script>
  ...
  ...
  ... onclick="myFunction()" ...
  ...
</ons-page>

I see <script> in the index.html after template loading but when I call myFunction() on the page - I see “function not defined” error.
What is your recommendation to move JavaScript from index.html to page templates in separate HTML files?

[munsterlander]

@Sergey You can’t. All your JS needs to be in either the index.html or you can place it in separate JS files. You could load those dynamically though, but it can’t be mixed with templates.

[Sergey]

@munsterlander Thanks!

• If I place JavaScript in separate JS files - I can’t include these files to HTML templates too? In index.html only?
• As I understand with @Fran-Diox answer for my previous question - if I implement my own pageLoader I can overwrite standard behavior and also load <script> element from template to the index.html?
• Is there any event where I can catch template loading and dynamically include to the index.html some JS files related to loaded HTML template (for example if JS and HTML file have identical names and different extensions)? This event must be universal for several objects (because <ons-page> have init event but <ons-dialog> don’t). It will be great if this event related to template loading instead object display (init, preshow etc.). If you have some internal template cache object - maybe this object can fire such event?

[munsterlander]

@Sergey

• You are correct. They can’t be included.
• Yes, a pageLoader is completely different than standard Onsen behaviour.
• Well, init would be the best place to load it, but you may miss some behavior.

My question is, is your JS that huge - like 30+ MB worth - that you are seeing massive performance issues? I always describe hybrid web apps by saying they should be treated like a one page web site. The same principles basically apply. For all of my apps and one has over 20K lines of JS, its still just loaded in the index.html and I have yet to see any performance issues. Is there a specific reason, other than SoC / logical arrangement, that your JS needs to be with those templates?

[Sergey]

@munsterlander

• init event is not avaible for ons-dialog and ons-popup. It would be great to have a universal method for the handling of templates loading process. Maybe some API which could be used in onsReady for defining all required external HTML templates (and JS files?) or some standard function in the each template (called after template loading) or template cache event or some other… With this way it will be possible handle template loading for several tasks - add a appropriate scripts to the index.html, add event listener and other. Ok… it is my fantasy :sunglasses:
• My question about splitting JS to external files with templates not related to any performance issue. You absolutely right regarding hybrid apps principles and JS size. My question have these reasons:
  • Some “components model” where each business object incapsulated in separate piece of the code (HTML and JS). Simple mobile app can contains (for example) 3-5 pages with 3 tabs on the each. Plus 2-3 pages for setting… Plus 2-3 pages for sign up / login etc. So we very easy can have 20+ screens for simple app. And each of these screens require specific code for event listeners, for initialisation, for user interaction etc.
  • More usable environment for team work. It is very difficult for 2-3-4 developers to work with one big index.html (code conflicts, merging etc.). When functional blocks splitted to several files it is more comfortable. Yes in this case we can try to use Webpack (or some similar) to build sources to one big index.html… but I don’t see this feature in the Monaca Cloud IDE ;)
  • Hot code push feature - it is much more easy to reload only one small piece of the HTML or JS code rather than one big index.html (in other words - the entire application).

I created other topic regarding performance issue. Loading templates from the external files really froze UI for 1 second each time when I want to display page with 3 tabs (and these pages don’t have a lot of code - 10-20 lines of HTML only). I hope you can fix it as @Fran-Diox said.
Wow… @Fran-Diox ask me to create appropriate issue on the GitHub… and I forget it… I should do it :)

[Fran Diox]

@Sergey About the init events… well, I think ons-page is the key. A page doesn’t need to be fullscreen, it can be inside any element. You can basically put a page inside a dialog and then you’ll get the page events. The only “issue” is that a page has a white background by default and that could possibly cover round borders or shadow. You can just set its background to be transparent.

I think we will problably add something like ons.preload in order to cache templates beforehand. Also, we’re discussing deprecating ons-template in favor of native template. If we do this, I think script tags will be finally allowed.

[Sergey]

@Fran-Diox Thanks a lot!
It would be great if you could solve these problems: template cache for external files, custom handling for template loading, and script in the external templates! :+1: