refactoring of html templates and javascript code #471

WolfgangFahl · 2022-08-30T05:05:40Z

WolfgangFahl
Aug 30, 2022
Maintainer

Currently justpy creates a html page for startup that is 2405 lines long.

Unfortunately this verbosity leads to hiding the clean structure behind the code which is shown below:

<!DOCTYPE html>
<html>
  <!--This is a justpy application using the tailwind.html template-->
  <head>
     <script>...</script>
     <title>JustPy</title>
     <link ...>
     <link ...>
   </head>
    <body style="" class="">
       <div id="components">
       </div>
       <script>...</script>
  </body>
</html>

the core Vue component 'app1'

var app1 = new Vue({
        el: '#components',
        data: {
            justpyComponents: justpyComponents
        },
        render: function (h) {
            var comps = [];
            for (var i = 0; i < this.justpyComponents.length; i++) {
                if (this.justpyComponents[i].show) {
                    comps.push(h(this.justpyComponents[i].vue_type, {
                        props: {
                            jp_props: this.justpyComponents[i]
                        }
                    }))
                }
            }
            return h('div', {}, comps);
        }
    });

The html is a mixture of css and javascript imports and declarations. A separation of concern is not visible and would IMHO be the core task of refactoring making sure that only a few lines of clean html are left that are commented to show what the parts do.

To get this new clean result i suggest to get rid of the Jinja templates and instead write the generator for the code as a pure python code with an object oriented structure. The logic to be used for version handling and other configuration task can then be implemented much clean and be tested and debugged. Jinja templates are executed out of the standard python debugging context and are a nightmare for testing and debugging. The extra value the templates seem to bring at first look does IMHO evaporate as soon as maintainance work as we need to do is to be done.

First step - replace %include
The explosion of html lines in the code is mostly from the use of the %include% option of the Jinja templates:

 {% include 'js/event_handler.js' %}
    {% include 'js/html_component.js' %}
    {% include 'js/quasar_component.js' %}
    {% include 'js/chartjp.js' %}
    {% include 'js/aggrid.js' %}
    {% include 'js/iframejp.js' %}
    {% include 'js/deckgl.js' %}
    {% include 'js/altairjp.js' %}
    {% include 'js/plotlyjp.js' %}
    {% include 'js/bokehjp.js' %}
    {% include 'js/katexjp.js' %}
    {% include 'js/editorjp.js' %}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactoring of html templates and javascript code #471

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

refactoring of html templates and javascript code #471

WolfgangFahl Aug 30, 2022 Maintainer

Replies: 0 comments

WolfgangFahl
Aug 30, 2022
Maintainer