Why and How I Used Vue.js for My Python/Django Web App (and why not React)

in my last video I developed a Q&A website for coders using Django and as I mentioned in that video I didn't use view or react or anything like that just to keep it simple later though I decided to add view j/s on top of it instead of react so in this video I'm gonna show you why I decided to make that particular choice how I did it and what I was able to accomplish using it first of all let me show you what my use case was basically it's for the question page that shows the details of a question and the answers to that question and I wanted to use view to add this output and download buttons for the question as well as each answer what I used to have before is I used to have these upward and downward buttons for the question but then every time someone would click it it will refresh the whole page and I think that was ok for the question because there's only one question per page but I think it'll be pretty annoying for the answers because if I wanted to say you know upload all of these answers it would refresh you know the whole page every time for each answer it's not a very smooth experience right and the way I solve this particular problem using view is I first replaced this upload and download buttons for that question so it doesn't refresh the whole page and then I replicated the same functionality to each answer and that's when I needed to decide whether I wanted to use react view or something else and so let me explain why I decided to go with view right here actually for my previous project I used react and Django together and that kind of worked but it was a huge pain to set everything up so the approach I was using with react and Django is called page as a component the idea of this approach is to replace only a portion of the website for example one page one particular kind of page of your website with a react component so in this case I would replace just the question page with a reactor component but nothing else a different approach would be to replace this whole website with a single reactor component and that approach is called a single page app but I didn't go with that because pages of components you know replacing only one page with a reactor component is slightly simpler so that was the approach I was using but even with that approach it was way too complicated definitely a lot more complex than using view and the reason why react is more complicated is because with react you will need to use a lot of other things for example you would need to set up a node.js server that's separate from your Django server and then you will need to use libraries like babel and webpack so there are a lot of other things that you would need to learn to use other than react but with view it's much simpler to set it up as you see in a second so let me show you how to go about setting it up with Django here just for a demo I created a new page called tests it's at the local servers URL slash tests this is my local Dremel server and it just says hello it's a simple page and it's actually already running a view app on top of Django so let me show you how I set it up the first thing I did is I created this new view called test view in Django and this is invoked when that URL is called by a user and this test view is going to retrieve the current user and then it's going to render my new template called testa HTML using this context this context contains the username of the current user as well as the current user object itself so that this template testa HTML has access to those two variables so now let's take a look at the template that I just mentioned testa HTML it has two simple components three if you want to kind of counter everything so let me explain those the first one is we need to import the view library which is done in the simple statements but it's actually done in the head part of the HTML so we can just comment this out because we don't have to import it twice and the second part is the main div that we're gonna use that's associated with our view instance and the third part is the script where the view instance is defined so let me explain the script part first in this script section and as I said a new view instance is defined and it's assigned to a variable called app and in this part of the code there are a couple things that are defined now the first one is the limiters so usually we don't need to define the limiters explicitly but here we need to because the default delimiters of you are the same as the default delimiter is Django which are double square brackets I would double curly brackets so we need to use something else for view and that's why we're using double square brackets here instead of double curly brackets and this is what tells view which things our view variables so for example here I my HTML we're saying this thing message is a view variable it's not a regular HTML thing when view sees this it looks for this variable in the data attribute of this view instance so here I'm saying the data of this view instance is just one called message it's its value is hello another thing that we need to define here is this L which I think stands for element this is the element that corresponds to this view instance and this is the ID app and that refers to this div element right here so just to recap we have a new div element here with the ID app and that's associated with this new view instance that we just defined with the delimiters double square brackets and when view sees this thing or when your browser sees this part with view it says okay you know what should this variable be and it looks for it in this data section here and it says okay that's hello so this part message it's gonna be replaced with hello and that's why when we go to slash tests that's exactly what we see hello now I explain a lot of things here but I think the key point here is that it's much simpler to setup a view waste jungle than to set up reactivates jungle you know here all I needed all I needed to do is I needed to import view with a single line and then set up a new view instance and set up a single div element with a particular ID now that's it and I have a view up here you know I don't need to use any other libraries like a node.js server or Babel web pack so it's definitely simpler than react I would say anyway if you want to use a jungle variable within this view app that's pretty simple - the simplest way to do it it might not be the correct way to do it would be to in this message for example I can just write double curly brackets username so what happens with this script is when Django see this when Django sees the same plate it's gonna replace this part username with the actual current username and then when this is sent to the browser this is gonna be hello username whatever the user name is and then this part message is gonna be replaced with that particular string so if my username is let's say YK dojo I should see hello YK dojo here so again jungle replace jungle will replace this username with YK dojo and then this string becomes how I work it dojo and that is gonna be right here hello YK dojo and if I save this file and go to that URL that's what I should see right here and that's exactly what I see right now I'm logged in as YK dojo - as you can see right here so I see hello YK dojo - now this approach technically works but I would say it's a little bit hacky because I'm mixing jungles template language with JavaScript so a more you know clean way of doing it would be something like this I'm gonna use this jungle statements this says take the jungle variable username and then make it available to the HTML and to JavaScript by putting it in an element called username so this way we can make this jungle variable available to JavaScript and we can retrieve it in JavaScript with this little thing right here let me paste it here and let me explain here so this JavaScript statement says get this element that's that contains this variable username with document dot get element by ID and then get what's inside it and parse it so that it's available in this new JavaScript variable username so this way you know it's a little bit cleaner because we're separating jungle templating with JavaScript and now instead of using a jungle variable here directly we can use the JavaScript variable instead which I think it's cleaner like that hello plus user name plus let's say an exclamation mark so this way we should see the same thing because we're supplying the jungle username variable to JavaScript and we're retrieving it into a JavaScript variable and then we're putting it here into the message which is part of the view app here and so when this gets loaded that's what we should see hello user name exclamation mark so let's make sure that works by going to the same URL and refreshing it yeah that's what we see hello user name now this is the first basic step for setting up a Django and view together but if you want to create your own full stack app using this text stack this is not quite enough so let me try to explain those quickly the first thing is this statement that we saw earlier doesn't always automatically work so it worked he works for simple variables like this username which is a string but if we had a more complex object for example the current user that we were passing from our Django view it doesn't always work so I got this error object of type user is not JSON is serializable what that means is that jungle provides us with with a default serializer the serializes this object this given object into a JSON object that can be used within JavaScript but this default serializer doesn't always work so what you'll need to do instead is you need to set up your own custom serializer using jungle rest frameworks serializer a library and I don't have time to explain that right now so I'm gonna put you know all the relevant links in the description so that you know you'll be able to look into how to do that and you can look at my code as an example about how to do that too and that's what I used to serialize you know each answer object that's sent to my view app too so that my view app will be able to you know eat use each answer object as if that's an JavaScript object now the second thing is what if you wanted to send some data from view to jungle not just from the from Django to view well the first thing you want to do is you want to define a method in your view instance kind of like this methods and then you can define the name and the function so let's call it votes so let's let's just say this is gonna be a function that's gonna be called when you know one of the vote buttons is clicked for now I'm just gonna create a simple function that's gonna say alert the votes function is invoked and then what you want to do is you want to use this special attributes v on quick I think this is the right syntax and then just say booked so this says when this element is clicked this method should be invoked let's make sure it works so far by clicking it and it works when whenever this element is clicked that function is invoked and to send data or to send a request from view to jungle what you want to do is you want to use this library called Axios which is recommended by view itself and this library you can use it to send an AJAX request to the jungle server with some data from the view app so for example in this function you can just say you know use the Axios library to send a post request using an AJAX request to django server to either upload or download or cancel that boat and when when the jungle server handles that request and says okay you know that vote was accepted some kind of response is returned to the view app and within the view app within this function you can handle that request so with my particular app let me show you how that works quickly when I upload let's say this answer right here that request is sent to other jungle server when that is successful I can you know change the color of this upload button within view okay so all of this is pretty technical you might say is it really worth the effort and I would say in this particular case it definitely was so let me explain why there is one more sort of feature that I implement it you know related to these voting function and that is the point system so how that works is whenever you answer someone's question and someone else uploads your answer you get one point you know every time someone uploads your answer and that point is shown right here with your user name and your this is my point and this is shown in the leaderboard - so whoever you know answers most about most amount of questions and gets most amount of points is shown here and I found that it's actually pretty motivating I say this because as soon as I implemented this leaderboard and point functions I noticed that people started answering questions more so for example right now you know most of these questions at the top page have already been answered at least once and it seems like you know this leaderboard and the point system is a big part of it it might you know seem a little bit silly but it's pretty motivating I find for other users and for myself too and people sometimes even you know talk about it and say stuff like you know how can I get a point and by the way the answer to that question is you just need to answer somebody else's question and then somebody else will need to put your question I mean your answer so those are the main features that I worked on these past few weeks but there are a few other things that I added the one big one is the search function you know to search for questions I thought about different alternatives for implementing this one you know should I use a jungle search function or maybe a third third party such library but I decided to go with Google's custom search function I guess because it's the simplest way to implement it and it's free for me it's not perfect I think it's good enough for now so if you search for for example Django it's gonna show all the questions that are related to jungle again it's not perfect you know it shows like an ad from Google and that's not ideal but I think it's good enough for now and I wanted to have a search function as soon as possible and that's why I decided to go with this approach and you know if you try using this website and if you have bug reports or feature requests or anything like that you can just go to the source code of this page and you can submit a new issue right here on github and I'll see what I can do about that okay that's pretty much all I wanted to talk about today you know sorry for the delay from the last video but I'm hoping to you know make more progress either on this project or maybe start a new project entirely and you know talk about it on this channel anyway thank you as always for watching my videos and I'll see you guys in the next one

Channel: CS Dojo

Views: 131,909

Rating: 4.9019432 out of 5

Keywords:

Id: bI5jpueiCWw

Length: 20min 33sec (1233 seconds)

Published: Fri May 29 2020