Modern JavaScript for Django Developers

Hi there. So my name is Corey Zoo and today I want to talk to you about modern JavaScript. And uh yeah, your first thought might be JavaScript. Uh are you sure you're in the right place? Uh yes, I know this is DjangoCon. And uh yeah, I'm still here to talk about JavaScript. And to to tell you why, like I first I first want to go back in time a little bit. And so this is me in 2017. Uh I was feeling pretty good. I was feeling pretty relaxed. Um I had just uh gone on sabbatical from uh a job as as a CTO of of a relatively big team, uh maybe a 30-person team.

And uh and yeah, I was feeling good. And I didn't really know what I was gonna do with my sabbatical. But I knew I I wanted to build uh I wanted to build stuff and and put it out into the world. And you know, I had been a Django developer. Our company had been building a big Django application for the better part of the decade. Um and so I knew I wanted to build stuff. I wanted to build stuff on my own and I wanted to do it in Django. And at this time in 2017, uh There was there was this new newish web web framework that had just come out. People were were really excited about it. It was called React. js, and I was like, cool.

So I'm gonna I'm gonna build some kind of side project. I'm gonna use Django, I'm gonna use React, it's gonna be great. Boom. And so I go to the React tutorial. And there's like a hello world thing and it looks it looks something like this. And like at first blush, this this is very straightforward code to read. There's you know there's a couple of import statements. And then there is a function call that's that's rendering something that looks like a heading to a div uh with with an ID or a document element with an ID root. And so like this makes this code makes perfect sense to me. Um and I'm you know I'm I can make I can reason with it and and yet at the same time I'm like

wait a minute how do I use this code And at the time I had never seen imports in JavaScript like this. I didn't, you know, w where am I importing this from? Like like I don't I need to include some sort of static file here to to be able to to call some function defined elsewhere. Um And then like you know this this H1 thing like it's not it's not actually valid JavaScript. This is this is a special React syntax called called JSX. Um but basically it was like oh I have No idea how to use this and how to do this in Django. And that kind of sent me off on a long, uh, a long journey. Uh learning about JavaScript, all that had happened in

the JavaScript world while I had been busy coding in Python. And um And over, you know, over some period of time I sort of figured a lot of this stuff out. Uh and my goal with this talk is to sort of like bring you on that journey and hopefully sort of bring you along faster than than I went along. So you can you can start using modern JavaScript in your Django projects without having to go through a lot of the sort of like figuring out process that I had to go through. So before getting into that, let's talk a little bit about sort of what was going on pre-2017 and in my life. And so Like I said, we we we were running a big Django application uh at my company.

Um and and we were on what I would call like the default path uh to Django and JavaScript. It it looks something like this Uh first you build out your site using using your normal Django stuff, your views, your templates, your forms. At some point you you have to build something that has dynamic functionality on a page. Maybe you've got like a select drop-down and then the you know that controls the results of the next select drop-down, like a country state selector or something like that. And so you Google, you know, you go to Google, you type in like, oh, how do I do cascading select Django, maybe cascading select JavaScript? You find something on Stack Overflow that works, you throw it somewhere in your template file probably.

Maybe you add a library or two to make that work better. And then wash prints and repeat. And like this this is so this is kind of how the JavaScript just gets brought into the Django project, sort of like page here, page there, functionality here, functionality there. We were doing a lot of jQuery at the time. These days maybe you're using something else. Um and like this feels great, right? Like this this feels like it works. Um it's very simple. Uh you know, you kind of introduce JavaScript when you need it. Uh, you know, we all recognize how this works and and your pages are um they're kind of self-contained, you got all your logic right there. So this is this is kind of like a nice uh it feels nice. It feels like a reasonable way to to do JavaScript development.

But what I would posit is that it doesn't really scale that well. And what I've had is like over time this just starts to get more and more unwieldy. Your front-end code, like it, it starts kind of getting spread around and scattered across all these different template files where the logic is is used, uh, which which makes it hard to sort of Track stuff down, it makes it harder to to reuse bits of code, create functions, create you know libraries, that type of thing You're usually just sort of like at the whim of of whatever uh you know static files you happen to include it at the in the base

