 Good morning, Romani. I hope you're all having a great conference so far My name is Angela and I work for man HL, which is a systematic hedge fund based in London Where I'm a quant developer I'm really excited to be here today to tell you about how you can make a full stack application with Python npm webpack and react now being able to Transform an idea into an actual product is an incredibly valuable skill both for your career and for you as a person it can kind of take you from thinking of something and Making a minimal viable product that you can either use to start a startup make a new application at work and Get that promotion that you're looking for Because you can show that you can actually create things and make something happen So today I am going to be showing you how to make a simple web application like this this is a single-page web application When you click the button it changes With what it says by giving you hello in a different European language It has a background. It has some style, but it's not really doing anything very complicated So What does a web app look like this is an example of this web application Which I would say is in general quite a good representation of what a web application would look like It has a front end and it has a back end 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 I'm going to explain this with the assumption that you have a basic understanding of what HTML CSS JavaScript and Python is And if you are a perfect expert in all of these things then this hook might be a little bit basic for you But bear with me. So the index of HTML page is what essentially creates a structure for your website Historically, this would be an entire skeleton of what your website looks like but because we are using react react Actually componentizes all the pieces of your website so all of these things actually live in react now instead of in HTML and We will essentially just be loading in our compressed JavaScript react files into our HTML file and that's literally what that file is going to be We then have these two light blue files at the top It is our style file and our JavaScript file. These have both been bundled By our extra extra tools. So if you look in these dark blue files They are our react files. We take our react files, which have been written in JSX they are passed into the Babel Converter Babel conversion to normal JavaScript web pack then converts this to something that Our browser can understand Because we're back only understands normal JavaScript and then we attach those things to our browser When we talking to the back end when we are Clicking that little button. What happens is that we are using a JavaScript library called jQuery Do you have HTTP request to ask the server? Hey, can I get a new type of hello, please and the server will return that to us and we will display it on our website So for this example, we are going to be using flask Which I'll get back to more later. So first things first This is going to be our initial project setup. You have a folder in your folder You will have a read me to tell other people about your project and what you're doing and you'll have a project folder respectively This product folder has a server folder and a static folder the static folder is our front end It holds your JavaScript your web pack your Babel your npm And we're going to start by going in there And building our front end so the first thing we are going to need is a JavaScript package manager and package manager, I'm sure you're all familiar with from using things like pip or apt-get And it really just manages your packages It makes life so much easier because you don't have to worry about Going through this website to download the new version of that package making sure you have all the right dependencies What are even my dependencies? By using a package manager, you just say oh, I want this file and this file and this file And it downloads the version you want or the latest version and you can easily see what's going on So we are going to be using npm Npm is automatically included with no.js if you still install that but it is really a separate application And you can use it with other languages and just no.js, but it is a JavaScript package manager It is very easy to use it has a lot of packages. It has about half a million packages It's well documented and it is actively being developed So it is essentially a safe option that isn't just going to be deprecated in two months At least I hope not So the first thing we're just going to do is initializing npm for our project This has really good defaults and you basically just follow the defaults and this creates a package of JSON file The package.json file ends up in our static directory like you can see here in pink So for reference everything that's pink is the things that have changed The package.json is really useful for multiple reasons It is just a file. You can look at it and it tells you who is responsible for the project What version is the project? How do I contact the developers? What keywords are relevant to this project? And it also means that any other developers can very easily Install and run your project and it should be completely reproducible So this is what my package.json looks like As you can see there's a name. There is a version There's dependencies and a license so everything I really need to know about how this front-end works The next thing we're going to need is a module bundler This minimizes the number of script tags in your JavaScript So if you've done a bit of JavaScript before you know that once you start kind of having quite a few JavaScript files You need to add them all to your HTML.index or similar And you need to add them in the right order because if you add them 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 By using webpack this bundles our dependencies you essentially give it an entry point and based on this entry point It creates a dependency tree of all your dependencies And then you attach this bundled JavaScript file to your HTML. That is one script tag for one entry point And this basically means that you no longer have to worry about globals You no longer have to worry about which order do I import things in you no longer have to worry about Having loads of script tags and having really unreadable code. It's easy to see what's attached and how do I run it It also does lazy module loading which means that It's actually essentially your pages are going to be loading faster Right, so this is what webpack looks like with its Mode basically it's bundling so it takes all your normal modules and turns them into static modules One important thing to note about note about webpack is it only understands JavaScript This means that anything else Needs to be converted into JavaScript to be used. This is both a benefit and a bit of a problem This means that we need to add a loader or a plug-in for everything else You want to add this means you want to add CSS. There's a loader for that. Do you want to add files? There's a loader for that you want to have a background image. There's a loader for that obviously, there is a little bit of a Learning curve here, but once you kind of start getting the hang of it. It's actually quite okay But the benefit of everything being a module is that you can attach it and require it inside your JavaScript So I can require my CSS file in my JavaScript and I can require my background image in my JavaScript Which is actually what quite really quite powerful And it also integrates seamlessly with npm so this is how we get started with bell pack You install it using npm And then you add a file called webpack.js It really just has In the least Everything you need to get started is an entry point and the output And the entry point is just going to be our JavaScript directory and the index file in there And then our output is just going to be a bundle.js And then we export this and it ends up here in our static folder And we can really get ready to use that now if you want to have a if you have an application that is a multi-page application Instead of the single-page application. We are using this is how you would do it So you can have multiple different entry points for your different sites You can have an index page and about site and they will all have a different entry point Creating a different bundle so in this case you can look at what happens in the output Where we have the bracket name.js and this would just be named after your entry point name Okay, so let's actually do something interesting with this. We're going to start by displaying an alert This is going to be our updated directory tree. We're just adding an index of hml file and a JavaScript file And then you can also see where our bundle ends up that So okay the index This is super easy as I mentioned previously. You literally just add your Bundle to your the body of your file and that's it everything you need to do All the layout and behavior is in react In our index.jsx file all we're going to do is add an alert. This is literally the only file Only sentence effectively that is in our file And that's enough to Create an alert We don't need to build our application as well I always add some run commands when I build my application a run command is just an alias For example, if you add a watch command As you can see I can just then use watch as the word instead of that remembering that entire line and all the parameters And it just makes your development process a lot more fluid It means that you don't have to remember the giant lines and you can kind of just do a build and it just builds It's similar to using a make file So when you start the watch command Watch is special in the sense that you start in a different tab and you just keep it running It automatically builds any change files and re-create a new bundle for you. So you don't need to worry about actually Making sure that you've compiled your code manually because watch is going to do that for you That means you can refresh your browser window and see your changes immediately Instead of sitting there going okay, I made some changes, but they're not displaying and Five minutes later you realize because you forgot to build We open the index of HTML page. Ta-da. We have an alert great. Okay. Let's do something more interesting We're going to add React to this Now why am I using react? I really like react because it allows you to build small componentize UIs with reusable components It makes it really easy to basically do repetitive things without having to write The same code over and over and over again, which is very good computer science Methodology in general It's easy to maintain and it's easy to re-render components and change All the logic for a component lives within that component which makes it very easy to Basically see what's going on see what lives where and switch out one component for another one without problem so we're going to install react and Then we are going to add a react file Which is basically replacing that alert we had previously with this text. So for react you always need to import react To be able to use react Obviously There's a few things to note here. The react dom means that we are essentially displaying things in With react As you can see when I'm importing my app, there's a dot slash in front of it This means I'm importing it from a local file that I've created instead of external dependency and You might think that being able to use brackets is kind of weird inside my JavaScript code But this is essentially what JSX does it allows you to use custom effectively html tags with your own created classes So the app here is effectively our entry point into this part of our react code our application We are then going to add the app class, which is something that actually does something In this case, we are going to just have it display hello react And we need to export default on this class So you always need to be able to you always need to export your classes to be able to import them somewhere else And it's good to practice to only have one class per file and which which means that we can basically just export defaults This is where our new file ends up in the JavaScript directory next to the index file now what is JSX it's exactly a Syntax extension to JavaScript. It means that you can use XML and HTML tags in your JavaScript code and you can use your custom classes directly in your JavaScript code So it lets you write those HTML tags you see there instead of react dot create element blah blah blah, which makes your code a lot more readable But how do we make our browser understand? JSX, okay, so for this we need to use Babel Babel is fantastic. It converts your You know top state-of-the-art Really modern JavaScript into JavaScript that any browser can understand. So it allows you to use JavaScript And allows you to use JavaScript That is modern without having to wait three years for your browser to start eventually being compatible with it It also allows you to use JSX because it converts JSX into standard old JavaScript So to be able to use Babel we need to add presets and Babel has preset It basically means what types of JavaScript do you want me to understand and convert between so We're gonna add ES 2015 and we're going to add react which basically means these are the currently the two types we can use We then need to go to our webpack config and also add a rule for how we're going to treat JSX files Note for this that we are excluding node modules node modules is the directory where all your external dependencies end up This basically means that when we're not compiling this we are going to save a lot of time every time We're rebuilding our bundle because we're not interested in retranslating this every time We are going to open the index of HTML page in a browser and they should say hello react which it does We then need to add a Python flask server You need to go to the server folder and ensure you are in a first Python virtual environment You then need to basically install flask because we are going to be using flask So I'm Produce flask for a project like this because it's a micro survey or a micro framework It's really easy to use and get started with if I was doing a big industry project I would probably be using something like pyramid or Django instead, but it really depends on what you need to use it for And we're just adding a file called server dot pi to our server folder in here setting up flask is very easy So You just need to point at where your static bundle is and where your index of HTML is And then you need to So we have two two routes to our server We have the default route that you get to when you just go to the server and then you have the route you get to When you go to slash hello We are going to be using the Default route to just load our website and then we're going to be using the slash hello end point to get all those different Hello's that you saw in the beginning For now, it's just going to return a static hello world We can start our server and go to local hoist 5000 and you will see that hello react We saw previously Because then it's basically connected your react and your Python back end now This is great, but how do we actually make react communicate with that back end? We need to use jQuery or Whatever other library of your preference, but I quite like using jQuery. So with jQuery We basically just Call the URL in question, which is our local host URL with slash hello And then we get some data back and with that data We are going to display it in our console to check that it works And we are also going to be passing it to a different function to handle that data So this function you see here. We are going to be adding to our react code We are then going to be changing the Python in the back end to do something a little bit more interesting So instead of just returning that static hello world We are going to be returning a series of different European. Hello's Notice that there is no English hello because then we would have to update our code in about a year to remove it anyway So yeah, and we just return a random word from that list And I think it's nice to be able to say hello to someone special instead of saying just a generic hello So we are actually going to be making a few changes to our react code here We are going to be using a class instead of just putting all our code in in our app file Because that means that we could technically have ten things Saying hello to someone on our web on our front page instead of just one But for the sake of this we'll just do one So you might recognize this as the render function from previously in our app to JSX file I've made it a bit more interesting by adding a page header, which is where all our information is going to go and Also, we have this class now called. Hello Which is passing in a name called remedy what we want to do is we want to create a class called hello to JSX And we want to pass in a parameter to it. That is the name. We want to say hello to Okay, so how do we do that? To do that you need to add a hello to JSX file naturally Then you need to create the hello class as Previously you need to export default on the class to make sure it's accessible outside And you need to have a constructor the constructor passes in this thing called props The props here is essentially everything you've passed in on creation of the class Props are immutable and you're not allowed to change them We then therefore need to also have a state States are internal you can change them and when changing state That's generally when data is actually updated on your website So when we click that button and you see a different type of hello That is because we've changed the state and on updating of the state your UI gets re-rendered But we never touch the props So as you can see here, we are initiating the state with a greeting key And it just says hello and the name we pass in which is Riemeny. So hello Riemeny Also note that we have to rebind this This is because this is not bound by default So when we are trying to call a function when we click a button if we don't rebind this on that function We're just going to get undefined if we're trying to use this within the function and this is just a JavaScript thing It's not really a reacting as such But it's important to keep in mind So we are going to be adding this function to our hello class and this is the function that handles the data we passed in So we get a new type of flow from our server We pass it to this function as data and then we revender the state When you revender the state you always have to use this dot set state with your key Because if you try to do what we just did in the constructor, it's not actually going to revender the UI So that's why you always have to use this sort of set state So okay, let's render that hello We wanted to be output as a big hello a little bit of a line and then a button that you can click to change Your hello to do this I'm added on each one with our actual reading an HR in the middle and then a button that goes say hello whenever you click hello And I've used the bootstrap buttons for this because they come by default with quite a nice UI without you having to do anything And they are very accurate version that you can just import that already has those are this functionality. So what do we get now? We get a UI that says hello remedy and a button great, okay, so How do we go from this to something a little bit more interesting I Want to add some CSS? And as previously JavaScript only or webpack only understands JavaScript So I need to add a loader And I'm going to install the style loader the CSS loader And an extract plug-in We need these two loaders to convert our CSS files and then we need the extract plug-in to be able to extract our bundled CSS from our generic JavaScript bundle into something we can actually attach directly To our index of HTML file so we can render our JavaScript and our CSS separately if you don't extract it and attach it separately You're basically gonna have your UI probably be rendered after all your JavaScript has gotten been rendered which is gonna have very weird side effects So we need to add a plug-in which is the extract plug-in and the name in pink You can see there is what we've decided to name our bundled CSS file And that is what it's gonna look like in our directory tree note that there is a difference between my CSS file full stack dot CSS and My bundled file styled CSS and this is because our browser only has access to the bundled files If you try to load up the normal CSS file, you're not really going to get the result you expect It's just not going to apply your styles. So you need to attach the bundle one and Basically load that up So how we do that is Adding a full stack dot CSS to our folder I'm out of the few styles to it. Just something to make you look a bit nicer And then I need to require My full stacks of CSS file in my react code if you don't load it into your react code It's not going to be picked up when webpack is bundling and it's going to think you have no styles applied And as a result, it's not actually going to get compiled And then we need to add the style sheet, which is the bundle style sheets To our index of HTML page and what we end up with then is this And now you can see our style has been applied It looks different and it's quite nice, but I would still like to basically add a background image Adding a background image It's just adding an image or image folder We need to then use a file loader to load that image When you use a file loader, you can specify what types of files you want it to load So in our case, we are going to specify that we will load JPEGs PNGs, etc. And that is just another rule in your webpack config And then you need to Basically add a background URL to your CSS as we've done here But the caveat here is just adding this to your CSS is not going to actually make your image show up You need to also load your image in your React code to be able to have that image show up And this is something that a lot of people seem to be quite confused about Just judging by googling it Because basically you need to import your image You then need to create a new image object And add your image as the source for that new image object And then you need to render your image In your render function in that file And only if you do all of those steps are your images actually going to show up Otherwise, you're not going to see anything. You're going to see that white page we saw previously So what we have now is An app that has a background image It has some nice CSS We have managed to position it Where we wanted to on the page and when you click the button It says hello in different european languages So thank you for listening and any questions You can find me on engineering and twitter This is also the same handle I use on GitHub and medium And there is a blog post about how you can do this step by step And all the code is also on github So you can either follow the blog post and do this step by step Or you can go to github and just get all the code immediately The slides are also been uploaded on the european website, of course Thank you Any questions? Yes Hi, thank you for your talk Is there a reason you don't use yarn in place of npm? No particular reason It's um, I really like using npm. I've been using it for a while. It is really good support It works really well I've never had an issue with using it. No compatibility issues Um, and it basically does what I need. So I've seen no reason to switch at presence Any other questions? Have you got any suggestion about a trade-off between the server side code and the client side code because sometimes Of course the Rendering the page client side gives you benefits in terms of speed, but of course Many times your device is not Is not powerful enough to to render your your page. So maybe you have some Uh trade-offs that uh for some uh suggestion that you want to share and uh or maybe I don't know. You have some tips and tricks about that. Yes, so technically you can react render react server side as well but I would say in general, uh, it's Quite good practice to just try to minimize the sizes of your web pages Use lazy loading try to split up what you're doing on different pages To not try to load You know a multi megabyte image immediately with all your functions and try to do 10 different calls So kind of try to optimize your page in that way and also you obviously want to put all your application logic In your back end to any longer running applications any Complex computations anything like that. I would always put in my back end and just leave the front end as Rendering the nice things anything I can kind of do asynchronously in the back end. It's perfect basically Um, so yeah, any other questions? Okay. Thank you for listening