PyCon Ireland 2019 - How to Webpack your Django! - David Gibbons

you so my name is Dave Gibbons and today I'm going to show you how to webpack your Django so a brief bit about myself I am anytime Pike on Islands attendee I've many many colored t-shirts at this stage and I've learned a lot over the earth so this is my first time speaking and I'm thankful to Python Ireland for the opportunity I've been working with Python and also javascript for over seven years I am a software engineer open up where we create bespoke web applications and day to day I do server and client side web development we use Postgres django javascript and HTML CSS i'm on twitter at DAF Gibbs where I'll post the slides and I get oh but same handle where I'll post any code from this talk so brief bit about opener it was it's a software development company which is based in Dublin City Center founded in 2002 I currently have 45 staff employed well we do web applications for industries mostly the healthcare industry and postal and two of the focuses we have are on on patient registries and health data analytics we're always interested in interesting CVS software engineers project managers QA test automation etc so if you're interested talk to me after about about working at open up and also you can then send a cv to a chore and open up if you're if you're interested after that so a very year ago i was lead developer on a recent greenfield project which which was an address cleaning application so what was what what we were so oftentimes companies have large spreadsheets of address information which can be included misspellings or incorrect in corrects inaccuracies so what our application does is you blow the spreadsheet it does matching to a correct up today addressing information in Ireland and then you redownload the CS the spreadsheet with their with the exact information which can save time for deliveries and other order you know logistical stuff like that we've when we started decided on view Jas and web pack which was the origin of this talk and it's been quite successful for us over the last year so I thought I'd share the knowledge of what what we what we've done are the techniques we use it's not exactly about that project but it's the same techniques used so about this talk we're going to go through it in four sections firstly introduced Jango when I web pack so it set it up as per the documentation how you might get a Django project up and running but before going near web pack then we'll introduce web pack thirdly integrate web pack into Django and lastly once the setup is in place it's it's quite nice quite easy to add web pack extras so we'll look at that as well so the chuckles basically to firstly to I know there's a lot of tools in the JavaScript world a lot of new frameworks etc and you could spend your whole life learning new frameworks but I think web pack is one of the ones that's worth learning and it can help improve your application it's also straightforward to incorporate into Django I'll show a simple architecture which means it's pretty similar for local development and for a production and it's worked quite well so here we have the Django masca it's a pony with magical powers this this phone you can fly but in this talk we're going to stick oops we're going to put a Walmart we're gonna fire we're photo for a web pack jetpack on top of the pony so this will help the pony that's already magical fly even higher and faster and become even more powerful with webpack and Django working together so we'll start into the first section so Django along with flask are the two most popular web frameworks in Piketon and Django would be more of a batteries included approach it's a high-level Python web framework encourages rapid development and clean pragmatic design and it follows the MVC Model View controller architectural pattern in Django's casts MT V which is model template view architecture so the models define what is created in the database and the templates have the presentation logic and the views contain all the business logic for the talk today we will mostly be focusing on Django static which is a JavaScript CSS images which is referenced inside the HTML templates so to illustrate these the points made we're going to create an example application and as the team for Python Ireland says 19 is the environment it's going to we're going to create a Django a pure API which serves a random environment related quote and then our front-end isn't going to display that quote on the corresponding author so this is the setup we have a front-end directory which has our CSS images JavaScript and then as with the normal price and project we're defining models and views which then set up an API and insights environment Jason is a list of fixtures which is the list of quotes which we can then load into the database to get us started initially and the index dot HTML course references the front end so reference the front end files we're using NPN and it's manage the dependencies which is it depends your put into package JSON so in terms of the models it's quite simple it's a setup in django you create a model which then corresponds to a database table and then the inside the model the fields we are fields inside the database table then so we have text on author and the fixture file of our environment our Jason is got a list of quotes such as this one the earth is what we all have in common by Wendell Berry and these are then loaded as I said into the into the database oops to craft so yeah and this is the view so in Django has a quite a nice method which will order the so although we order the models from the database by random which is this question mark let me take the first one so it's just going to give us a random port from database and then convert it into a model models addicted and then returned as a JSON that's that's all that it does it's an API set up returning jason so we had models and views and lastly we have templates so this is broken into three just slides just to process it a bit easier at the top we have CSS imports using bootstrap and Styles custom styles inside Styles dot CSS down the bottom we have you were using the view framework in this example and a Java Script rjs which basically just does the query to the API and then it returns us all right back we have an image at the top and then the title are sorry a header and then in here we have the variables the to view GIS variables which is quote text and quote alter and then we have we have a button at the bottom then which just gets the next quote so in terms of what that HTML translates into on the web browser it's just this web page with a image a title or a header inside here displays the quotes and then a button so if I click next I get the next quote is populated inside from the API so example a new unique quote comes up and this is what this application does so this is fantastic we have we have everything set of web applications being served it's it's all working perfectly why and someone tells we need to poo that you should be using webpack what and we need the pre was pretty confused because he he doesn't know what benefits this is going to give him to go looking at a new tool so there's many potential benefits but before I've identified what were missing in the current application what we possibly be able to get with webpack the moment our JavaScript code is not minified and any comments not removed so this is inefficient with downloading white space into the browser which isn't isn't necessary so it'd be nice to minify javascript there is no unique file names on the static static resources so the browser can get caught so we we have one version which is script at j/s and then we change script yes but the browser is unaware and it's using the old cached file so we want to be able to version our javascript files using a unique hash hash in the file names on development then if I make a change if I change the image or if I change something in the application I then have to go back to the browser click refresh on the top left and then just then I see the change it would be nice if it would just as the change is made it comes back into the browser automatically updates and it'll save time with that you don't need to keep refreshing and and that and I will retain stay as well so even it'll just change the parts of the webpage which are not you know which which have changed not everything and finally a code splitting which I'll come to near the end is also something that would be nice to have oops so enter a web pack a web pack is a static module bundler for modern JavaScript initially released in 2012 it it's currently version 4 it's a engineering manager at Instagram gave a really good talk but recommended on YouTube asked on Sesame 14 on how Instagram use webpack to to bundle their react application and in terms of what I like about it it's quite nicely quite easy to add functionality it's modular if you need something you can look it up and Addis and then if you no longer need it it's quite easy to remove it and according to one of the co-creators of Django Jacob Caplan moss at a talk earlier this year it's the best asset manager at the moment currently so like other JavaScript packages we just installed a through NP n so we it's our web pack and then the web pack CLI which is needed as of version 4 have to install web pack CLI with this so config dot JSON web back to config yes it contains all the information it's it's the sort of the brain of the pack configuration and it can turn to contains your specific needs so if your application is a react application you've configure your web pack it config if it's a view you can figure it slightly differently I and then and in other change is also going to web pack config as we'll see we'll go through these four they're sorry five there's five key concepts in web pack which is modes input output and then plugins and loaders if they're being used so this is probably the best graph to explain what webpack does it it bundles modules with dependencies into files to the browser so on the Left we have an entry point the starting point javascript file here which has dependencies on all of these these files a web pack you kind of put these all into web pack and web pack spits out files that the browser can understand such as JavaScript CSS JPEG so that's that's essentially a sort of a pipeline that the web pack runs to it's called a build so in terms of the five concept core concepts modes is development or production and this is quite a student enables built-in optimizations for example if you are in production mode it'll minify your JavaScript if you're not it will it won't minify if in development it will leave it as it is entry this is the starting point for web pack so this can have one entry point or can be multiple entry points in this case we just have one which is a store inside the front end directory in a file called index is so if we go back to this graph this that will be our in our case this will be indexed fjs this is the starting point where web pack builds module trees from our dependency trees on top of and then the output file so these are the files at the end the JavaScript CSS so we need to tell that pack what to call these files and also where to place them so a given file name which the name of name and then the hash which we'll use to as the version control then it's gonna place them inside a dist folder distribution folder which is common in JavaScript and we also need the path public path which will tell us where to find images etc and then last - on the core concepts as plugins and loaders so plugins are are used for a wide range of tasks such as asset management and are in this case here we're going to just use a view loader plugin because our application is a view j/s application and then loaders so out of the box web pack only understands javascript and jason loaders have the ability give-give web pack the ability to be extended so it can it can understand all sorts of file types so what we're saying here is if it's a CSS file we're going to a combination of style loader and CSS loader if it's a view file use the view loader and if it's an image of PNG or jpg we're gonna use the file loader for that so once that's so putting it together or you just have our three core national three mode entry I put at the top you have the plugins listed and the loaders listed and any additional requires we can put in at the top we want to use more plugins we slot them in here and into the list and then if we want to use different loaders we can add them to our loaders list here at the bottom so I've tried to keep this talk as generic as possible so it's not specifically for a one framework but one thing I like to mention is that it's for view j/s code it web that gives the benefit of allowing you to use single file components which are which are really useful as the project expands because it isolates a component you can have HTML Javascript and CSS in the one file so you can create a a button dot view files are a Stepford view file or something like that and then you can reuse that components in different parts of your application and of course then the index J S is the entry point to the app in our in our case so I said it'll start the package.json most its biggest job is to maintain dependencies in JavaScript but there's also a useful script section where we're going to add a build command for a web pack and this is going to use the default config web factor conflict j/s and Marrone web pack to say you run the build command so in my local machine if I then run it it's a sort of a shorthand so you can add all sorts of configuration options in here if you want and and then you'll just still have to keep running NPN run build it's it's a nice neat way of doing it so when I run that and all the different files are are taken into a pack and web pack produces two files just in this case the the image file which is our that earth with the tree on top of it and then the bundle file which is an app file which contains all the JavaScript and CSS and it also tells tells the entry point of of this application and also gives the size is one thing I've definitely noticed web pack you become a lot more aware of the size of the files you're asking the browser to download it gives you prompts if your files get too large and it tries to try to give you the minimal amount to download to the browser so it's not bloated code okay so of our for missing requirements the top two are sort of fixed now where we've got because we're using mode production the JavaScript is being minified and comments removed and also because the filenames had on the last file this is this long big long hash string we're getting and we're getting versioning on that as well so those two so the browser's will know when to when the file name file has changed file contents has changed so but it's still not the web pack is not talking to Django my back it's doing its thing but Django isn't aware of how of how of the file names that web pack is generating the bundle file names so next step is to integrate into Django web pack and this is quite this is something that I struggled at the star a little bit because you've got great documentation for web pack great documentation for Django but it's a how do you make them talk how do you make them communicate and this is where I this library called Django webpack loader comes in which I found like the secret sauce of making the two web web pack and Django to work well together it says in the library tagline that it's transparently used web back with Django that's pretty much what it does I'm also in the documentation there's a line one of the core principles of Django web pack loader is not to manage web pack itself in order to give you flexibility from my back the way you want so I'll let you can figure web back as you want and then Django will just pick up the changes as at the end and it does this through a meta file so a web pack plug-in will watch as web pack runs the build they put this metadata file and it'll tell Django what the file names are that that have been produced by web pack so then Django can use it inside the template so there's only there's two steps to use this library you've got to install a package on JavaScript side and style package on the Python side on the JavaScript side it's just these two lines Eve and P an install same as before of many packages in JavaScript world and then add a bundle tracker inside web pack config so on each build this bundle tracker will see what files that are produced and then put it inside a web pack stats JSON file which is a metadata file which you never really need to open it just sits there and then Django can read that file and then on the Django side also need to install a package which is called Django with pack loader and then it's just two steps inside the Django settings file we need to just add a web pack loader inside install apps and then at this section on the web back loaded to tell Django where to look for the bundle so it tells Django to look inside the disk directory and then also that the file name is going to be web back starts JSON so and you can of course change this file name something you wants but you just need to change it on the Django side and on the JavaScript side this lastly means that we can then use render bundle rather than static in the template tag so render bundle will look inside this file and use the static files have been generated rather than non in turn on regenerated ones yeah yeah it is it to be fair it is yes and so the question was that we're using static in the Django sense rather than static place somewhere else like Apache yeah absolutely yeah no that that is true yeah I that is that is a concern for our for our applications worked fine there hasn't been any problems using Django with static that way potentially as it grows it can be an issue but of it the speed or something like that but it's not been an issue we use in Django we're using static the way Django has a timid documentation so such yeah that's right yeah okay so with those two steps we we've integrated Django and web pack so first step is run NPN run build crates the bundles into the disk directory with the web pack starts contains file names and then Django runs server on development of Django one server will will will run and then it will include the bundle files inside web pack so b2 and the to frame with the - web pack and Django can then talk to each other so we've got a web pack integrated and we haven't done a huge amount in terms of our directory structure the first so in yellow I have the the files that are generated by web pack so these aren't part of source code or anything like that these are just each time this would be different so we've got a new disk directory which contains those files and then also down down here we've got the web pack starts files in yellow as well which is just metadata that keeps getting changed on every build in in here we have we've merged so we've merged styles and JavaScript into app dot view which is the single file component I was talking about and then an entry points that's that's what's happening there we've updated index.html which will which would the only change there really is that where we are using the render bundle rather than the static template tag at this point and then of course last we've we've made some we've added the file web pack config yes which is really which is the big big the brain of web pack which is which tells web pack exactly what to do so that's been added there as well at the bottom okay so on our list of for ticks we've gotten - we've got as we said the mode to production you've got minified javascript and then we've included the file unique cache in each file name we're still missing the last two which are our developments it's not being refreshed if you make a change and the code splitting thing has not we haven't looked at that yet at all either so as I say net there was there was a bit of work to get we're back in Django talking together but once that's in place it's actually quite easy to add additional functionality web pack and there's a yes lint ID you can run with before the web pack bundle which will alert you to linting errors and JavaScript quickly so you won't you know you won't have to run run later it'll show up immediately because the build build will not build it'll throw an error in the bills so I recommend adding that Babel which will translate your yeah if you want to use the latest JavaScript it will convert it back into older versions of JavaScript so that are all versions of ie or Internet Explorer will be able to pick them up if you need support browsers like that it's a plug-in that cleans the old bundles which I use which just you only need the latest version of the bundle so it just wipes everything else that's in that directory and just uses the latest ones and there's another bundle analyzer plug-in which gives you a graphical interface of your bundle so we can help identify packages that aren't needed and you can delete them from from from your bundle but in terms of getting our two extra ticks on our for missing requirements the added extras we want to add our web pack dev server and and then we're adding a code splitting so the web pack dev server is is really useful for developments on any code change on the stuff that the save if you save a source file to the file system it'll rebuild and update the browser display for quicker development so you don't need to do that click the top left refresh button it'll basically watch for changes update by itself and what the way I run as I have worked back dev server which is a an Express no Jeff server runs in one terminal tab Django development server and another and they yeah any changes from the dev server can then update on screen so to do to add in the web pack dev server all we need are these we need to add the web pack dev server itself and then web pack merge which is a useful package so it takes all of the conflict the web pack the conflict rjs files and it just over writes anything you it overwrite any changes that you have in a different in a different file I show it in the the dev config now in a second and we also want to add a so it's up above you might remember we added a build commands which just runs web pack build we want to add a second command now which is a web pack dev server and it takes in all the config inside dev touch a switch is on this next slide so we have the this top bid is all of just just about taking the config from one from the base configuration the common configuration and then overwriting it so any any any settings inside here we're just overriding but otherwise using the and configuration so we'll over ice mode which we had before as production no one said it to development we overwrite the output so we'll have it on a public path which is an which is where if he files be placed oh it's no longer inside a path but it's it sits on this server this a dev server and I finally want to set the dev server port 3000 and hot reload which is the bit that doesn't refresh the whole page but only refreshes a part of the pages that you actually have made changes for and this last one is necessary because we have our Django development server running on port 8000 and there we have our web pack dev server running on port 3000 so there can be access control issues in the browser doesn't let you access a different origin so we have to just set access control origin to anything okay so that's the dev server setup and then our last tick is to add in code splitting this to be fair isn't probably necessary in our application because it's quite small but it's a really powerful web pack feature and so lets you split code so into bundle so can we load it on on demand or in parallel so cut down on the page the initial page load time so we've two options so imagine I I have the app which has the serves the random environment quote but if I want to make a second admin app at a different a different entry point which lets me for example add new quotes I'll have have two entry points here I can I can sit I can give put all the code and it'll be downloads each time to this one or if you download it to this one but this is pretty inefficient because we don't need some of the code here we just you know we only need the code that's applicable to app for app and I've admin app for for the admin app stuff so code splitting is done on the right so it lets app code be separate from I've may not code and then the shared code then can sit in the middle so the view Jas and the bootstrap stuff that's used by both this and this can then can then be downloaded as needed and if you're in app and move to admin app you won't redownload the share code it's already in the browser so for so this is the the last piece on the code splitting so we prevent duplication by separating a vendor code UJS bootstrap and there's a setting in that also goes into epic web config das for optimization and it will basically test is the file loaded inside node modules if it is make it into a separate and separate chunk into a separate bundle called a vendor which is a difference you know if we know we'll have two bundles we'll have a PI want a vendor and that's and that's then we also need to just make sure we add in the render bundle column in the template for the render for the vendor bundle on top of the app bundle okay so with that it's we four tix we've we've added in the webpack dev server so we're watching our source files we are we've optimizations so when we expand our application we're not reading or an awesome read that we're not downloading code that's not necessary and we're reusing code as we change change app so with that we need the Pooh is delighted he's not confused of their web pack anymore he's he's smiley and so just as that's just me just finished just as a summary web pack is a tool modern JavaScript development it has those different file type to produce bundles so as we saw it can take CSS images all sorts of different Fugit view files and produces bundles from that in this talk we had an our example application which use webpack to bundle static files and then we made use of this really nice library that i find really nice called django webpack loader as i said once the basic web pack configuration is in place it's quite easy to add it the hard work done you can then like a kid in the candy store you can go and let handle look at different web pack configuration and see what you can make use of in your own application and just a tried and tested wide web package Angus we've been using this for almost a year and it's sort of just sitting there it's it's greedy easy to update our application and it's it's been really nice to work with we can focus on you know business logic rather than this architecture of trying to make web pack and Django work together so it's it's worked quite well so thank you very much for listening and if there's any questions please ask nail thank you we have a few minutes for questions okay how can I ask people use the mic to have a question like thanks for the talk and wonder is there any package to integrate webpack dev server with the django run server so you just have you know you just run one thing hmm maybe it hooks into ish and just kind of runs it side by side - feature of what web pack and now I don't think it is it yeah I mean it could it's nice to kind of see both of them side because when I thought I saved the two terminals you can kind of see what wetbacks doing you can see what Django's doing if they were outputting the same messages I'd like messages in one log it would kind of wouldn't be sure what Django is doing what what I've seen it I kind of like them being separate so you can you know if there's any other issues you can debug if you know where the problem is but yeah it's certainly an idea of just run one command rather than the two commands side-by-side I don't know of any package that does that anyway you know well if there are no more questions thank you very much David thank you [Applause]

Channel: Python Ireland

Views: 767

Keywords: django-webpack-loader, django, django webapps, python

Id: 5svAVwW_ZyE

Length: 36min 39sec (2199 seconds)

Published: Tue Jan 14 2020