template or or somewhere in your template. Um and like you you you try to maybe you try to organize this stuff, but like You're not really like following any particular patterns. You you might end up with this sort of like homegrown front-end organizational system that is uh likely replicating a lot of what uh what there exists tooling to do for you today. And in general, it can become like a like a little bit of a complicated mess. So like I I I I think this kind of leads to what I would call like front-end spaghetti code. Um just like front-end code that's kind of like Sticking its tentacles in all these different places and um a little bit hard to untangle from from itself. Um And so in in sort of like a Django JavaScript architecture tree, um which is something I made up, uh

I'll call this like the low JavaScript ad hoc architecture. And it's so it's low JavaScript because like by default you're you're you know gonna try to use Django for almost everything, only really bring in JavaScript when when you need to. And it's ad hoc because you haven't really come up with any uh particular system or organizational plan to to do this. You're just kind of throwing JavaScript at the wall whenever you need it. and hoping it all works out. And yeah, I don't really recommend this particular architecture. It can maybe work well for like a super small project, but you have better options out there. So what are those better options? And and one of them is um is is also a low JavaScript architecture.

But instead of instead of doing it in this like kind of ad hoc way, you do it more designed. Typically come up with like a a low JavaScript framework and then you use that low JavaScript framework to do a lot of the stuff that uh you might normally be doing in an ad hoc way. Um so HTMX I think is what uh The Django community is most jazzed about these days in terms of a low JavaScript framework that will um that will let you do some pretty some pretty cool stuff on your front end. There's also others, there's there's Hotwire uh which is a similar thing uh but kind of pioneered by the basecamp folks, so it's more popular in the Rails world. Um there's uh a Django specific thing called called Unicorn, which um which has similar goals.

And these this is a good place to be for your JavaScript architecture. If if you don't uh if you don't want to do write any JavaScript, then like these this type of solution with one of these tools uh doing most of your stuff uh on the server side can work really well. It's not the point of this talk. So I'm not really going to talk more about those options except to say that like they're perfectly good options Look into them if if you don't want to use JavaScript. But what I want to talk about is the high JavaScript world. And so in the high JavaScript world, instead of sort of saying like I I want to, you know like minimize the I want to write basically as little JavaScript as I possibly can. Um instead you say, you know, JavaScript is

is a reasonable language. It uh is you know very popular on the web and I'm gonna embrace that, I'm gonna use it and uh and I'm gonna kind of like go for it with JavaScript. And and JavaScript will be sort of like a peer to Python in in my code base world. So these these types of projects are usually using like a one of the more popular JavaScript frameworks. So these these days that's that's maybe React and View. Um Angular historically has been um pretty popular in the Django world, although maybe going out of favor a little bit these days. Um Svelte is is maybe the the latest hotness. Actually I'm I I'm not like tapped into the JavaScript world enough to know what the latest hotness is. But Svelte was like the latest hotness maybe maybe two years ago, which is why which is why I've heard of it. But anyway, so

so right, so Why why be in this high JavaScript world? And yeah, so like how much how much JavaScript do you want to use in your project? And and the way I think about that question, which I kind of already alluded to, is like Do you want JavaScript to be an afterthought or do you want it to be a core part of your code base? And so like if you it You know, if you are a person who who really just like never wants to touch JavaScript, um then yeah, like stay in a low JavaScript world. If if you want it to be you know, a core part of your code base, if you want to have tests, if you want to have, you know, a good developer experience, if you want to um If you want to be treating your front end the way that

most JavaScript developers would treat their front end , then maybe consider this high JavaScript world. And so like so yeah, so like the case for Lode. js, like basically like yeah, you don't want to write JavaScript. Um the one thing I'll add is like if if you're a beginner, I would I would recommend staying in a low JavaScript world, um, at least until you start to feel comfortable in Django. Learning web development is uh is definitely enough of of a thing to tackle to tackle at once. And so learning the Django side of the house and the JavaScript side of the house at the same time, I think, is a lot to bite off. But but yeah, so on on the high JavaScript side, like obviously if you like JavaScript already, that's

that's a good reason to use it. Um if you have a very complicated front end, I I think you'll You'll be happy that you you kind of went for high JavaScript and and if your project is big um I think you'll want it. And like I don't want to say that JavaScript is inevitable. Instagram on uh on you know Django and HTMX and never has to write a line of JavaScript. That would that would be amazing. I would love that. It feels pretty inevitable today. to me at least. And like just based on sort of that, you know the way like where people's expectations are for for the usability of of a front

