Building a full-stack web application with Python, NPM, Webpack and React

Video thumbnail (Frame 0) Video thumbnail (Frame 1435) Video thumbnail (Frame 2193) Video thumbnail (Frame 10135) Video thumbnail (Frame 12135) Video thumbnail (Frame 14091) Video thumbnail (Frame 16293) Video thumbnail (Frame 18612) Video thumbnail (Frame 23238) Video thumbnail (Frame 24007) Video thumbnail (Frame 33158) Video thumbnail (Frame 42198)
Video in TIB AV-Portal: Building a full-stack web application with Python, NPM, Webpack and React

Formal Metadata

Building a full-stack web application with Python, NPM, Webpack and React
Title of Series
CC Attribution - NonCommercial - ShareAlike 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 and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Building a full-stack web application with Python, NPM, Webpack and React [EuroPython 2017 - Talk - 2017-07-10 - Anfiteatro 1] [Rimini, Italy] Creating full-stack applications with Python, NodeJS and React can seem daunting at first. Having made many variations of these, I will show you the ropes, so you too can discover that it is in fact easy to get going. In this talk you will learn to create a full-stack web application in Python, with a Nodejs and React front-end. I will provide you with an easy-to- follow walkthrough of the process, and you’ll exit this talk feeling confident that you can now create your own full-stack web application
Web 2.0 Software developer Gastropod shell Quantum Cartesian coordinate system Public key certificate Product (business)
Web page Mobile app Web application Different (Kate Ryan album) Single-precision floating-point format Stack (abstract data type) Formal language World Wide Web Consortium
Scripting language Price index Formal language Web 2.0 Fluid statics Computer configuration Process (computing) Data conversion Scripting language Trail Software developer Bit Skeleton (computer programming) Web application Data management Process (computing) Website Software testing Right angle Data structure Reading (process) Server (computing) Divisor Computer file Software developer Computer-generated imagery Directory service Web browser Revision control Energy level Representation (politics) Theorem Data structure World Wide Web Consortium Mobile app Operations research Home page Default (computer science) Addition Dependent and independent variables Debugger Projective plane Expert system Dimensional analysis Stack (abstract data type) Directory service Cartesian coordinate system Template (C++) Similarity (geometry) Word Hausdorff space Error message Query language Revision control Video game
Point (geometry) Scripting language Module (mathematics) Module (mathematics) Code Multiplication sign Cloud computing Number Web 2.0 Subject indexing Profil (magazine) Fiber bundle Network topology Order (biology) Right angle Fiber bundle Endliche Modelltheorie
Module (mathematics) Scripting language Curve Scripting language Module (mathematics) Computer file Computer-generated imagery Java applet Cloud computing Bit Automatic differentiation Web 2.0 Cross-site scripting Process (computing) Network topology Term (mathematics) Fiber bundle Modul <Datentyp> Booting Plug-in (computing) Booting
Point (geometry) Web page Reading (process) Installation art Module (mathematics) Computer file Computer-generated imagery Price index Directory service Product (business) Network topology Different (Kate Ryan album) Fiber bundle Operator (mathematics) Office suite Multiplication Task (computing) Scripting language Multiplication Server (computing) Poisson-Klammer Web page Directory service Cartesian coordinate system Single-precision floating-point format Subject indexing Fluid statics Personal digital assistant Function (mathematics) Network topology Website Fiber bundle Extension (kinesiology)
Aliasing Scripting language Addition Computer file Structural load Code 1 (number) Price index Parameter (computer programming) Client (computing) Web browser Mathematics Fiber bundle Process (computing) Building Software developer Interface (computing) Java applet Code Line (geometry) Cartesian coordinate system Open set Hypertext Subject indexing Word Fiber bundle Window
Scripting language Euclidean vector Code Java applet Price index Mereology Mathematics Type theory Bit rate Volumenvisualisierung Extension (kinesiology) Social class Scripting language Markup language Element (mathematics) Arithmetic mean Fluid statics Volumenvisualisierung Computer science Compilation album Navigation Reading (process) Computer file Connectivity (graph theory) Directory service Web browser Theory Element (mathematics) Goodness of fit Network topology Profil (magazine) Group code Default (computer science) Mobile app MIDI Default (computer science) Server (computing) Poisson-Klammer Schmelze <Betrieb> Java applet Code Cartesian coordinate system Web browser Component-based software engineering Subject indexing Personal digital assistant Logic Function (mathematics) Social class Extension (kinesiology)
Writing Group action Standard deviation Set (mathematics) Web browser
Installation art Euclidean vector Code State of matter Multiplication sign 1 (number) Archaeological field survey Set (mathematics) Price index Parameter (computer programming) Perspective (visual) Fluid statics Mathematics Bit rate Different (Kate Ryan album) Software framework Series (mathematics) Volumenvisualisierung Social class Area Email Computer virus Constructor (object-oriented programming) Electronic mailing list Bit Type theory Fluid statics Telecommunication Volumenvisualisierung Website Quicksort Virtual reality Reading (process) Booting Point (geometry) Web page Random number Server (computing) Functional (mathematics) Module (mathematics) Computer file Computer-generated imagery Directory service Infinity Content (media) Rule of inference Product (business) Network topology Video game console Data structure Default (computer science) Module (mathematics) Rule of inference Default (computer science) Noise (electronics) Information Server (computing) Projective plane Expert system Stack (abstract data type) Directory service System call Template (C++) Mathematics Word Uniform resource locator Social class Fiber bundle Game theory Table (information) Routing Freezing Library (computing)
Email Scripting language Installation art Euclidean vector State of matter Interior (topology) Code 1 (number) Set (mathematics) Price index Function (mathematics) Subset Web 2.0 Medical imaging Mathematics Different (Kate Ryan album) Fiber bundle Office suite Website Volumenvisualisierung Social class Area Scripting language Computer virus Sound effect Bit Type theory Googol Process (computing) Fluid statics Repository (publishing) Volumenvisualisierung Normal (geometry) Resultant Spacetime Booting Web page Dataflow Functional (mathematics) Server (computing) Computer file Computer-generated imagery Directory service Rule of inference Revision control Cross-site scripting Network topology Data structure Booting Default (computer science) Plug-in (computing) Rule of inference Default (computer science) Server (computing) Cellular automaton Forcing (mathematics) Java applet Generic programming Stack (abstract data type) Bootstrap aggregating Personal digital assistant Function (mathematics) Network topology Video game Social class Object (grammar) Fiber bundle
Web page Complex (psychology) Functional (mathematics) Presentation of a group Greatest element Service (economics) Code Multiplication sign Set (mathematics) Client (computing) Formal language Neuroinformatik Front and back ends Medical imaging Different (Kate Ryan album) Term (mathematics) Nichtlineares Gleichungssystem Office suite Code Planning Cartesian coordinate system System call Vector space Logic Blog Website
good morning we many of your having a great conference so far and my name is Angela and I were from on a shell which is a systematic hedge fund based in London and we're on the quantum developer and I'm really excited to be here today to tell you about how you can make the full certification but Python MVM web act and react no being able to transform an idea into an actual product is incredibly valuable skill but for your career and for you as a person it it can take you from thinking of something I'm making a minimum viable product that you can either use to start the start up making application of work and get a promotion that you're looking for because can show that you can actually create things and make something happen so today and I will
going to be showing you how to make a simple web applications like this this there's
a new single page web applications when you click the button it changes which what assessed by giving you a halo in different European language it has a background it hasn't style but is not really doing anything very complicated yeah so what does a web app look
like this is an example of this level of application which I would say is that in general quite dude representation of what a levitation would look like it has a front ends and it has a back and the front end is what you see here in blue and green and it consists of what the user sees and how the user interacts with the web application and and then explain this is the assumption that you have a basic understanding of what HTML CSS JavaScript and Python as an and if you are a perfect expert in all of these things then the soap might be a little bit basically you and the very everything so the index pages what essentially creates a structure for your website historically this would be an entire skeleton of what the words that looks like but because we're using react react actually componentized that's all the pieces of your website so all of these things actually lived in reaction now instead of the nation out and we will essentially just loading in an are compressed JavaScript's react files into our Additional file and that's literally what that follows going to be we don't have these 2 light cream finances tall it is my stuff out an hour and adults with file these have both been bundled and y are x extra tools to look in the start of the files and they are our react files we take react files which are being written in the and sets their passed into the Babel and commenter Babel conversant in Rome double this web packed and converts this to be something that and are browser can understand and because but but only understands normal dull script the and then we at attach these things to a browser when we talking to the back and when we opt at taking that it'll but what happens is that we are using a doors reply recalled J. query to your http request to seriously can I get a new type of low please and the server returned to us and we will display it on a website and so for this example will be going to be using flask and which I'll get back to more data so 1st things 1st this is going to be our initial for this is that you have a folder in your folder you will have a read me to tell other people about the projects and what you doing and you'll have a project folder respectively this but a folder has a server falter and stuff the folder static folder is a front ends at the holes you spread your Epac you'll be able to rent the and and and we're going to start by going in there and building up front and the so the 1st thing we're going to need is a dollar script package manager and manager I'm sure you're all familiar with from using things like they bore Afghan acts and and it really manages factor this it makes life so much easier because you don't have to worry about going to this web site to download the new version the package making sure you have all the right dependencies with RE even my dependencies by using package manager you just say 0 I want this 1 and this 1 and this pilot downers the version you want or the latest version and you can easily see what's going on and so we are going to be using and PM and is automatically included node that JSI still installed that but it is really a separate applications and you can use it with other languages and just no JS this job script package manager is very easy to use it has a a lot of packages it has about half a million packages is well-documented and is actively being developed so it is essentially a safe option that is and that's be deprecated in 2 months and what is not an so the 1st thing we just can't do it initializing In the end for our project and this has really defaults on you basically just follow the defaults and this creates a package of Jason filed the patent ductus apart and so in a separate directory like this theorem pink so preference everything this thing is the things have changed and the probe packet basin is really useful for multiple reasons it this is just a file you can look at it and it tells you if use responsible for the project and what mention is the project public contact developers what keywords are relevant relevant to this project and and it also means that any other developers can very easily install and run your project and should be completed with feasible so this is what my participation looks like as you can see there's a name there's a version and there's dependencies under license so
everything and we need to know about how this front it's and the next thing we're going to need
is a model the this minimizes the number of script attacks the Dallas for so if you don't bit jealous of the for you know that when to start and having quite a few dollars profiles in each item ulterior smell that index were similar and I need to add them in the right order because you add in the wrong order then everything is a global and depending on you know how you do this it gets quite messy and it takes a long time to load so when using web this bundles are dependencies such it give it an entry points and based on this entry points 8 creates a dependency tree of all the dependencies and and then attach this bundled give while I g you a signal that is once the fact and for 1 entry point and and this basically means that you no longer have to worry about global you know them away but which ordered way importing Sen no not to worry about having notice with tags and having really and readable code is easy to see what's attached and how do I run it it also displays a modular loading which means that an essentially essentially a Europe's to reloading Foster an right to
this is what what that looks like and with its my basically it's fumbling take great takes 1 enrollment modules and
terms the static modules and 1
important thing to note about note about web
that is it it only understands adults with this means that anything else needs to be converted into Dallas appeared to be used for this is that as benefits and and a bit of a problem this means that we need to add a loader or plugin for everything else you want ads this means you want and CSS there's a lot of for that you not files there's a load of about you and background image there's a lot of that's obviously there's a little bit of a a learning curve and once you kind of start getting the hang of it it's actually quite OK and but the benefit of everything being a module is that you can attach it and requirement inside a Dallas script so I can require my see is as follows in my job is great and I can require my background image in my JavaScript's I was actually what really quite powerful and also integrate seamlessly with and PM this surrogate started with that that you install it using and again and then add a file called of the jets the
it really does task at an inner peace too but it wouldn't need to get started in this and get points and the outputs and and the point is just going to
be Ardella scripts directory and an index file and that and then our product is just going to be a bundle that GS and then we exporters and it ends up in a separate folder and then we can get we get ready to use that's now if you wanna have a human application of is page application and instead of a single application we are using this is how you would do it so you can have multiple different entry points we different sites you could have index of outside and they all have a different entry points creating a different bundle so in this case you can look at what happens at the office that's where we have the brackets named the dance and this would just be named after the entry point make think a little to do something interesting with this women's operators playing in a letter that and this is going to be our data directory tree we decide in an index of a small file and adult's profile and and then you can also see where of that so again index this is increasing as a mentioned previously you just add your bundle to you the body of your files and that's that's
everything in each of the all the layout and behavior is in reacts and in our
index of file Alderman induced adds un-alert this it should only from the file or out on the sentence and effectively that is in our file and and that's enough to you greater than that of related to build a reputation as well and I was absent some run amongst madam application as a random ones is an alias and for example if you add a watch commander and as it is the other thing is then used to watch as the word instead of that remembering that entire line of the parameters and it just makes you develop imprisoned lots more fluid and it means that you don't have to remember the joint lines in the cunning this development builds isn't using Make file and so when you start to watch commands watch a special in the sense that you start in different have just keep it running and it automatically builds any changed files and rechristened the bundle for you so you don't need to worry about actually and making sure that you compile your code money because what is going to do that for you that means you can refresh your browser window and see changes immediately instead of sitting there going OK amazing changes but not displaying and 5 minutes they the realizes because you forgot to build and I reopened interface male clients and
that our that great get a something more interesting and we don't add reactants now 1
reason have I really rate like react because it allows you to build small componentized UIC which reusable components and it makes it really easy to basically do repetitive things without having to write for the same code over and over and over again is very good computer science that and methodology in general and it's easy to maintain and it's easy to render components and change and all the logic for component lives within the component which makes it very easy to the base the see what's going on with lives where and Switzerland I want upon for another 1 without problem so we're going to install react and then we are going to add a reactant file which is basically replacing another that previously with this text so where we always need to import reactor actually able to use react and obviously and there's a few things to note here the react means that we're essentially displaying things in and this react and as you can see when I'm importing my act as adults lasted from the mid this means some importing it from a local file by created instead of an external dependency and you might think that being able to use the brackets is kind which Madella's because this is essentially what datasets thus it allows you to use custom navigational tags with your own created classes so the act here is that the theory are in compliance into this part of our code and applications we're then in on the act class which is something that actually does something and in this case we are going to just have it display halo react and I and we need to export default on this class so you always need to be able to extend your was it exporter classes to be able to import them somewhere else and it's good practice to only have 1 class profile and which which means that we can at least basically this export defaults this is where I mean violence up in the dollar's refractory next the index files now what is here is that it's a secondly aid as and that's extension to Java Script it means that you can use as externalities small tags being you dollars group code and you can use your custom classes directly in your dollars for code and so that the right there's a similar tendency that instead of react create element blah-blah-blah which makes the code a lot more readable and but how do we make a browser understand J . datasets a case of 1st we need to use the Babel b was fantastic 8
minutes your you know top state-of-the art really modern Dallas
into the telescope that any browser can understand so it allows you to use Javascript as in as use jealous with and that is modern without having to wait 3 years here out of this document may be incompatible with it and it also allows you to use datasets because it converts sets into standard old group and
so if we want to use table we need to add sets and was freeze it is basically means what
types of dollars with do you want me to understand and to between so we have an idea 2015 and we're going to add reacts which basically means the set the current 2 types we can use we don't need to go to a weapon conveyed and add rule for how in a treaty is X Files note for this that we are excluding non modules known modules that the directory where all your external dependency than that the this basically means that only not quite in this room and save a lot of time every time rebuilding a bundle because we're not interested in and retranslating this in the time the um Greenland opening activation phrasing Aronson and say hello react with adults and we don't need to add a Python flossed server as you need to go to the server folder as and assure you on the 1st Python virtual environments and you then need to be seduced off last because we're going to be using last so I'm pretty used phosphorus perspective like this because the micro survey or a micro framework it's really using a sort with if I was doing a big industry project I would probably be using something like paramedic GenGO instead what it really depends on what you need to use it for and we decide in a follicle solidified to Chaucer folders In here I'm setting up lost is very easy yeah if and so and you just need point where yours and static ones and reunification noise and then and then you need to use sorry and then the game game so we how to due leads to our server we have a default rate to to get to you when you just go to the server and then you have the route to get to you when you go to such low and we are going to be using the default printer to just load a web sites and the reason of using the slash low and point to get all those different fellows to this so in the beginning for now is is going to return a static and the world and we can start the server and go to local voice like thousand and you will see that Hillary so previously because then it's basically connected your reacts and your Python back and no this is great but how do we actually make react communicates with that we need to use J aquarium or whatever other library of your preference but aquatic using so as to which a claim and we do if just as call the URL in question which is article was URL which slashed and then we get some data back and we that data we're going to display in our consulted detect that it works and we are also going to be passing 2 different functions to handle that data so this function easy here we're going to be added to art deco and redundant to be changing the Python in the back to be something a little bit more interesting so is the best returning that static Hello World we are going to be returning a series of different European fellows and notice that there is no initial low because that we would have to update our code in about a year to me it anyway and so yeah and we just return a random word from that list it and and I think it's nice to see little someone special instead of saying just a generic halo so we're actually going to be making a few changes to area code and we to be using of class instead of just putting all our code in our at fault because that means that we could technically had 10 things say hello to someone on on our from pages of this form but for the sake of this list you want so you might recognize this as the render function from previously interacted expert and I made it a bit more interesting by adding a page header which is rare or information still due to go and also we have this class now called low which is passing a name called really what we want to do is we wanna create a class called loaded yes and wanna passing a parameter to it that is the name you wanna say hello to OK so how do we do that to do that you need to add a alluded is that sort naturally and then you need to create the hello classes as previously you need to export default on the class to make sure it's accessible and and you need to have a constructor because structure policy in this thing called crops the prox there is essentially everything you passed in on creation of the class products are immutable onion of a lot of change them and we have therefore need to also have a state states are internal you can change them I would changing state generally when data is actually updated on your website so we that button and see a different type of loan that is because the change in the states and on updating of the state you you I get year rendered but we never talked the props and so as you can see here we are state the states rates at reading
key and the says hello the name passengers being itself alone really and also note that we have to be buying this business because this is not bound by the falls so when we are trying to call a function when you click a button if we don't remind on that function as readers can get undefined before trying to use this in the function and this is just a job things of freedom reacting such but is important to keep in mind and so we're going to be adding this function to our low class and this is the function that handles the data and Boston as we get a new type of flow from our server repository this function as data and then the rebranded states and when he rear-ended states you always have to use this subset state with your key because if the front of the what we just did indeed the structure is on actually going to be rendered the EU-wide so that's what you would have to use this a state and so again as render that allow and how do we wanted to be output as a big hello and it's a bit of a lion and then a button that you take a change you have no do this and I'm added age 1 we are actually reading it and a star in the middle and then a button that's those the same so whenever you take low and I use the bootstrap ones for this because they come by default the quite a nice life without you having to do anything and they are the version that you can miss important already has is this functionality so what we get now we get to you I was as Hillary many and about great OK so were the how do we go from this to something a little bit more interesting and I wanna add some CSS and so on as previously delisted only over but that only in a sense jealous script and so I need to add a and I'm I'm going to stall the style of the CSS loaded and extract again and we need these 2 loaders to converge our CSS files and then we need to extract plug-in to be able to extract our work and bundled assessed from my generic telescope bundle into something we can actually attached directly to you are in litigation of policy can render I doubt scripts under the effects separately you don't expect it and at has to separately and you're basic even have your you I probably be rendered after all the Dallas office of been rendered which is going have very weird side effects and so we need to add a plug-in which is the extracted in and the naming you can see there is what we decided to name are bundled sees as far out and and that is what it's gonna look like in a directed tree note that there is a difference between and my CSS file tools that that's CSS and my bundled wild style of CSS and this is because are browse through only has access to the bundle files if you try to load up the normal CSS file that you not really going to get the result you expect this has not gonna prior styles so you need to attach the bundle 1 and at the the look that up so how we do that is by adding a force that of CSS to a folder or and my by the few cells there it does something make a little bit nicer and and then I need to require my full sets of CSS file in my react so you don't know its interior point is not going to be picked up when the web packets fumbling unusually think you have new styles applied and as a result it's not actually going to get involved and and then we need to add the style sheet which is the bundle cell 2 are in middle age operates and what we end up with that is space yeah and and I can see I stars being applied so uh it looks difference and is quite nice that I would still like to basically add background image the adding a background image and is just adding an image or image folder and we need to then use of loaded so low that image and when the use of fire loader it can specify what types of also wanted to learn to knock case we're going to specify that we will J K and PGs etc. and that's another rule Enewetak and and then you need to have basically at about neural to your CSS as done here but the cabinet here is just adding this year's CSS is not going to add to make the image show up you need also load your image in your area code to be able to have that in his show up and this is something that a lot of people seem to be quite confused about and gets judging by googling and a but because basically you need to import your image you then need to create a new image objects and add your image as the source for that the image of that and then you need to render your image and in Europe render it function in that file and only you all of those steps are your image is actually going to show up otherwise you not gonna see anything even as see white page is so previously so what we have now is and now that
has a background image it has a nice CSS we have managed to position that's where you want to do on the page and when you click the button it says hello in different European languages so thank you for
listening and any questions and you can find me on engineering vector and this is also the same handle uh I used on the time and medium and there's a blog posts about how you can do this step by step and all the code is also on the top so you can either follow the blog posts and this step by step or you can go to get up and get all the code immediately and decides also been uploaded on your apartment set of course thank you that would be any questions yes good it it hi and think will tell that is the reason you don't use the yard in place so in PM no particular reason that it's a Iibrary like using in the MIB might be using it for a while it is really good support it works really well I've never had achieved using it no compatibility issues and and basically does what any so I see no reason to such as presents yeah it is any other questions it it the bottom you suggesting about the between the service I called the and the planes I called because sometimes uh of course the really uh rendering the feature client site it's you'll benefits in terms of speed but of course the many times your device is not is not powerful enough tools for and the euro you reach so maybe you have some of the legal officer that force some suggested that you want to share and will be uh I belong here from each 1 thinks called yes so technically you can react to render react server-side as well but I would say in general I it's quite good practice to describe to you minimize the sizes of your web pages UCC loading try to speed up what you do a different pages and not try to load a you know a multimegabyte image immediately with all the functions and probably 10 different calls so couldn't try to optimize equation that way and also you obviously want at or your application logic in your back and to any longer and applications any complex computations anything like that I would always fixed in my back and and as the the front-end as rendering the nice things anything I can Honey geosynchronous in the back end is for perfect basically on the other any other questions get into this Be and