Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactoring of html templates and javascript code #479

Closed
WolfgangFahl opened this issue Aug 30, 2022 Discussed in #471 · 2 comments
Closed

refactoring of html templates and javascript code #479

WolfgangFahl opened this issue Aug 30, 2022 Discussed in #471 · 2 comments
Assignees
@WolfgangFahl
Labels
enhancement New feature or request
Milestone
0.8

Comments

@WolfgangFahl
Copy link
Collaborator

Discussed in #471

Originally posted by WolfgangFahl August 30, 2022
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' %}
@WolfgangFahl WolfgangFahl added the enhancement New feature or request label Aug 30, 2022
@WolfgangFahl WolfgangFahl added this to the 0.4.0 milestone Aug 30, 2022
@WolfgangFahl WolfgangFahl self-assigned this Aug 30, 2022
WolfgangFahl added a commit that referenced this issue Aug 30, 2022
@WolfgangFahl
down to 308 lines for #479
1757a24
@WolfgangFahl
Copy link
Collaborator Author

we need to be able to talk about issues and debugging in code with comments like - there is a problem in line xyz of somecode.js in function somefunction ...

@WolfgangFahl WolfgangFahl mentioned this issue Aug 30, 2022
Closed
WolfgangFahl added a commit that referenced this issue Aug 30, 2022
@WolfgangFahl
down to 252 lines for #479
c62c96d
@WolfgangFahl WolfgangFahl modified the milestones: 0.4.0, 0.5.0, 0.5, 0.6 Sep 2, 2022
WolfgangFahl added a commit that referenced this issue Sep 7, 2022
@WolfgangFahl
works on #475 and #479
f555d76
WolfgangFahl added a commit that referenced this issue Sep 7, 2022
@WolfgangFahl
improves for #498 and #479
8fd98f5
@WolfgangFahl WolfgangFahl modified the milestones: 0.6, 0.7 Sep 7, 2022
WolfgangFahl added a commit that referenced this issue Sep 7, 2022
@WolfgangFahl
works on #479
8a02e87
@WolfgangFahl
Copy link
Collaborator Author

WolfgangFahl commented Sep 8, 2022 •
edited
Loading 

let justpy_core=new JustpyCore(
      this, // window
      'JustPy', // title
      false, // page_ready
      false, // result_ready     
      0, // reload_interval
      false   // debug
    );

is now generated by the template.py modules's Context class.
The following code still has to be done:

{% if page_options.redirect %}
        location.href = '{{ page_options.redirect|safe }}';
    {%endif %}
    {% if page_options.display_url is not none %}
        window.history.pushState("", "", '{{ page_options.display_url }}');
    {%endif %}
    var page_id = {{ page_id | safe }};
    var websocket_id = '';
    var use_websockets = JSON.parse('{{ use_websockets }}');
    var justpyComponents = {{ justpy_dict.replace('</' + 'script>', '</" + "script>') | safe }};

WolfgangFahl added a commit that referenced this issue Sep 8, 2022
@WolfgangFahl
moves javascript code from main.html to justpy_core.js and uses Conte…
cf0a752 
…xt class to generate html and javascript code

to improve #479
@WolfgangFahl WolfgangFahl modified the milestones: 0.7, 0.8 Sep 8, 2022
This was referenced Sep 9, 2022
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@WolfgangFahl WolfgangFahl

Labels
enhancement New feature or request
Projects
None yet
Milestone
0.8
Development

No branches or pull requests
1 participant
@WolfgangFahl