end um in anything sort of like remotely complex I think you're gonna be in a world where you're you're gonna be writing some JavaScript. And if if you know that you're gonna be writing some JavaScript, then like Better to be in this high JavaScript world where your JavaScript development experience is pleasant and and you have access to sort of like the latest and greatest tooling than to have it be this sort of like neglected thing off to the side that you then have to, you know fight through, essentially. Um so I kind of think JavaScript is inevitable, and that's why you might as well go for sort of like a high JavaScript world from the get-go. And yeah, like living in a high drive script world, it's it's nice. Um you like I said, like the developer

experience is really good. Um you know there are like if on the Stack Overflow surveys like like JavaScript developers are like the happiest developers. JavaScript is really good. And uh the problem is that like getting to a high JavaScript world can be painful. And it's painful because it's complicated, although it's not as complicated as it sounds. It's also painful just because like I think the community doesn't do a good job of uh opening itself up to like non-JavaScript developers. And so a lot of the projects that you'll try to use on the Java with JavaScript on the front end, like they also assume that you're kind of like probably going to use JavaScript on the back end. And and obviously us as Django developers are likely not going to be doing that.

So getting to this high JavaScript world is can be a bit of a mission. And that's really what I want to spend the rest of this talk kind of like talking you through. And so what is what does Hi JavaScript look like? And your first take uh will probably look something like this, uh which you can call like the client-server architecture. And basically in this world you have your JavaScript projects and your Django project. They're basically two completely standalone projects that that just speak to each other over API. So you have Your front end on one side, it's um you know it's using a framework, it's it's probably a a single-page app, uh, and it's it's probably just sort of like a pure JavaScript thing

You have Django on the other side. It is headless mostly, so you're not really using like Django templates or views or anything like that. Instead you're using Django Rust Framework. to basically be uh an API into your database and your authentication system and stuff like that. So this if you just Google like, you know, using React and Django, this is this is the architecture that you're most likely to sort of Find people recommending and telling you that this is how you should do it. And this architecture works well for certain projects and for certain teams. It allows you to go all in with a JavaScript framework. And so like if you're already a React develop React developer and you want to write your entire UI in React and you know that from day one, that that makes sense.

Similarly, if if you're a team and half your team knows React really well and the other half of your team knows uh Django REST framework really well, um then you get this nice sort of like clean like okay here's the front end world and here's the back end world and and you front end people you never have to think about a database like you just you know we'll we'll give you like a server somewhere that you can like test your APIs. You back end people you never have to like know how to change the color of a text box or something like that. And so like like this this this architecture can work well. I I think it works well that maybe the bigger your team is. But like I want to just kind of talk about what it looks like to build a forum in this world. Um and so like first First, you're gonna need some APIs, so you're gonna create your your you know

your create, read, update, delete APIs for your for your data model Then you're gonna have to build some JavaScript UI components in your framework of choice. You're gonna have to write a bunch of glue code. Um that glue code is gonna hit you know your list view API, it'll you know render your list of objects and then um you know wire your uh inputs to to the you know you know, associated JavaScript data model and then when you press save it's gonna hit your update API. Um so you're gonna write a bunch of that stuff You're gonna have to authenticate. And so you'll probably be doing some sort of like token-based authentication thing, JWT something something.

Cores, you might have to deal with cores, cross-origin uh issues as a result of uh of your front end and your back end maybe running on on different subdomains or or in different processes. Your front end might have to handle URL routing because if you're building a single-page app, then you're probably doing URL routing on the front end. And etc. And so like this thing that Django does, you know, in you know 30 seconds I can spin up a form and and basically have have like a a complete like you know create reit update thing working like like it's just it's it's a lot more work in this architecture. Sure. And that made me sad. And and so I don't I don't particularly love love this architecture either

Looking at like the the intro to Django and and like this is like from the Django docs, like here's all the great stuff that Django brings to the table. Um and this architecture like kind of throws a lot of that stuff out the window. Like it's It's not using the URL and view system really. It's not really it's not using templates, it's not using forms. Um and it kind of half uses like a lot of things like authentication and internationalization. Like you you have access to those features, but you're You're wrapping them, you're you're probably using uh extending them with a library or or or something uh something like that. And so um Yeah, like like I think one of the reasons why I love Django, why a lot of us love Django is that like it it does so much for you. It it sort of like comes with like

