Take the goRe out of a DjangoReact stack
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 32 | |
| Author | ||
| License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/45449 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
DjangoCon Europe 20192 / 32
5
8
14
22
24
27
29
30
31
00:00
Stack (abstract data type)ChainCodeProjective planeWave packetRight angleDecision theoryCartesian coordinate systemSoftware developerComputer architectureImplementationView (database)Cellular automatonSoftware frameworkChainProduct (business)Level (video gaming)Network topologyMathematicsFiber bundleSolid geometryClient (computing)Stokes' theoremWrapper (data mining)Server (computing)Source codeBuildingRepository (publishing)Web browserCompilerEquivalence relationComputer fileComputer animationLecture/Conference
02:44
StatisticsDisintegrationWrapper (data mining)Fiber bundleFunction (mathematics)Template (C++)BootingIntegrated development environmentComputer fileWeb browserFluid staticsVolumenvisualisierungIntegrated development environmentWeb pageDependent and independent variablesTemplate (C++)Fiber bundleEquivalence relationScripting languageLine (geometry)Front and back endsProcess (computing)ChainBuildingSource codeElectric generatorMultiplication signBlogSoftware frameworkSeries (mathematics)Point (geometry)Sheaf (mathematics)Medical imagingComputer fontINTEGRALDomain nameDebuggerPentagonMathematicsNetwork topologyData compressionLink (knot theory)FamilyGroup actionMoment (mathematics)CommutatorDiagram
05:53
Single-precision floating-point formatWeb pageAlgebraNumerical taxonomyParity (mathematics)AuthenticationSeries (mathematics)Template (C++)Cartesian coordinate systemFront and back endsDebuggerSlide ruleProduct (business)Web pageWeb browserComputer fileFluid staticsSingle-precision floating-point formatMedical imagingContext awarenessSoftware frameworkLetterpress printingRight angleSoftware developerBitSystem callMixed realityParity (mathematics)ImplementationDecision theorySeries (mathematics)BlogNumerical taxonomyFormal grammarComputer architectureRoundness (object)DialectState of matterEvent horizonGenderObservational studyCartesian productDegree (graph theory)Gastropod shellChainPrisoner's dilemmaMathematicsPhysical systemFamilyCellular automatonHand fanLimit (category theory)PhysicalismComputer animation
08:32
WebsiteParity (mathematics)Independence (probability theory)BuildingBinary fileComputer-generated imageryRevision controlIntegrated development environmentLatent heatCodeVariable (mathematics)Computer configurationConfiguration spaceUniform resource locatorHybrid computerTemplate (C++)Computer architectureNetwork topologyMultiplication signMoment (mathematics)Group actionIntegrated development environmentReading (process)Front and back endsProduct (business)Sound effectState of matterRandomizationWeb pageArithmetic meanWeightDecision theoryBitGoodness of fitPoint (geometry)Shared memoryPrisoner's dilemmaProjective planeCASE <Informatik>Revision controlTemplate (C++)Software developerSet (mathematics)Cartesian coordinate systemContext awarenessInheritance (object-oriented programming)Thomas BayesExterior algebraMedical imagingConfiguration spaceCodeServer (computing)Variable (mathematics)Repository (publishing)DebuggerHybrid computerFile archiverLine (geometry)Domain nameRight angleSheaf (mathematics)DataflowDifferent (Kate Ryan album)Latent heatProcess (computing)System callWeb browserPerturbation theoryParity (mathematics)Data conversionComputer configurationCommitment schemeComputer animation
12:53
Set (mathematics)Context awarenessIntegrated development environmentLogicDatabaseVariable (mathematics)Template (C++)Configuration spaceCartesian coordinate systemIndependence (probability theory)Multiplication sign
13:18
FeedbackLoop (music)WritingCodeServer (computing)Web pageNetwork socketScripting languageWeb browserStructural loadComputer fileParity (mathematics)Cellular automatonMultiplication signMathematicsComputer programmingInheritance (object-oriented programming)Product (business)TwitterWeb pageLevel (video gaming)Hidden Markov modelGoodness of fitMereologyRight angleSubsetFamilySoftware developerScripting languageFacebookRevision controlCodeHeat transferCartesian coordinate systemWeb browserResultantSet (mathematics)CASE <Informatik>NeuroinformatikWebsiteFeedbackRow (database)Variable (mathematics)Server (computing)Computer configurationPerturbation theoryPower (physics)Parity (mathematics)Network socketStructural loadContext awarenessSource codeSoftware bugFront and back endsPhase transitionSocket-SchnittstelleFluid staticsWeb 2.0Computer fileReading (process)Uniform resource locatorVolumenvisualisierungBoilerplate (text)Computer animation
17:00
Price indexMach's principleView (database)Template (C++)Generic programmingEndliche ModelltheorieFront and back endsWeb pageUniform resource locatorGreatest elementEndliche ModelltheorieDifferent (Kate Ryan album)View (database)VolumenvisualisierungComputer fileMultiplication signServer (computing)Function (mathematics)DebuggerFiber bundleSoftware developerBootingWeb 2.0Configuration spaceMathematicsLine (geometry)Electronic mailing listLink (knot theory)Structural loadProduct (business)Cartesian coordinate systemSoftware frameworkCASE <Informatik>Integrated development environmentMereologyParity (mathematics)Directory serviceSet (mathematics)Block (periodic table)Decision theoryTemplate (C++)Medical imagingPlug-in (computing)Level (video gaming)CodeINTEGRALDynamical systemTerm (mathematics)Content (media)Computer configurationInformationVariable (mathematics)Reading (process)Remote procedure callDivision (mathematics)TrailMobile appDomain nameRevision controlGastropod shellThomas BayesData structureDatabaseGame controllerInheritance (object-oriented programming)Shared memoryAddress spaceJava appletForm (programming)Forcing (mathematics)Scripting languageRight angleFigurate numberFood energyHand fanBinary fileElement (mathematics)Annihilator (ring theory)Dressing (medical)CAN busBitFilm editing
22:27
AuthenticationHTTP cookieSystem callWebsiteAuthenticationAreaWeb applicationComplete metric spaceCartesian coordinate systemElectronic mailing listArithmetic progressionComputer animation
23:08
Electronic mailing listData managementInternetworkingState of matterEscape characterPattern languageRight angleComputer architectureCodeCartesian coordinate systemProper mapLine (geometry)Set (mathematics)INTEGRALLecture/Conference
25:02
Price indexSoftware developerWeb pagePoint (geometry)Server (computing)Computer fileObject (grammar)Cartesian coordinate systemBitLogicVisualization (computer graphics)Perturbation theoryConfiguration spaceExpert systemTemplate (C++)Reading (process)Multiplication signVariable (mathematics)Product (business)Connectivity (graph theory)Library (computing)MathematicsSet (mathematics)Fluid staticsFlow separationWeb browserWeb 2.0Limit (category theory)Open setDisk read-and-write headWave packetNeuroinformatikProcess (computing)Video gamePosition operatorGoogol
Transcript: English(auto-generated)
00:01
Hi, hello, okay, so my name is Nathan, and I'm going to be talking about building and Architecturing Django alongside JavaScript applications So I'm a full-stack developer. I work with Django and react on most of the project. I work on however and despite
00:26
Not so funny name of the stock after a few months. I really start to dislike it So despite the name, it's not a bad react and most of what I'm going to say is Works exactly the same if you're using angular view or amber
00:41
Any modern framework if anything it's maybe about webpack, but we'll come back to this Okay, so just to get started by by show of hand who here uses a similar stack with a modern JS framework alongside Django Okay, so quite a few of you
01:00
So I don't know about you guys, but I really find this exercise of setting up a JS framework alongside Django to Really that being a trivial exercise I think the main reason is there's no standard documented Implementation guidelines or even architectural and guidelines
01:24
So I think it's something that we still can improve and In the Django community, so it's something I've done quite a few projects and my goal for this talk is to take you through Some of the design decisions that we can make to try and build such an application
01:41
How it's gonna work in development and production And and in this talk, I'll also try and show you what it ends up looking like in the code So before I start a quick catch-up Whoa I'm right a quick catch-up on the JS toolchain. I'm not I'm not sure everyone knows about this
02:02
So very quickly NPM is the main JavaScript Package repository, it's it's both. It's actually both the repository and the client for the repository, so it's equivalent to both by PI and PIP Webpack is The main build tool for modern JS application. So it's what produces the bundle
02:23
That's the that's the JavaScript source code that ends up being shipped to the browser There's no direct equivalent for this in Python because we can just run the Python code and Webpack dev server is a wrapper on Webpack That's much like the Django hotel reloader Looks for changes in the source code recompiles and sells this file on the server
02:44
right So in this first part, I want to go through Jing quick recap of Django's history and the tools we've had to handle JavaScript source JavaScript files and the goal here is also to set up a common vocabulary so we can all be talking about the same thing
03:02
So when Django came out in 2005 the domain used for JS back then was to sprinkle on top of HTML pages they were otherwise generated by the backend and For This we had tools like Django pipeline and Django compressor who came out in
03:25
2008-2009 And their main goal was to take this JavaScript source code that usually lived in the static folders of Django minify it General render a script tag in the in the template and that was it
03:42
And And the fuel is later Django and chain came out and that really messed up my chart. So if you were wondering where the spec is Let's check on Shane But around the same time you can see the red and the blue lines It's angular and then a couple years after our react So the the mother the frameworks that the most common from will study coming out in 2012
04:07
2014 I think And those two those frameworks need to much more potent build pipelines they need integration with The JS packages they need to pull in their dependencies from NPM
04:22
they need To be able to work with image files font files CSS, etc And so that's where Django pipeline and Django compressor weren't enough anymore and the front-end Community came up with something called Webpack which solves all of this for it
04:50
So if you last later in 2015 Django Webpack came out and it's the the first setup at integrating Webpack and Django together
05:05
So the goal here was to really separate the responsibilities of building the JavaScript for For the browser and serving it before that Django pipeline Diego compressor or an equivalent we are doing all of this from now on
05:20
we would leave Webpack Webpack in charge of building this bundle and and Django in charge of just Generating a script tag that links to it And so it transformed the development environment from a single process where Django is in charge of serving and generating the HTML and the JS To a dual environment where we have both Webpack and Django running
05:43
And Django would still be in charge of generating the HTML, but then point to Webpack which would serve the JS So something else I want to mention in this section is Emrico Gustin's blog article series from last year Because they really helped me out a bit on formulating a lot of what I've been thinking about
06:05
So his blog article is about a series of Formalization of the requirements for building a Django JavaScript application. So it's very much linked to what I'm talking about and the main thing I
06:22
Remembered from this is His taxonomy of JS applications. There's basically two kinds of JS applications or two or two kinds of architecture the single page applications and in the hybrid applications And I come back to this in a couple slides and in his blogs, he also talks about production and development parity
06:42
authentication, COS, CSRF, etc. So I really recommend going there if you're working on Django and JavaScript So in Emrico's taxonomy a single page application is an application where the HTML is purely static and
07:00
Never changes, so it's not rendered by Django. It can be a static file that's served by nginx or Apache alongside the JS files and In this context Django is purely used as an API and so typically in the production setting The browser would end up making requests to do two different origins the front end where it would load all the static files
07:21
HTML, CSS JS images and the back end where Django runs so as the API and The counterpart is the hybrid application where the HTML is served by Django and Potentially as a template rendered by the Django printing engine
07:41
and so you end up with an application running where the DOM is a mix of The HTML that was generated by Django and whatever the JavaScript framework Whatever changes it brought to this DOM And And typically in the in the hybrid application the
08:01
Browser ends up only talking to one origin where I would first load the HTML which would be around that right and then load the JS and API calls of course So both Infrastructures have pros and cons. There's no silver bullet of course and Even even once you've been able to pick between single page application and every duplication depending on what's right for you
08:23
There's still a lot of implementation details that will vary between between implementations still a lot more of design decisions So now that's exactly what I want to go through from Designing designing a Django and JavaScript architecture together
08:42
So before we go and start making random design decisions It's probably better that we are growing a set of requirements first on what we want to application to be able to achieve So, of course those requirements will vary a lot between projects and The example I have here is something that's very typical for the project I work on
09:03
But they are they're by no mean They might not apply to your use case right for for example, I think a typical requirement that I don't have is Around I think to having to separate the code base between front end and back end having to separate also deployment flow between front end and back
09:22
End I work in team where everyone is full stack so that's fine for me, but I know lots of companies out there have different teams for front end and back end and I Think if that was a requirement for you, you would end up with a very different solution But hopefully I think the the reasoning here will apply whatever your use case and you should be able to use this on your own
09:42
projects So My requirements are I want environment independent builds So I'll come back to what I mean exactly for each of them in a minute I want hot reading in developments and I want development and production parity
10:02
So for under I meant independent builds first, what do I mean by build by build? I mean Whatever code artifact you ship to a server when you deploy could be a file archive a docker image binary bit in conversion only Python that or commit in the in a git repository for example and
10:23
Why this is some way this is important to me is because it allows me to do version promotion whenever the version running in One environment for a while and I know it it fixes the problem I intended to solve then I can take this exact build this exact set of code and then send it to a different environment
10:41
This is something that I discovered on Heroku a while back and he really stuck with me So yet that brings it brings a lot of trust in what I'm about to deploy and I know I'm looking to break the next environment on the line So how might I achieve this? The the first the abuse sensor is
11:03
To not have any environment specific values are coded in in the code And and the main way to do this is to use environment variables the domain like domain When I'm talking about this section is very related to the twelve-factor app So if you don't know about this, I really recommend you go and read read the twelve pages on twelve-factor net
11:22
It's it's very interesting So environment variables they are really easy to use in Django That's not a problem at all in the back end We can read them anywhere on the code and read them in the settings and then read the settings So Django is really easy to write in an environment in a brilliant way as long as you access to environment variables on your server
11:42
But in JavaScript, it's a bit of a different story ever keeps a bit harder Typically the the main bit of config you will need in the job application is the API endpoint where where am I going to? Send my request to for example in production I may want to connect to API that example that come over HTTPS while in development
12:00
I'm going to connect to localhost on port 8000 or HTTP And so of course JavaScript doesn't have a concept of environment variable we can't set environment variables in our users browsers So as far as I can tell that leaves us with two options either We find a way to load the config when the application starts from somewhere
12:23
That probably means an API call and if I'm making an API call to what endpoint it's kind of Snake eating its own tail. It's a that's probably not going to work The alternative I can see is to inject the configuration inside of the HTML during rendering in
12:40
So in Django, so that means that our HTML has to be a Django template. So that means we're using a hybrid application in in August and Stex enemy And one way you might with this would translate in in the template if this is the template for your Application you might want to write a global config variable in JavaScript with the set of this is an example
13:06
But I'm sitting for example an API endpoint. That's actually just Context variable in Django templates and also older our business logic values that are actually coming from the database Right, okay, so that was environment independence
13:23
Next hot reloading in development So hot reloading is this very powerful Front-end development feature that's very much like Django what the Django is for the door provides It's based on webpack dev server And as soon as I make a change in my JavaScript source code and my front-end my browser refreshes
13:45
And I can see the change immediately in my browser So it really shortens the feedback look from writing a code and potentially a bug and then detecting it So this feature relies on webpack dev servers and just said and there's actually two levels to it There's live reloading where as soon as I make a change in my source code
14:04
Then it's get picked picked up and my browser refreshes So that means I do see the change in my browser, but I lose all the variables values I lose all of my context where I was in the application etc. So it's a start but not great and Then the hot reloading is the next step. It's where
14:22
Instead of triggering a refresher of the page webpack dev server is going to send the new rebuild chunk of a web socket to the Browser and the browser is going to replace it in place Without triggering refresh so I get to keep my variable where I was in the application, etc Right. So let's start with hot hot reading actually and it's going to be quick
14:45
So hot reading uses web sockets on a pack dev server and As I just described the way it looks like is in development should load the HTML from Django Which would then point to the static phase in webpack dev server and then every time I make a change to my JavaScript source code Then webpack is going to ship those hot updates of our web socket and my application is going to update itself
15:07
So I've got one big problem with hot reloading And it's because I'm using create react app, which is the main react boilerplate out there and it's broken I won't go into why if you're interested then we can discuss this after the talk
15:21
When I'm working for feedback from the folks at Facebook if you are not using create react app and you're using Vanilla or a custom setup of webpack dev server, then they might just work So taking a step back and let's take a step back and just aim for live reloading for a live reading to work
15:43
All I need is to make sure that my JavaScript source code is coming from webpack dev server So That leaves us again with two options either when the application when when I load the page on my browser It's able to tell which files I need on webpack dev server and dynamically load them in the page
16:03
Or Django is able to render all of the scripts in the page for me at render time and serve the HTML to my browser So it loads the files And both of them work. Both of them are fine And to help us decide between those two Solution and one one thing we could do is look at the cell criteria development and production parity
16:24
So what is this going to look like in production when in production? We won't have webpack dev server running, of course So we will have to use We will have to be able to render script tags with the right URLs in the HTML
16:42
and For for the development production parity requirement to work then we should probably pick the same thing in development So now I have to be very honest with you and tell you that I've been doing solution one for a long time for absolutely, no good reason And just for the sake of completeness, I'm going to show you what that looks like
17:04
So it's probably not readable from afar. Don't worry. I'll just skim through it Wish you've got good eyes. You can see several if debug if not debug etc So that's very bad for the remote production parity and this this big chunk in the reader here is actually manually fetching a manifest with the list of all the files in webpack dev server and
17:27
Dynamically adding them to the document here So it's very dirty and and I mentioned Django webpack loader earlier And I think that's where Django webpack loader Could help a lot. We could transform this and
17:44
Nice animations we could replace all of this with just two lines Render bundle for CSS and render bundle for JS and this would work both in production and in development removing the need for the if and elses
18:00
and Also the need for dynamically loading all of this So as I've said, I haven't tried this method yet It's on my to-do list for the very short term so I can't guarantee this is going to work I think this is the right way to go Right and about the development and production parity, it's actually very difficult to achieve 100% parity especially between
18:25
Development and any other environment actually if you think about it my my requirement around Product development and sorry environment independent builds is kind of UAT versus production parity or staging versus portion parity
18:41
Because I want to make sure that they're exactly the same But in development is different because you always end up using different different tools different servers So it's difficult to reach 100% parity, but it's it's still something that's definitely worth aiming for All Right, so now that we've
19:01
gone through these requirements and we've got already a list of Design decision we've made let's look at where it looks like in the code so this is all set up at least in development and the main piece of integration between Django and JavaScript now resides in the template for the HTML that's run down by Django and
19:27
So here we end up with The main block here setting the the config for just application that's actually run down by Django we have the to render bundle tags on the for the CSS in the top and the JS at the bottom and
19:45
that's coming from our Hot reloading requirement and development production parity requirement and that's it so this is Built for react so there's a there's a div with ID app, but you could really definitely adapt this to whatever
20:04
Frameworks you're using and you could actually You could actually build many other things pre pre built into the HTML and just load The JS the JS application in a tiny part of the page. That's also an option here Because we're using every application it gives us this flexibility around
20:21
How much content do I want to be generated by Django and how much content I want to be Taking care of by a JavaScript So, of course once we have this template we need a view to render it I thought I just showed this just to show where I set the why define the context variable for rendering
20:41
I'm in this example. I'm reading both from the settings and from Models in the database, but you can pull in the information to configure your front-end application for wherever that makes sense in your case And finally we need to mount this view on the URL Which needs to be generic enough so that we're going to set
21:03
Serve this HTML for every page of our JavaScript application every URL that's supported by your JavaScript application Right and In the front end it's Even simpler in the front end. There's no need to make any change to our JavaScript At least the one tiny change then it's then we need to make is to make sure that our
21:25
web pack configuration is able to output a manifest so a list of all the files that it just outputted last time it runs so that Django can then read this and so and and link to all the files in the HTML. So there's this this one line here
21:41
the Bundle tracker plugin And finally, I thought I'd show you what's my deployment Look like so I use Docker But if you do something similar you still have the main steps which are first building the traffic application so you you output a set of
22:02
JavaScript CSS images whatever and also a manifest file which contains a list of all of those other files Then copying this over to a static directory that's Controlled by Django which Django has access to and then finally running collect static and from here You know that the static files are available to be served and Django web pack loader will know where to get those files from
22:25
So he can links to them And that's it so that's it's It's not but it's by far not a complete example There's many other things that we probably would need to go through when designing your Django Jax application
22:41
things like authentication Course yes, RF although I wouldn't say that do the last two are interesting topics, but they're in the list anyway SEO progressive web app support etc And It says that most of these are actually topics that were covered by
23:01
Augustine is article series, so if you're interested to this I again recommend highly recommend reading them That's it for me. I think in conclusion. I'd say that We can still improve the state of the documentation of how to integrate JavaScript and Django
23:20
I don't think that Django is missing any future to make this one properly. It's more about building the Documenting the the known state-of-the-art for this to work and and giving examples for both code and architecture patterns Right and I'm also really curious to know how you guys manage your own JavaScript engine and Django application
23:42
So feel free to come and talk to me after thanks Thank you, Nathan, and do we have any questions from the audience as usual, please line up
24:01
anybody No, all right. Thank you, Nathan. Thank you Oh, wait one question we have questions from the Internet
24:44
If you open the floor for questions there's always a question in your example code there the Where you had the settings being rendered in Django, and then the rest being done this hot reloading Yeah, one of the pieces that's in there is This list of opening hours or something like that
25:02
Do you mean This yes, that's the one. Yeah, you've got you have your opening hours being rendered as something from template. Yep That's not going to play well with the hot reloading. I would assume is there is that It's like an example of something that you maybe want to try and do an API or is there
25:21
I'm not I don't see why you wouldn't so this set of variables are I Do you mean hot reading on a verdict? I'm sorry library loading sorry leveraging so on leveraging every time I every time The browser is refreshed and the HTML would be really recompiled and rerun so those viable will be reset every time Okay, and Django just remember the same exact template every time, right?
25:44
So I don't think this would be a problem. Okay, but if and then so on the JavaScript on the hot reloading That So once the page renders once the settings are only ever done on the page reload But you can modify the JavaScript and then that yeah that won't pick up any changes there So I don't think it creates problem with this because this variable is never reset. It's always defined globally
26:05
But it does create problem especially I Think it's especially it's so hot reading works very well for react components. For example, everything visual it's perfectly fine It Works less. Well when you change a bit of logic somewhere, I couldn't explain you why I'm
26:25
That's an expert by far and on hot reading Any particular guidelines about what you keep in what you can put in that kind of I think I think this is fairly flexible And I'm pretty confident that this is not going to be reset by either live reading or hot reading
26:41
you can just see this as the main configuration object for your JavaScript application and and and Put anything you want in there Very quick question. First of all, I'm not a full stack just a backend engineer but our team has some had some problems previously about
27:03
Django local The open server not running over HTTPS. Did do you have anything to with HTTPS Yes Problems
27:21
No, I'm not sure Say let's have thing about HTTPS. I'm not sure what exactly was your issue We couldn't serve the door on server or HTTPS and reacts at some point has some problems maybe
27:40
Yeah, I don't know in development I don't use HTTPS in development and this has never been a problem to me We're packed of severance of our HTTP And when once you're in production the web pack dev server doesn't matter anymore because you just have put a set of static files That's always going to be served
28:01
So I personally Create a nginx container for them and they are served over HTTPS. So maybe your issues could be around Requesting non HTTP resources from a page that's so diverse to PS I know there are limitations in browsers around this
28:20
Maybe probably. Thank you. Good luck All right, that was it for the questions. Thank you, Nathan. Thank you