Modern JavaScript for Python Developers

uh cool all right thanks uh thanks everybody and uh and welcome and yeah so today uh i wanna talk to you about javascript um my wife made me at the slide i was just gonna jump in but um david introduced me um so i don't need to say too much here but yeah i was the cto of a company called tamagi from uh 2006 to 2017. i remain the uh top contributor to our main repository which is a source of pride for me i'm sure i'll get past soon um and since 2017 i uh sort of have become kind of a serial side project maker um an entrepreneur so i kind of make internet experiments and uh try to try to sell things online um yeah so javascripts uh why are we talking about javascript at pike um and so your first reaction is probably javascript and then your second reaction might be something like this which i won't read aloud um but but yeah javascript kind of maybe gets a little bit of a bad rap in uh in the programming world this is uh another one that you kind of see tossed around um the joke being that there aren't very many good parts of javascript and when i was just sort of googling for memes i found this one which uh yeah i don't really understand it but i love how happy the python guy looks um so i thought i would throw it in here um but yeah so i think i think javascript you know can be stigmatized especially by those in the python world who think that python is sort of the greatest thing in the world which which you know i actually you know i kind of believe and probably a lot of us do um but if if you're a web developer uh in in 2020 then you probably need to use javascript um it's everywhere it's sort of unavoidable at this point um and also i will say that you know javascript it's not so bad um it's it's come a long way in the last uh in the last 10 or 15 years since since i first started my um my career in web development and and i'll i'll show you a few of the a few of the things that you may or may not know that javascript does these days and can do these days but yeah once you once you wrap your head around it the modern javascript ecosystem is is uh and developer experience is actually is actually pretty pretty decent um yeah so in uh 2008 when i first sort of started doing a lot of web development javascript was pretty straightforward it was sort of this thing that you put on your website when you wanted to add some dynamic functionality maybe like a little modal uh or an auto completion widget or something like that and you threw it on maybe maybe use jquery that was kind of around back then but by and large it was sort of this this relatively simple um and for anybody who's tried to sort of get into javascript in 2020 it looks a lot more like this uh you may or may not recognize some of these logos all of these logos but essentially javascript today is there's a ton going on there's there's package managers there's frameworks there there are entirely new versions of the language like typescript and and it's quite a lot it's quite intimidating and especially as sort of someone who identifies as a python developer just kind of wanting to use javascript to to serve my sort of web development needs it was it was really difficult to uh to sort of break into this world and figure out what all was going on here um and so my goal is is to teach you i guess sort of what i've learned um hopefully what you need to know uh in order to use modern javascript in in your web apps in 2020 um and i'm assuming you uh like me are python developers my background is primarily in django i've built a few flask apps so a lot of the examples in this talk uh will be based on django um and i'll say that at the top that this this talk is based on a series of articles that i wrote um and i'll link to those uh in the in the discourse and um and in the slides um so there's a lot more detail in there so hopefully if i if i go too fast or i cover things uh that you don't uh but don't land um there's you can always go back and and refer to these articles where there's sort of a lot more detail a lot more depth to everything i'm gonna talk about so i want to kind of start by uh by sort of describing how most front-end code bases that i've worked on have evolved um and so you know we would start out where you know for me it's usually django um but you know building out a site using your normal sort of django or flask tools your your views and your templates um you realize you need something dynamic to happen on the page and so you go to stack overflow you find a little snippet of javascript that does the thing that you need you maybe add a script tag to include some library from a cdn uh or maybe you maybe you copy and paste it into your app um and then you go to one and this uh you know this this isn't necessarily a bad thing and for for small projects uh this works totally fine um if if your project is not sort of too front end heavy uh or too large um this isn't too much of a problem you can go pretty far but as your project gets bigger this can create a lot of problems here's here's an example from um one of our repositories at zamagi um and this is this is our base template in django so this is sort of the the template that a lot of our other django views our other django templates sort of inherit from and you can see here um i don't know if you can see where my mouse is but we um we have this pattern where we annotate the request object in python to say which libraries we're using so we say like are we using nbd3 uh which is a graphing library on this page and if so then include these four um dependencies that mdd3 use needs or are we using data tables which is a library that sort of does sorting and search for data tables okay well then we need these three libraries are we using type ahead um and so you know there are a couple immediate problems with with something like this this uh you know first of all you're loading a lot of scripts on your page which is bad your dependencies are also sort of very far away from each other like this this logic lives in some base template um the thing that sets the the use ndd property on the request is probably in some python view code somewhere and then the logic that's actually using nvd3 is probably in a different javascript place altogether and so this is quite a common thing to happen to mature uh or more mature python apps as as they sort of take this ad hoc approach to um to sort of javascript and javascript dependencies as they end up with with a lot of this stuff sort of scattered around in different places uh it's pretty hard to reason with um and so i call this pattern server first um and it you know it's kind of you start with the with the web framework with the sort of the django world or the flask world um it's the most common one that that python developers choose and i put shoes in quotes because you kind of you don't really choose this architecture you sort of stumble into it over over the course of months or years of of slowly adding front-end stuff to your app um and in this world as you saw usually the javascript is included ad hoc at the page lump level sometimes that's that's baked into your template hierarchy sometimes it's not um and yeah like i said it sort of gets more and more unwieldy over time um and another thing which we'll see later is you're not really taking advantage of of what javascript can do today um so i kind of lovingly gave this the mascot of of the spaghetti monster because you know not not that your whole code is spaghetti but your front end code base kind of gets spread around uh all all different places and so it becomes a little bit spaghetti-like so right so is there a better way to do this and if you if you sort of start from uh you know 2020 i want to build my most modern my best uh web application that i can um you'll probably end up finding something that recommends you do something like this and so in this world you basically you create two separate entirely separate projects you have uh you have your sort of frontend project uh and and that might be its own entirely distinct code base and then you have your back end project and the only way they know about each other and the only way they talk to each other is through apis so these are often run by different processes one might be running in node and one might be running in python they might be running on two different uh subdomains and um and this is nice like uh this this has a lot of upside it it plainly separates your your back end and your front end and that can be really good if especially if you have a team and you have a team of javascript people and a team of python people and and nobody wants to sort of cross the chasm uh then you get this really nice uh separation um some of the downsides of this towards the bottom like your your back end basically becomes an api factory and so like in the django world you know you're throwing away django views by and large you're throwing away all of the templating system um similarly in the flask you're in the flask world you're not really using jinja flask is just it's just serving apis um and for us as python developers you like when you're doing development on the front end you you lose that sort of like familiarity of you know oh this is how i've been making websites for the last 10 years and now you're asking me to like do this entirely new totally different thing and i'm only allowed to write apis um and so the result of that makes um simple stuff more difficult it kind of it makes your deployment architecture a bit more complicated and so this isn't always ideal either and certainly for me as as like a single person doing doing my own sort of like full stack projects this um i didn't want to sort of like take on all these weights when when i thought you know why why can't we just use these two things together um so this one yeah i i didn't have as good a mascot for this one so i i call it the energizer buddy and the analogy is that um you're bringing your own batteries like you're throwing out the batteries that are provided by the python framework and you sort of have to bring all your own stuff to the table you have to re-implement everything um in in this sort of like new api pattern um so this i'm not going to read through all of this um but this this is taken from the guide and sort of talks about the differences between these two um and yeah i mean basically one is kind of usually started by server developers one's usually started by uh javascript developers they have sort of different properties around whether they use frameworks how they manage the javascript tooling and all that um and they both have pros and cons but but i have found that that neither has been sort of ideal for me um and so the architecture that i that i like and the one that i use for for most apps these days and and that i recommend the most is is what i call a hybrid application and in a hybrid application you you basically mix and match these two things and so rather than saying you know uh my front end and my back end need to be completely decoupled or um not taking any sort of uh structured approach to to organizing your front end code you sort of mix and match these two things at the page level um and what this allows you to do is take the power of modern javascript and and there is good stuff in there um combine it with the familiarity that you're used to with with your python web frameworks and um and develop applications that's uh sort of sort of meet both sides um a big downside of this is that you kind of have to dip your toes into javascript build tooling and that is not always the most fun uh process and so yeah so i wanna tell just like a short story of of my own experience um adding react to to a django project and so this would have been sort of like right when i step down to maggie i'm like building my first side project i hear that this thing react is like all the cool kids are using it i should be using it and so i'm like okay i'm gonna like use react in this project it's gonna be it's gonna be great and so i go to the react uh you know the tutorial and they have this sort of hello world code and you know for those of you who who know modern javascript like this this doesn't look too crazy for those of you who don't and for me at the time what what am i looking at like what is what is that import like how how does that import work and where does that lie like can i even do that and and then you go down and you see this this you know this h1 but it's you think it should be a string but it's it's not escaped by strings and you're like what what am i looking at and if you if you put this code into a browser into a javascript file and you try to run it like it's not going to work like this isn't valid javascript code and yet it's sort of front and center in the react hello world and like my head is like kind of exploding um but what i figured out pretty quickly is oh i i need a tool chain um and so yeah so why why tool chains and and the short answer is is so that we can do uh new good stuff with javascript and uh also support legacy browsers and you know like i imagine a lot of us have gone through you know the python two to three migration and um and we all know how painful that can be um in the javascript world you don't really have that option like your your code needs to run on you know it needs to run on ideally you know seven or eight different browsers you know all these mobile phones and and you have very little control of of what particular version of javascript is going to run on uh any particular device that your code is running on and so you have to be very defensive about it and so the way that the javascript community has has gotten around that is they have introduced tool chains that essentially allow you to write newer better uh easier to reason with javascript code um and then they turn that code into something that browsers can actually deal with um so that's what the tool chain does that's that's why you need it it's so that you can do stuff like this and um and not have it crash on browsers when you open them so okay so i need a tool chain what tool change should i use and and so the react documentation has some advice on this and uh you know my first reaction was kind of like okay this looks like a lot of options um but okay i'm integrating with an existing code base so i'll go check out this more flexible tool chain section um and so i go over there and i'm i'm reading this and i'm thinking like okay neutrino combines the power of webpack with the simplicity of priests nyx is a tool kit for full stack and like i don't know what like it maybe this makes sense to to you all or to somebody but when i read this i'm just like what is like what is all this stuff and what like what are even these words and like why do they all sound so funny and um and yeah it's it's funny like my first experience like getting into this this sort of like javascript world that i had never been a part of was like it was very humbling and sort of like it caused me to like have some kind of like you know am i like not like i thought i was like a professional web developer i thought i sort of like understood what was going on and i'm reading all these words that that barely makes sense to me um but it's it's not this complicated and you don't really need to care about all these different options if your only goal is is to use modern javascripts um i'm sure the javascript people have have very strong opinions about about these various tools but but you don't need to if you're just sort of trying to get something done um and so yeah so these are the basic elements of the tool chain and and most of the tool chains will look something like this with with possible replacements of these different uh specific tools but essentially you have a compiler uh you have a bundler and you have a package manager and i'll quickly talk about each of those individually um so the package manager is the easiest one and and the one line answer is it's it's pit for javascript um so this is the thing that will where you'll put your request in uh into a file it you know you'll give it versions it it manages your dependencies for you it does your installations for you um so it's it's it's almost one to one with pip npm does you know they both do other stuff um but you don't really need to worry about that um in in the javascript world there's two main packages made package managers and uh people will argue about which ones to use um but npm is sort of the most popular one uh and it's the one that i recommend um and i'll say like when i recommend these tools it's not from the perspective of like i know everything about javascript and these are definitely the tools you should use but these are the most popular ones and you you can't really go wrong if you use them if you do want to sort of get really into this stuff you can you can go read you know 100 articles about npm and yarn and decide which one you want to use but um but that wasn't something that i i felt the need to do so that's the package manager um the next thing is the compiler and the compiler is the thing that lets you write uh that code like the um h1 thing that we saw in the react example um so it'll it'll take sort of new stuff that's been added both to javascript and um extensions that that you know other people have come up with like typescript or jsx which which i'll talk about in a little bit um and turn them into browser browser-friendly javascript so that's the thing that's that's doing the work of uh translating the modern stuff into into the stuff that your browsers can can deal with um and babel or babel i'm not sure how to pronounce it um is the most popular compiler out there um and it's the one i sort of recommend using and then the last thing is the bundler and and the bundler does it kind of does two things um one thing it does is it bundles uh your code so it's pretty well named um and and the thing that it does is it manages dependencies for you and that's part of the bundling process um so if you remember this example i showed where we had this sort of you know all these different libraries were being included based on this property that was was manually set um if you just use those those import statements in your javascript code then your bundler will will figure out that you need those libraries it'll get them for you it'll get the dependencies of those libraries but it won't it won't grab everything that's installed and it it'll sort of figure out what it needs and then create a single bundle file and so the other thing it does is you know you see on this page there's you know 20 some odd different files that might get included and this isn't even sort of a complete example but it'll it'll take all that stuff and just put it into one file and so if you have it all in one file that's uh fewer requests that your page has to make which will make your site more performance um and again there's there's a lot of bundlers out there but webpack is sort of the gold standard and the most popular one so yeah so that was a lot of information quickly um but to put it all together npm is is going to be our pip it's going to deal with all the libraries that we want to use um babel will take our modern javascript and turn it into browser friendly bundle uh javascript and webpack will sort of take all those things bundle them together create this one nice javascript file and we can finally have a hello world so yeah so that's that's a lot of effort um but but it is it is worth it and it's it's a one-time sort of exercise that you have to go through um and and in the in the guides i have sort of very detailed instructions on on how you can do all this stuff uh set it up in in a django project um in terms of putting it into into a project um this this is a django example and so you sort of you you have that whole pipeline there uh on the left-hand side and then you just all you really need is that bundle file right so the then you just treat the bundle file as uh as any other static file as you would an image or a css file um and then you do your normal thing with with views and templates and um and then you can use you can use any of this modern javascript directly in in a django app or in a flask app um by only just sort of referencing this file and and having having this thing in place on the left to to create it um yeah so in practice uh this is one way you could you could structure that um and so you'd have your sort of your modern javascript source files in in a project folder uh i called it assets you can you can call it whatever you want and then you have some build tooling that takes those and outputs them into your normal um static files directory and then and then everything works sort of the same way and this assets folder it's never referenced or used by django but it's it's used to build your front-end source um and and you could keep it outside of the project but but i find that having it inside the project is nice because then you can sort of do everything at once and really they are sort of dependent on each other um and yeah so this this is what you know a single page react app then becomes in this sort of hybrid architecture that i mentioned so you have your uh your modern react thing over here it goes through your pipeline and then it gets included in your django template just as a bundle like this and you can see this like div id root is in your template and then the react thing knows to go render itself in your root template um so yeah hopefully that makes sense i i realize i i sort of went very quickly through that um but there is uh a much more comprehensive example of this uh in the guide which but that's that's the basic things of it and then the rest is sort of you know how do you deal with auth and how do you deal with apis and and all that good stuff right so so why bother with all of this right so like at the beginning i kind of said it would be worth it um and uh and it is like you you do end up in in a much better world in terms of in terms of your front-end code base um and so what's the payoff like some some things so like you can you can use the latest javascript frameworks um and and they are they're quite nice like um you know it's one of those things where it's it's a it can be you know a steeper learning curve to start working with them but once you wrap your head around them and once you get comfortable in them it they really do uh increase your velocity um they the experience of of building uis and in some of these frameworks is um is quite a bit nicer than than sort of your standard you know document.h you know dot add event listener um or or the jquery version of that um you get the dependency management so um you know you don't you don't have to do any of that stuff yourself all of your javascript dependencies can be can be managed in in sort of this import export fashion that that i showed in in the react example um you get new features and convenient syntaxes which i'll i'll show uh a few um and you get uh you know there's there's a ton of sort of customization that that is not in just javascript but people who have their own opinions about how to make javascript better um and you can leverage any of that stuff depending on what you want to use um so yeah so hopefully it it kind of gets rid of gets rid of your front end speedy so yeah one of one of the big things you get is is es6 which is just like the sixth version of ecma script or something like that but anyway it's it's it's like later versions of javascript and it's hilarious like basically they just like added a bunch of features to make javascript more like python um but they are useful uh so one thing they added is arrow functions which are basically lambdas um and while this looks you know kind of trivial in the same way that lambdas look kind of trivial like you just change the syntax of this function thing um when you write a lot of single line functions then um these become really useful and and i'll show you on the next slide you know why why you end up writing a lot more single line functions um classes you know that's uh that's a novel concept um but but yeah so you know es6 adds classes to javascript um the constructor is basically your init dot uh or not your init function function and um yeah and and these work sort of how you would expect um they have something called template strings which are basically f strings um so the syntax is similar to f strings except they add a little dollar sign here um but you can essentially put uh you can escape this you know name variable in brackets and it'll render appropriately and and like f strings you can you can put sort of like arbitrary uh uh javascript code in here um like one line javascript code so uh you can do a lot of much more powerful string formatting than sort of the the traditional like string plus string clustering thing that um that we've been doing for so long um and default argument values so also just sort of like something that's been in python forever um but yeah so you can have uh optional arguments uh and instead of being undefined which they would be in javascript uh they will get assigned whatever the default value is um and there's a bunch more stuff as well these were just some of the highlights that i pulled out um another thing so this this is kind of a react thing um but is so so this this is that h1 thing that i showed you uh a while back but essentially it's it's a language called jsx and it's kind of like string templating for html um and it's it's funny at first and it takes some getting used to um but it it is really nice in that it it provides a really easy way to sort of write code that looks like html but add business logic inside of it that can do complicated functions and so this would obviously render you know hello uh what is its harper perez on your page and um this is one place where uh where those arrow functions are useful if if you want to do complicated bindings and other stuff in in these templates then um you end up using a lot of sort of one-line functions um vue uh which is another popular javascript framework has a different take on this sort of a lot of these frameworks what they're trying to do is they're trying to make it easier to combine html uh with uh your styles and with your business logic and so vue defines this format where the view file is broken into three parts there's a template which is kind of the html um there's the script area which defines the uh the business logic in here of of you know what's actually gonna gonna happen with your data and then there's styles that get applied um and and one nice thing about this view example is these styles can be scoped which means that this um the style will only get applied to the ps in this file um so it's a nice way to to um to avoid having clobbering your global styles uh for for a particular component so again this this is it becomes a nice way to uh to build uis in in sort of a way that the whole ui is contained together rather than sort of being out in a bunch of different places um and yeah and that's honestly that's that's really the tip of the iceberg i feel like i know maybe you know this this top part of the iceberg as well um but there's there's a ton going on in the javascript world these days um modern javascript is actually not so bad um and i encourage you to use it and and bring it into your python projects uh yeah thanks and so yeah like i said if if you want to see sort of code samples and anything else uh you can go to sas saskpegasus.com which is um one of my side projects and then just click guides and um you'll find like a super long write-up on all of this stuff and if you want to find me i'm csu pretty much everywhere but especially twitter and and z-a-tech slack

Channel: Coding Tech

Views: 13,419

Keywords: JavaScript, python, npm, web development

Id: jAbDjt0pens

Length: 31min 8sec (1868 seconds)

Published: Sat Nov 07 2020