a lot of batteries included and like like you know a lot of stuff working out of the box. And if you use this architecture, it's kind of like, yeah, maybe like maybe bring your own batteries. Like we don't those those nice Django batteries, those are good batteries, but like I don't like those batteries, so like come come bring your own batteries. And so for this one I I chose chose an Energizer Bunny uh mascot because he's he's gotta like carry his own batteries around uh and and bring them everywhere he goes Um so right, so so this wasn't great for me either. Um and uh And so what's left? And thankfully there's there's one other option, and that option is what I would call like a high JavaScript hybrid approach.

And for me this was this was like the unicorn that I had been searching for. Once I had found my way here, I was like, of course, like this this is the way. uh that I want to be building um be building my complex uh Django projects. So so what does a hybrid architecture look like? And basically uh instead of instead of like choosing like locking ourselves into into like client server um you know, for our whole application. Um we we pick it at the page level. And so uh some pages, probably probably most of our pages will be will be Totally vanilla Django. If you're building a setting screen for user preferences or something like that, there's no need for that to be this like complicated, interactive, single page, blah blah blah.

You can just um You can just drop in a Django form and and not have to worry about it. But when you wanna sort of build a rich UI, uh then you drop into modern JavaScript and then uh you have access to to all the tooling and libraries and um and good stuff that modern JavaScript can bring you. And like this sounds super obvious once once you piece it together, but if you uh if you haven't sort of wrap your head around the JavaScript world. Um the the key insight is like at the end of the day, like JavaScript is still just another static file. And so You can still use React and Vue and these other things just like you would use

drop in a jQuery from a CDN or something like that. It's it's just another static JavaScript file that gets landed on your page and and renders your thing. Um But wait a minute, so what about this? Right? So how do these how are these imports gonna work? How what is this, you know, how are we gonna do this H1JSX thing? And um and the answer is that is that you need a toolchain. Um and and I will say like like The idea of needing a toolchain, it it was it was very, very true, you know, five years ago. It's it's becoming less and less true uh every day. Browser support for um a lot of modern JavaScript stuff, including imports,

not not really including JSX yet, is is getting a lot better. And so you Like you can actually get pretty far with with modern JavaScript without a toolchain. But toolchains are are nice and they're relatively easy set it up. And so I recommend them anyway. even though technically maybe you could you could get away without them and and and some people some people may choose to And so what's what's the point of tool chains? And and so like like I said, sort of like they were they were much more important um you know maybe five years ago. Uh but basically it's like Python, we have the luxury of of mostly controlling what Python environment our apps are going to run on.

I know that's not always true, but but for web it's it's pretty true. You can control what version of Python you're putting on a server. In the JavaScript world on the front end you don't have that luxury. Um your your front end ideally it runs on some you know ancient Nokia candy bar phone or something. Uh it should run you know on on iPhones and Android and And Linux and Windows and and all that. And so the JavaScript world has like it's kind of been locked into this like perpetual backwards compatibility problem uh where because JavaScript needs to run on all these old browsers and everything else, um it was hard for the language to to innovate. And that's that's where toolchains came in.

And so Toolchains basically allow the JavaScript world to keep iterating, allowed the language to keep getting better. And then you you funnel this new JavaScript through a toolchain and you end up with something that still works in all browsers. And so so yeah, like if if you still think that like you know JavaScript is like this clunky language with no features and whatever else, then like Like you're probably not using a toolchain and you probably haven't been paying uh enough attention to to advancements that have been happening in the JavaScript world. Um and so like JavaScript, like yeah, like now it has modules, so um you can import, you know. JavaScript stuff from uh you know from libraries that that you install.

You can import it from other files that that live on your system. So you can you can organize your your JavaScript code however you want to organize your JavaScript code, just like Python But this isn't always obvious to someone who's only done JavaScript development in the browser It also has, you know, like new syntaxes have been added to the language or or extend the language and allow you to have sort of like a richer experience building UIs. So okay, so we're gonna use a toolchain. What toolchain should we use? Um and this like this this is where I got really frustrated with the JavaScript world because um Because A, there's like a hundred different options, and then B, uh

