title: Flask - Component templates structure?
body: <p>I've been experimenting with a Flask template structure to resemble a component workflow. This is inspired by Vue.</p>
  <p>Some key ideas :</p>
  <ol>
  <li>Each page is treated as a component</li>
  <li>A component is just a folder containing all necessary files inside it (except ones that are common)</li>
  <li>Each component is encourageg to have several HTML files to avoid large files, we will be using Jinja's <code>include</code> to &quot;bundle&quot; them
  togheter</li>
  <li>Avoid javascript, or at least, loading unnecessary javascript, each page will <code>include</code> only what's necessary</li>
  </ol>
  <p>Here's an example :</p>
  <p><a href="https://i.stack.imgur.com/R5ESb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R5ESb.png" alt="enter image description here" /></a></p>
  <p>The route for <code>PageExample</code> would be the following :</p>
  <pre><code>app.route('/example'):
    return render_template('PageExample/html.html')
  </code></pre>
  <p>And PageExample/html.html :</p>
  <pre><code>{% extends 'base.html' %}
  {% block content %}
  &lt;div class=&quot;tab&quot; id=&quot;tab1&quot;&gt;
    {% include 'PageExample/tab1.html' %}
  &lt;/div&gt;
  &lt;div class=&quot;tab&quot; id=&quot;tab2&quot;&gt;
    {% include 'PageExample/tab2.html' %}
  &lt;/div&gt;
  {% endblock %}
  </code></pre>
  <p>PageExample/tab1.html (tab2 follows the same logic)</p>
  <pre><code>&lt;!-- block header is in base.html --&gt;
  {% block header %}
    {{ super() }}
    &lt;script src=&quot;{{url_for('components', 'PageExample/tab1.js')}}&quot;&gt;
  {% endblock %}
  &lt;div class=&quot;tab-content&quot;&gt;
    Some content here that uses the tab1.js javascript
  &lt;/div&gt;
  </code></pre>
  <h1><strong>So, what's the question ?</strong></h1>
  <p>I have limited experience with Flask, so I'm not sure if this idea is sound, it seems hacky but it makes developing pages easier, especially with multiple people (the little javascript a page might need can be done in any way). Also increased loading speed by a ton.</p>
  <p>Dos this work? Is this structure reccomended? Are there any flaws to it? What sort of problems could I run into? Any recommendation to do it better? Is this already done nowadays in Flask? I couldn't find any examples of a Flask app done this way (specially the Jinja stuff using lots of includes)</p>