What should the workflow look like for working with modern JavaScript projects?

[velara]

The web has changed drastically over the years. It feels like it’s stabilizing into a few common workflows.

• What features should Web Export focus on to address those?
• What should the default HTML template content look like?
• Should a module or class be exported that contains or organizes elements and code?

Side note

There is a new experimental feature in development that will allow you to include external files as templates.

What this means is that you can work on your HTML, CSS and JS in VSCode or your favorite editor and during the export process Web Export will pull that in and use it as a template.

Currently, if you want to add or use custom content you open the Element options panel and click on the more info icon and then enter it into the related field like so:

Text field with custom HTML template

Artboard HTML with customized HTML template value:

If you wanted to use an external file it will look similar to this:

[velara]

As an improvement having nothing like this currently and for improving on inline JavaScript here’s what I’m thinking.

Exporting a module with a class that has some or all of the elements on it, any custom javascript (if someone uses the custom JS field or defines an external JS file in place).

class Artboard1 {

      constructor () {
           this.button1 = element("button1");
           this.input = element("input1");
      }
}

module.exports = {Artboard1}

Currently, JavaScript is added inline after the element tag. A better organization might be for any JavaScript added into the class:

class Artboard1 {

      constructor () {
           this.button1 = element("button1");
           this.input = element("input1");
           this.button1.addEventListener("click", button1Click);
           this.button1.addEventListener("change", inputChange);
      }

      button1Click(event) {
          // code 
      }

      input1Change(event) {
          // code 
      }
}

I support and agree mostly with current “best practices” but they don’t mention how to integrate with a visual design view like Web Export is doing.