the JavaScript world is like really unapologetic about um about like like teaching you how to use this stuff. Um it's it's uh they they make I found they make a lot of assumptions about like the things that you would know and And I found it very overwhelming trying to figure this out when I was when I was first getting into it. But anyway, so the React Docs, they recommended like if you're integrating with an existing code base , to to try out this like more flexible tool chains uh area. And so you go over there and then like Like so again, there's like there's like a ton of options. Um and like when I was reading this, like

Neutrino combines the power of Webpack with the simplicity of presets. Katrina combines the power of rubber. Like my first thought is like, what is a webpack? What is a preset? How like You know, what is like how would I even think about cho like is this list supposed to be helpful? Like this is supposed to help me choose something? Like I can't even I I'm gonna have to like open up a new tab for every one of these words. And so I I found this very frustrating. Again, uh it it made me feel kind of kind of dumb. Um but I promise like it's it's not as hard as it seems. Um these tool chains are are are relatively Simple, there's a few tools, they they work together. Um so so right, so what's in the toolchain?

And it's three things. The first thing is a package manager. And the package manager is just its pip. That's really all you need to know about it. You're gonna run you know, package manager install blah. It's gonna have a file that tells you all the libraries that you've added to your project and and what version they're on. It'll manage your dependencies and stuff. The main options these days are NPM and Yarn , and it doesn't really matter which one you can pick, but NPM is a little bit more popular. Uh so I recommend that. And and I'll say like these like tool recommendations, like there's it's just like pick the most popular boring thing and move on is is my philosophy. I'm not trying to be like the on the bleeding edge of of wherever the like the JavaScript tooling is going. And so that's that's how I made these recommendations.

If you talk to a JavaScript person, maybe they'd say something else but uh but these will all be be perfectly fine for for a Django project. Um so the second piece of the toolchain is the compiler or the transpiler. Um and It's this thing that that allows you to sort of like write new JavaScript or different JavaScripts. Um and it will take uh modern, you know, like these these newer syntaxes and features and turn them into um turn them into code that runs on a browser. So Babel 's the most popular one and you can see like it'll you know it'll parse this JSX thing, this H1, and turn it into just like a normal function call behind the scenes um so that you don't have to write you know this code that looks kind of

less nice than than uh this code on the left. Um so Babel is uh a good compiler. Uh and then the last piece is the bundler. Um and the bundler, the bundler does A few things. It's it it it kind of carries a lot of weight. But the main thing it does is it makes bundles. Uh bundles are just uh a single file with a bunch of bundled code into it. And so the way your bundler works is you'll you'll tell it sort of like, here's my entry point. So like maybe this is like my React, you know, my React home or whatever. And then your bundler will see everything that you've imported in that file. It'll go pull that code in, find the dependencies of that code, build a tree.

You know, compress it all together, turn it into a single file, uh, and then that file will be like a self-contained thing with with the exact code necessary for that entry point to run. Bundlers also kind of have hooks that you can add in sort of pre and post-processing steps. So your your compiler will kind of get integrated with your bundler usually. And uh you know they can do things like uh you can add you know CSS processing and other stuff. But um anyway, there's a lot of there's a lot of options out there but but Webpack is is uh is the by far the most popular one. And a lot of like if you you know if i the all all those different tool chains, you know, Nix and Neutrino and Razzle and Dazzle and what and whatever they are.

Uh like a lot of them are using these tools behind the scenes and they exist to sort of like remove this complexity from you, like to like so that you don't have to ever know that they exist and uh you don't have to you know ever edit a webpack config file or whatever. Um the problem is they're mostly designed for the JavaScript ecosystem and so they like they just don't like plug that cleanly into into Django, which is which is why I prefer to just work with the primitives. And uh the primitives are are relatively straightforward. The config files are are not that You know, complicated or anything else. Um so so yeah. So that's your pipeline. Uh so just to review, we've got NPM which will control

our uh all our third party libraries and packages and stuff. We're gonna use it to install uh our dependencies. Um Babbel is going to allow us to to write code in in the latest JavaScript features how we want. We can use uh JSX and TypeScript and and these other fancy things. And then Webpack will uh bundle it all together and create uh you know one or more bundle files that we can just drop into our uh into our pages and and they will work beautifully in browsers. And so finally coming back to Django um and and this insight that that at the end of the day uh your uh you know your fancy modern JavaScript, whatever is just another file, uh now we know it's a bundle file.

