Okay, welcome to the fight on their room where we will explain some stuff about jungle and
HTML and out to discuss with LLM by Juren, okay, let's go.
Okay, yeah, hi there, welcome to my talk, skips the overhead line web development with
Django, about me, I'm Jorn Vassava freelance software developer from this is off, I have some
jump speaking pattern podcasts and yeah, I created this Django resume package, I'll use as an example
throughout this talk, okay, what do you expect from this talk? At first, don't try to read all the
quotes, I have some in there because I couldn't resist, but the slides of the talk are in the
detail page of the talk, so can read them later, if it's too fast. And at first, there's three parts,
the first part is what's up with modern web development, do we really need an SPA for everything,
single page application or are there other ways? Then the second part is about how to build interactive
websites without all this blood and in a third part, I'll try to do a live demo,
yeah, we'll see how that works, okay, yeah modern web development, there's a lot,
there's a front end, a back end web frameworks on front end side, on the back end side, and then there's
some communication over rest API, which are not really restful, but more traditional kind
server, Jason, the API is tightly coupled, and then we have another different framework,
probably for CSS stuff, and build pipelines on its front end for TypeScript to JavaScript and
back end, and yeah, it's complicated stuff, and if you read some book on design patterns or
software architecture, probably there's a place for every pattern, probably multiple places where you
can find even dependency injections or stuff like that, which is kind of nice, but also
can get a little bit difficult, but yeah, we maybe we didn't choose to do that because it's
easy, we wanted to go to the moon, the little website, which is difficult, and yeah, we do it on purpose,
but maybe there are things we didn't expect, and for example there's also the people
who don't want to write JavaScript, and then there are people who don't want to write
Python, and nobody wants to write HTML and CSS, and sooner or later you get a front end
back end split between the developers, and then those paths have to communicate, which is kind
of yeah, they don't want to do it maybe, or can't, in some projects we used Tailwind for CSS stuff,
and from that needed to use the Python backend web server also, and it was months into the
project that we found out during a paper programming session, that yeah, they didn't configure
their virtual ends differently, and the tailwind CSS process has to run at run over all the virtual
ends stuff, and gigabytes of dependencies, and it took 40 seconds for changing some classes
in HTML to show the feedback, which will feedback of changing the layout, which was kind of
made them with angry, yeah, but also, paper programming, many institutions don't do it,
because they think it's expensive, and paper programming between front and the backend people,
oh, that's almost unavoidable expensive, but yeah, so they have to live with some minor inefficiencies,
sometimes, yeah, making our life even harder, okay, so it's probably not easy, why are we doing that?
Why are we buying into all this complexity, and I think the reason is because of the non-functional
requirements, we want smooth user experience, appealing visuals, we now building websites is
complex and expensive, so we want to be able to show the internet stakeholder's paying for
that some wow effect, so it shouldn't, at all costs, it shouldn't look like a website, so it has to
be something really premium, and then there's also the developer experience, we shortly talked
about it, there are just, if you have a problem like that, you can probably do much,
because for example, if you have a software development department, which is used to climb stuff,
and if you talk to them, yeah, maybe it's time to write some HTML and CSS, they will kind of push back,
and maybe you have to persuade them in another way, like telling them, oh, that's this
shiny new typescript language, which is kind of similar to Java, and you don't have to touch
HTML and CSS, and you have only, you can use your standard IDE and just compile for a different
build target, right, and yeah, then you might have changed your legacy enterprise development department
to cutting at WebDef team and profit, so, but if you don't have those requirements, maybe you
can do something much simpler, like choosing some of those old boring back-and-back frameworks,
like Django, which is community government, no major drama expected there, it works, you can
upgrade it in last years, I didn't hit any major rock blocks update in Django and spend your
innovation tokens elsewhere, which is kind of great, and Django, in the time it was founded,
there was not really a front-end back-and-split, and yeah, then there was for a long time, people wrote
back-and-a-p-i-s using Django rest framework or something like that, and then building front-end
on top of it using single-page application, next year's React, UGS, something like that, but now
in the set, Django doesn't have really have a front-end story, but now it's changing again,
and maybe you can do a lot of front-end stuff in Django again, and Django kind of is the front-end framework
and why not use it as a smart, and this is because there have been, for example,
development in CS-Esland, CS-Es is much better now than it was, you probably don't have to use
a big CS framework to just make responsive websites, pre-processors are probably no longer essential
because you can use custom properties, and yeah, you have quantitative queries, grid,
flexbox, all working well, and maybe you can even use CS-Es to your advantage, like using
releases as electors and the cascade, and there are maybe your friends, if you don't have to use
utility for HTML components and copy them, because you can compose your sites layout,
maybe using layout primitives, and CS-Es electors, there's a book I like, I mentioned, it's called
Every Layout where this approach is described in more detail, it's just I want to show it a little
bit so you can check it out, and maybe the most important part is HTML's, so HTML's, I don't know,
how many people are knowing what HTML's is, okay, most of it, maybe I don't have to talk
about that, it's the next evolution of the HTML Pokemon, it's kind of, in old HTML,
you can only two elements can do HTTP requests, the anchor tag and the form tag, and when HTTP
response is coming back from the server, the whole DOM has to be replaced, and the DOM has to be re-rendered,
and it's kind of tags about a second, and you have a flash of white in which we can, so you
will notice, it makes multi-page websites feel like they usually do, and for single-page apps,
it's different because they only have to update parts of the websites that have changed, and this
is much faster, the latency, fetching JSON from a backend API versus fetching HTML is basically
the same, there's no difference, but with HTML's possibility to just fetch small snippets from the
backend, and then swap them into the DOM, and it's feels like an SPA, and another advantage is that
it's really restful, it's for HTML's, the stack is called whole hypermedia, and whatever you'd like,
you don't have a tight coupling between front and the backend, and you can just change your backend,
don't modify your front end, it's also great, yeah, and HTML's is not the only game in town,
there are different approaches for Lara, there's like Maya, for Rails, there's hotwire,
and for Elixir Phoenix, there's like you, and for Django, people usually use HTML's, which is kind
of a little bit special, it's different, but I like it, because it's more low level, you can do
a little bit more things, yeah, but it's not as tightly integrated, yeah.
Okay, so let's have a look at Django resume, as freelancer sometimes, you have to update your CV,
and, oh, procrastinate, by building CV management app, and for me the choice was kind of obvious,
and, yeah, I looked at existing solutions, but they are all were implemented in things like
next jazz, and I thought, I'm doing Django all the time, maybe I can pull it off just using Django,
how hard can it be, and, yeah, there are some additional functional requirements
when you write something like a CV management app, and the most important is that it probably should
be easy to customize it, because different people have different needs, so academics have maybe
list of publications, designers have pictures, images, and portfolios stuff, and, yeah, that's
different for every profession and so, and I don't know every profession, so, I can do it by myself,
I just provide an application architecture, so people can build stuff they need for themselves,
and, yeah, the data for each plugin is stored in a central JSON field, and under the name of the
plugin, so each plugin has its own namespace, and, yeah, you don't have to write, if you want to
write a new plugin, you don't have to write any Django bottle, and you don't have to do any
migrations, because, yeah, it's all stored in the JSON field, but you still have to specify
somehow the schema of your data, and also do validation, and you can write just the Django form for
that, because, yeah, they do validation, and you can specify the schema, and also you have to
make sure that the clean data attribute of your Django form is JSON serializable, but if you
write a form that does that, then, yeah, most of the programming part of your plugin is already done,
you need two things, additionally, one Django template to render the plugin data to HTML,
to show your plugin, and one Django template to render a edit interface for your plugin data.
Yeah, so, and then there's some edge cases like, if you have lists of stuff, if you add a tag
to something, then you probably don't want to send all the data to your backend, and then,
because it's not here, if you get rendered HTML back, then you have to click on edit again,
if you want to remove the tag, so it's better to manage the state of those lists in the front end,
and then if you've finished editing just send all the data to the backend, and I use welcome
comments for that. There's a second one called editable form, which is kind of a shortcut for
not having to style forms, because this could also be hard, you can just reuse your plugin
data to HTML template, and sprinkle in some content editable attributes, and then have a form
from HTML form rendered from your Django form, which is just hidden, and then have a web component,
which connects the content editable text to the input fields of this form, and then subit the form
just using HTML. Yeah, you could also use an SPA for that, and it would probably make sense
if your UI requirements are really complex, but web components have some advantages like
you don't have to download a big bundle, they are standard space, so you don't come back into
your project a few months or years later, and you have to update everything, and it doesn't work anymore,
so that won't happen using the components. But web components are also a little bit more complicated,
because you have to write some more boilerplate, and it's a little bit more complicated, but
you can, what I did was I just wrote the functionality in spaghetti JavaScript, and then pasted
this JavaScript into an LNM, and said, oh, maybe you can generate a clean web component out of this,
and write some unit tests in it, plot 3.5, so net it, and it looked quite good, and so I didn't
have to remember all this lifecycle hook stuff in web components, because LNM did it for me.
Yeah, then you can use also LNM's for structured JSON generation, if you have an example of
how your data should look like, then you can use this as an example, and just say, yeah,
use a different theme, different contents, and it will do that works pretty well, but it's
also kind of boring, but what's really interesting is you can maybe
plug-in development, even easier, by providing the existing plastic plugins as future learning
contexts to an LNM, and then provide a new prompt for an plugin, and here's some examples,
here's a new prompt, just write the plugin, and yeah, this kind of works, it's experimental,
it's not really stable, but that it's even possible, it's kind of fascinating, so yeah,
and now I want to show you a little demo, a little overview of how this all looks like, and then
web components, how they behave, and the interactivity, and also maybe we can ask an LNM to write
a plugin for us, let's see, do I have internet here? Okay, just take my phone, yeah, so this is
this one, this is general resume, and there's a cover, let us think, if you click edit,
then you can just inline edit the content, so for example, this stuff, I can just add some things,
and this now doesn't look like a normal website, it just updates instantly, and yeah,
you don't have this page reloading going on, in the main part of this, this third partly package
is the CV, looks like this, and also if you here, maybe we check some more complicated
element like a new timeline entry, so I can hear add some badges like Python or type script,
and remove some other stuff, and submit it, and it's just there,
there are error messages, if I break something like break this URL, then I should get an instant
error message, but it's not generated in the front end, it's coming from the back end, so
yeah, and if I want to delete it, it's also just gone, okay, that's how the edit stuff works here,
and yeah, this is all HTML and general, okay, let's try to add a plugin, I have this profile,
this is a house plan, but this far or correctal, let's see, yeah, this one, and maybe she needs
a plugin to break about the height of a very permanent, because that's something to be brought
off, apparently, okay, so I need a prompt, I won't write it, okay, and if I click general code from
then it will try to to create some, I use a small model, a cloud 3.5 iq, which should be enough
for this small task, so now the element m is generating code, and yeah, here is now the plugin data,
you can see it's later here in this field, and then there's a source code for the module
which is basically the form, and then template to render plugin data to HTML, and then template
for edit the plugin data, okay, now the element m is done, and yeah, it brought some code, I don't know,
in some templates, looks good, looks good to me, I just have to start the development server
because experimental, but if I reload so now I now I have a preview of this plugin, and it even
then has a small world for the location, which is kind of great, and I can edit it, say,
called Hese, maybe, so and now if I, yeah, this is now the plugin data in the JSON field,
it's kind of neat, and also I wrote in the prompt that the pyramid has to be at least 50 meters,
so let's see if the error message works out correct, that's that it's 20 meters, oh, it also works,
yeah, so, no, didn't change it, yeah, there's somewhere in error, I don't know, okay, yeah,
it's not perfect, sometimes it works, let's see, if I take the working exam now the people
is not working, okay, yeah, but now if I want to use it on the CD page, I can just say it here,
and then it should be available in here on edit, I broke it, no, but you get the idea,
okay, I probably need to restart the server, okay, now it's here, yeah, okay, and here's also
now the error message should show up correctly, yeah, okay, yeah, so, okay, thanks for your attention
questions, yes, do you have some question, oh yeah, just one, just one, up to,
just a question regarding the resume, there is a JSON scheme for resumes,
is it accidental that you haven't used it, or is it because you want to extend it in some way,
there's a JSON scheme for what for resumes, I didn't, didn't know it existed so, yeah,
nice to know about this, I have a look at that, yeah, another question,
hello, hi there, thanks for the very interesting talk, a question I have, I was also working on
a bit of a Django project using HTML and one of the things that we're running into is you get
like these very, a lot of very small snippets of a Django template files and they do like one little thing
and that's I think that tends to happen because you're using HTML, but how can we
be more in control of that and be more in, you know, don't lose ourselves in the, in the
the revenue of templates, yeah, one of the approaches would be to use cotton,
gipses, Django template parses, package, where you can just define your parses in line in
your Django template and don't have to use different files, Django template parses is probably
the name of the package, yeah, and yeah, in this case I saved the snippets in the database,
so this is also an option, but I can't recommend it, it's probably unsaved, so yeah,
thank you, so if we have no other question we can go, thank you so much,
yeah, thank you