Hello Django community,
caution: long post, TL;DR at the bottom.
in the past months, I tried much about tightly integrating a Js frontend framework into a bigger Django application. I already introduced GDAPS, a Django plugin system, where I want to have Dj apps bring their own frontend code with them.
I made a proof-of-concept with Vue.js, and now experimented a bit
with Svelte, which I like more because it has no vDOM and it's
maybe a bit easier to integrate. I think I tried every piece of
code that is available in Git[hub|lab]* that sort of "integrates"
Django with frontends. I wrote (or adapted another, djsnowpack) a
middleware that injects output of e.g. snowpack into the Django
dev http stream, so it combines Django with snowpack/svelte, which
works too, as a concept
Most of them use or more of the following patterns, a liitle
summary:
* Django parses it's templates, and produces HTML. In most of the
cases the "templates" is just one index.html file that merely has
static character and just is the "holder" of some
<app></app> tag which will be replaced by some Js
framework using injection or something similar. Django templates
here are completely unused. No GenericViews, no DjangoForms, no
SSR. Django mainly is the "backend" for an API. The Js frontend,
whatever it is, neds to be either bundled using a Js or even node
toolchain (webpack, rollup, snowpack, parcel etc.) which either
compiles the complete frontend into a "static" website which then
can be served from a web server.
Django could be replaced here using Express, or any API providing service, REST framework or similar.
* Others "combine" these technologies by adding "MPA" support, Django does the URL routing, has templates for every "page" then, and these pages are either spiked with Js pieces (like jQuery in ancient times ;-) ) - vue.js can be used like that, by just adding it "online" as script, and placing components into the templates. this is a little bit better, as it combines "the best of both worlds", as the tutorials say.
The downside here: you have to use a framework like Vue with a virtual DOM, which can be added to any static html page, and yoiu have to write all the Vue templates into Js code - the (really big) davantage of single file components (and therefore encapsulating functionality transparently) is gone completely, you have to write it (in Vue) like:
Vue.component('image-list', {
data: function () {
return {
images: []
}
},
template: `
<div>
<h1>Images</h1>
<ul v-cloak v-if="images.length">
<li v-for="image in images">
<img :src="image.src" :alt="image.alt" />
</li>
</ul>
</div>
`,
}
// ...
This approach is more or less usable for independent apps that
have their own "pages" in a bigger app, and for small components
like the code example, just a few lines., You could even use
Alpine.js in another page, within the same Django application.
But one thing lack all of them: when the good fairy told me I had a wish, I said: in my dream framework, I would like to have both advantages, without the correspoding disadvantage of it:
Django should process the Dj templates, using all the cool stuff
it provides like extending templates of other apps, easy
prefilling forms with data, reusable DjangoForms and Django Views,
etc., AND, I want to have webcomponents like the ones you
can build with Vue, React, Svelte etc. that are reusable too.
Ideally like Svelte, without a virtual DOM. The Django dev server
(or something else) should do that automatically. Single file
components can be used, and provided even by other Django apps
than the one that uses them (Django CoreApp provides webcomponent
"foo", BazApp uses <foo/> in it's template)
TL;DR
So, let's get closer to the point, and here is my question (and the cause I post this on django-developers):
Is there a possibility tweaking Django to integrate a frontend
framework, keeping the Django template language, Views, Forms
etc., AND using e.g. Svelte or Vue (etc) - which need a compile
step *afterwords*? HMR included
Django is known to be a bit "old-school" regarding frontend frameworks integration, and to be honest, this is true - there are plenty of cookiecutter templates, npx degit starter repositories, tutorials and the like, most of them a bit clumsy and outdated, no "batteries included" solution like Django itself - because there is no "API" for integrating frontend frameworks in Django, which all bundlers or frameworks could use.
So how would such a solution look like?
I could think of 2 things:
* creating/extending the DJango template backend which adds a
compile step after parsing the templates.
Downside: I've read that it may be not a good approach to let
Django "spawn" the Js compiler.
* adding a Dj middleware that includes the framework "somehow" into the already parsed templates. Seems even more complicated to me.
* Use something like django-compressor with a plugin for that.
Sorry, no HMR here during development
including e.g. Vue or Alpine dynamically comes close to my ideal,
but I think a Js compile step is needed.
Do you have any thoughts here, hints about how to do that? Mission impossible?
Best regards,
Christian
-- Dr. Christian González https://nerdocs.at
Ah, I forgot something:
* the Dj dev server serves static files "from their locations", e.g. the apps' static directories, which is great for developing with templates, but can not be used with a frontend framework, as this framework needs to be compiled *afterwords*.
* when going into prod, calling collectstatic finds all of them
and puts it into STATIC_ROOT.
Then the compile step of a framework could happen.
So after each code change, I could call `./manage.py collectstatic` and keep the snowpack/webpack dev server running, wathing the "static" directory.
Which is kind of nonsense - BUT, like I asked, could it be a possibility to automate this process, to enable HMR for development?
Christian
--
You received this message because you are subscribed to the Google Groups "Django developers (Contributions to Django itself)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-develop...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-developers/45ae5c4e-ab1e-bbb5-9ed6-f71285306a08%40nerdocs.at.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-developers/7c873367-664d-1018-aca3-366595ece1f7%40nerdocs.at.