Um you can just shove this whole thing in front of uh in front of your Django static files And so you can have your JavaScript source code in this modern thing running through this toolchain and it'll spit out bundle files, which you can then just drop into your static file system however you want. And then you have Django serving a React app for you. And it it is just that simple. So what does that look like in practice? And so here's here's like how I structure my projects. So you know you've got your manage. py and your your site directory with your settings and stuff uh your root URL confit, then you've got you know some apps with your models and stuff, and then

basically you just have another folder somewhere. Um you I call it assets, you can call it whatever you want. And in that folder, you'll have your modern JavaScript code, your React pages, whatever you want to stick in there. And then that stuff gets run through your toolchain and spat out into your static directory. Um and yeah, I think uh you know in development you can just build that into your system. Usually you'll have uh your built into your CI or your deploy process uh will will run the same thing uh and and uh Django will just serve those static files uh just like any other static file. And so here's what a single-page React app looks like

in a Django template. And so on the left is that same code snippet that we've seen everywhere. That gets run through the pipeline. and stuck into a script that is just included just like any other script in as a static file. And then the only other piece that links these two is this div with the ID root uh which is declared in the Django template and React will then find that div in the Django template and render uh itself into that div And so on my website, the link uh is down there, uh and uh I'll there'll be uh another link at the end of the talk. But I I I go into much more depth about

how you can do this, all the config and everything else, and then also kind of like all the API side of things and working with data and all that. So if you're interested in how to set up a Django and a React hybrid application together, I recommend you go check out that page and find details there. And right, so so why bother with this? So so so why hybrid? Why is hybrid better that why do I like hybrid better than this like client server thing? Um And the first the first one is just like like we don't throw away the batteries anymore, which is great. Like like because um because Uh we're mostly just using Django as is because React is totally optional on any given page. Um we're still using everything.

We're still using the URL system, we're still using templates and forms. authentication and and all that good stuff. And so we can just use Django how it was meant to be used, which which is great. It also vastly simplifies deployment. And again, like now, you're not deploying a React app running on Node over here and a Django REST framework over here and then messing with cores and it and whatever else. You're just deploying a Django app, and that Django app is hosting a static, you know, a static file. So your deployment is exactly the same as if you were deploying a Django project of no JavaScript and you can treat it the exact same way. Which is great. You can also

so another nice thing about this is that you can you can work with data without having to create APIs. Um and so in the client server world like If you had an API, if you had in this example, let's say we have an employee data model and we want to we have a department field on the employee data model and the department should be one of these. these choices. If you wanted to build a React app that allowed you to set an employee's department, There there isn't like an obvious way to to pass this information to React. You could create an API for it and and and then like You'd have to hit this API just to just to populate a drop down, which seems kind of crazy. Uh maybe there's some sort of like schema introspection thing you can do with Django

Rest framework, um, but that's uh That's kind of territory that I don't always like going into. Um or you can just duplicate this list of code these list of choices in um in JavaScript. But then you know if you add a new department then um you're gonna have to remember to keep those in sync. But in a hybrid world, you don't need to worry about any of that. Because your React code is running in a Django template, you can actually just like pass some context to that Django template. And so in this case, I'm just serializing the department choices into a dictionary. and passing them to the template. And then you can use Django's JSON script tag to to serialize those choices into like a div

element essentially and pull them out in JavaScript just by grabbing the element and and the contents. and parsing it in JSON. And so this this will allow you to get access to these employee department choices anywhere in your React code. They're being served directly from Django. You don't need an API or anything like that. It's just as easy as passing context to review um and a few a few helper function calls. So this is a nice little benefit of hybrid apps that I like over the client server approach. And like most importantly, like You you get the modern front-end development experience. So you'll be able to use the the latest JavaScript frameworks like React and Vue. If you've never used them before, they um you know they've got a bit of a learning curve, but

Building UIs in them is is uh is very enjoyable once once you get over the hump. Um they also there's just like such huge amounts of uh a front-end tooling around these things now. Like like if like you can you can build a very complicated UI with like you know video uploads and and like super complicated navigation. There's like all these React libraries and view libraries that will just like do this stuff out of the box for you. So you you get to sort of stand on the backs of uh all of the uh work and advancement that has done on been done on the front end over the past five plus years, um which which is really nice not having to to re-implement uh a lot of that stuff. I mentioned you get better dependency management.

