Python, Preact, HTM - struktura aplikacji
Opublikowano: 05.12.2019
Ostatnia modyfikacja: 18.04.2024
Czas zabrać się do roboty.
Po zebraniu do kupy wymagań co do aplikacji przyszedł czas na strukturę. Ponieważ jest to Javascript osadzony w HTML, to nie będzie oddzielnego katalogu na frontend, a wszystko będzie umieszczone w katalogu statycznych (hehe) zasobów aplikacji. Tak mniej-więcej to wygląda:
Dość typowa aplikacja we Flasku z dwoma blueprintami, main który generuje HTML i api z którym komunikuje się Javascript, który z kolei umieszczony jest w katalogu static. Preact i HTM są jako jeden plik, który dla niepoznaki nazwałem preact.min.js, ale tak naprawdę jest to składanka obu bibliotek. Kod Javascript który działa na konkretnej stronie jest w katalogu static/js, po jednym pliku na każdą stronę. Pliki te są dołączane do strony jako moduły (dzięks, ES6!):
{% block pagejs %}
<script type="module" src="{{ url_for('static', filename='js/poll.js') }}"></script>
{% endblock %}Dzieje się to pod koniec sekcji <body /> natomiast główny komponent Preacta jest montowany we wcześniejszym bloku:
{% block content %}
<h1>Poll {{ poll.title }}</h1>
<p class="subtitle">{{ poll.description }}</p>
<div id="app">
</div>
{% endblock %}Prosto? Bardzo prosto.
Do tego zwyczajowe boilerplate aplikacji we Flasku, ale to idzie migiem. A najciekawsze rzeczy dopiero się zaczynają, bo na razie nie ma tu niczego interesującego.
Nie żebym uważał Javascript za cokolwiek interesującego.