So you know that'll all be sort of like natively baked into your JavaScript code and handled by Webpack. You don't have to worry about. including the right libraries and static files and whatever else in your base templates. And then you just get like a better JavaScript development experience. You get you know new features and syntaxes, you get Things like TypeScript if you want, other front-end tooling, you're like so the same in the same way that JavaScript has innovated uh a ton over the last you know 10 plus years. Uh CSS has also gone through tremendous innovation, but because of this backwards compatibility issue, uh it's again it's you can't bring all that innovation uh without a toolchain. But if you have a toolchain set up, then you can use things like SAS or Post

CSS and apply sort of like a similar upgrade to your to your CSS development experience. which which I recommend. And so yeah, so like what is What is in uh modern JavaScript? And uh honestly ES6 is ES6 was a big update to Java that it's probably like six or seven years old at this point. Um so it's it's Barely even modern anymore. Um, but if you if you haven't used it, um it has a bunch of stuff. The I think the most important one is modules. Uh so I've talked about this a lot already, but Just being able to structure your code however you want, define, you know, break it up into files and folders and whatever else, uh, and then uh be able to sort of import and export stuff.

Um and and just have a front-end code base that's organized is a nice change of pace from from how things used to be. ES6 also includes classes which which work uh just like um just like Python classes basically. Uh so no more do you have to sort of like invent your own JavaScript class system They have arrow functions which which are just like lambdas essentially, but allow you to do uh shorthand for um inline function declarations and and you find yourselves doing that a lot in using frameworks like React because you write these little event handler things. And they're really useful for that. They have template strings, which work just like F strings.

They have default argument values. And like In general, um like you know like programming languages like like the same things are useful in all programming languages. And so just how Python has gotten better and better and better, JavaScript has gotten better and better better too. And like like these days, JavaScript is it's it's It's probably got like everything that you you would want in a programming language. And and and be in be set up to use it. Um this is uh JSX. Uh and and JSX it's it's a lot like uh like a Django template, honestly. But instead of having like its own template language,

you can kind of just drop into JavaScript anywhere. So you can write your UI in something that looks a lot like HTML but isn't quite HTML, it's actually like a little bit more XML-y. And then inside that HTML you can uh you know put in some brackets and drop into arbitrary JavaScript code. And so this allows you to Again, sort of like like mix and match your UI with your business logic in ways that allow uh building a UI to be like a much more pleasant experience. Um, quite similar to Django templates. um but button JavaScript. View does something similar, you can see here with this template thing. Vue also has these sort of like these single files that that uh have uh a template section, uh a script section, which is where the business logic will will live, and then uh a style section.

And the styles can be scoped to this thing, so you don't have to worry about like your you know one particular component style like bleeding out and you know affecting other stuff on the page. So that's nice. This allows you to create these sort of like self-contained reusable components that you can then uh combine as little like building blocks to build UIs. There's also TypeScript. TypeScript is uh, again, it's very similar to uh Python 3's typo annotations. But it allows you to declare, you know, types for classes, for uh for function calls, and uh if If you've set it up, then you'll get nice uh IDE support for this, auto-completion, uh

you know, red squiggles when you do something wrong, all that good stuff. And so yeah, just like Python type annotations, it's um it's a really useful upgrade to uh development experience uh when you're when you're working with it. And And lots more, yeah. So um uh you know I I I've I've just scratched the tip of the iceberg in terms of JavaScript, both in this talk and uh in my own career. Uh I still feel like I'm uh I'm you know barely swimming in terms of what you can learn. Um but I will say like it's worth it. It's uh Like like being being in a position to do JavaScript development the way it was meant to be done, the way that uh you know JavaScript developers are are doing it these days is is really nice

and uh and And I would say it's worth the investment. So yeah, so that's that's it. Thank you. Uh Thank you for your time. And um and I mentioned, yeah, this this whole talk is uh is based on a series of guides that I I wrote up. So if you want to see uh any of this stuff in in like much, much, much, much more detail. Um you can go to saspegasis. com and then click guides and uh you'll find uh very extensive write-ups there And that's me on Twitter and on the web. Thank you.