Building a VueJS app - Part 1 - Getting Started

hey everyone welcome to day one of my hundred day view J s coding challenge in the next hundred days I'll be recording my progress in making my first few J s site in real time well almost real-time a video every couple days it won't be polished like a tutorial but it will go further than most beginner tutorials and you would to see what a realistic progression looks like when you're building a first app that ends up hopefully pretty complex ok so I realize that we're not supposed to go for complex I get that but for the purposes of learning and showing learning how to handle complex things is good you just don't want complex things in your actual production code a bit about me this is my first VJ s site but I have been watching VJ s tutorials for a couple weeks without coding any not recommended by the way and I do work as a software developer and I have for several years so this won't be a thing where you watch me learn the absolute basics from scratch but it hopefully will still be helpful now with that out of the way let's get started so the framework going to be using is UJS specifically the version we're going to be using is two point six point ten although if you're using a version that's later than this unless it's 3.0 then probably everything that I'm writing here will work in your app and even with 3.0 there won't be too many breaking changes so this should work for a long time then to install it and get all our tooling set up we're going to be using view CLI specifically we're going to be using the 4.0 release candidate now back in the old alpha days of 4.0 there are a lot of breaking changes but it looks like those have slowed down and they're doing a lot of bug fixes now just to get ready for the actual release so we'll go ahead and use that so let's go ahead and grab this yarn command and go to our command line and then we'll be installing view CLI for all right so I spent some that up and I also opened up a new window so we can get it working so view dash V see that we're using 4.0 0.0 - RC - that is exactly what we want by the way if you are following along and 4.0 has been released you'll only need to do that when you're adding it to yarn okay so let's actually make our view app so there are a lot of commands you could use one of them is view UI which opens up a really cool GUI for us to use unfortunately there is an issue that makes it so we can't unfortunately there's a bug with it right now so we can't use it to create stuff but we can still use view create so let's create our name so we'll call it view screencasts because we may need a place to host these videos later especially if we want it to have a worldwide reach YouTube and Vimeo are currently blocked in China so we'll need a special site for that all right so let's go ahead and pick one of the presets we could manually select features but let's go ahead and go with one of these defaults alright so now it's installing the packages you all right awesome so everything is generated and let's go ahead and go into that folder and type yarn serve and see what we have so it's going to take a little while to build it and now we can check here alright it's running awesome it shows us that we have installed the following CLI plugins Babel yes lint router and view X so Babel lets us write modern JavaScript that's then compiled down to the older style that can run in all the browsers yes lint make sure our code is nice got the router and view X which we'll be looking at more later when I'm getting started on any codebase I like to take a look around and see what's already there get to lay the land fortunately since this is a new project it won't be that difficult there's not much there yet but we still want to see what is there so let's get started on that all right so I've got our project folder open and vs code you can use whichever editor you want doesn't really matter whatever you're comfortable with so we have three folders and five files let's go over the files first you'd ignore is pretty standard for JavaScript project we've got the node modules and slash dist ignored as well as the local environment files the log files and the editor files looks like they have it for a lot of different editors the babel config we have the preset and that tells Babel to use the preset compilation if we wanted to use some more cutting-edge JavaScript features then we could go ahead and mark it down here and then Babel would know to compile those all right our package JSON there's a lot of action going on in here so there's the name of our project the version which we can this really matters if we're creating a library for others to use it doesn't really matter for our purposes here our scripts notice we typed in yarn serve to get it working and it actually does this behind the scenes now we have our dependencies we've got view view router and the UX which is that is what we wanted we asked for those we didn't ask for core Jas so what's that turns out it is a bunch of polyfills for modern JavaScript so promises symbols collections iterators typed arrays so on and so forth I think this is something that babel uses so those four are our dependencies and those are what's shipped with the app the dev dependency is we're going to be using them when we're developing but they're not going to be shipping with the app so we're not gonna ship a copy of Babel with our JavaScript payload that we send to the user same with es lint sass these are all going to be doing their work precompilation with Babel and then linting another precompilation more precompilation lots of compilation going on so those are our dependencies in our dev dependencies later on if we want to add something like a testing suite it would go into dev dependencies and if we wanted to add something like Knox Jaya it would go into dependencies now let's look at the rest of the package.json so there is the es lint config which is going to tell us which things to parse which things to throw errors on we won't look too much into that for now and then post CSS I think that's a sass thing and in browsers list that's interesting that is used by Babel and several other add-ons so here are the list of things that it's used in so Babel and yes lint are important for us for now so in this list rather than listing every brower's are individually because they're a lot now we have two criterion the last two versions of a specific browser or any browser with greater than one percent market share so we can look at our usage stats and see that you'll not be targeting ie6 uh-huh but we will be targeting you know I don't know if I can find any that are not in the last two versions with greater than 1% because we have evergreen browsers now this is great so the upshot of all this is that because we're only targeting modern and popular browsers then we don't have to worry about IE 7 support and that means we have to include fewer polyfills we're gonna be compiling the code transpiling a code into JavaScript that's more modern and that means more readable and probably a smaller payload size and we don't have to include has many edge cases so that's really good of course if you didn't need to target those older browsers just put in here and everything's gonna be taken care of for you alright next file the readme this is just basics once our setup gets more complex we'll probably put in some more stuff for future users of this code and then our yarned lock this is like a package lock JSON if you've used in p.m. but this is just the yarn version of it it's a little bit cleaner I think all right now let's look at those folders so node modules that's pretty standard it's just all the node modules and I mean they're a lot but that's fine then there's public which is just our favicon which is little view icon and then index dot HTML so that has our title which with our name and then if there's no script it'll show a message so if they don't have JavaScript enabled so there's not a whole lot going on here this is where we're gonna Auto inject our files that we build using Watson source and so this is our actual view app so let's look in main yes so this is where we are starting view we import view from view we create a new view instance and then we put in our router in our store which we are importing from router and store from the index.js file that are on each of them each of those folders and then we're going to be rendering our app which we import from here and then we're mounting it on the app ID which is right here okay so that's what's happening here it's basically starting our view app let's go ahead and look at what's in router and store real quick so in store in this file we have a view X dot store that we're treating and currently there's nothing in there but we'll fix that as time goes on and this will become very useful but for now we'll just leave it alone with router so this is a little bit more so we have a list of routes and we have two routes that have been auto-generated for us home and about so home you can access on the path dot slash and about we can access on the path slash about and let's go ahead and try that in the browser so we'll go to here and we're already on home and then we go to about and it will show us the about page and how do we decide what to show in each of those well huh so the home component is listed here and that's imported through here and then the about page is a little bit different because it links directly to a view so our component is just a function that we create here and we directly import the view and so this gives us code splitting which means that when we're loading anything else then this is not loaded so in larger apps that can be great we don't really need it here they're just doing it here to show us that we can do it so let's go ahead and look at that view that we're loading there it should be pretty simple and yeah it's just a template that says this is an about page then let's go back to our router and see that okay so the component in the home route is the home component but it's coming from views slash home dot view and yeah it's laid out like component it the question I'm having right now is if its component why is it in the views folder and not the components folder well I looked it up and it turns out this is a view router convention so something that's reusable that you can use in multiple pages you keep in the components folder and something that's referenced directly from the router you keep in the views folder so you basically have one view for each of your routes and then they use stuff that's within the components folder so that's just a convention it's a useful convention but if you feel like doing something else you can do that I'm gonna go ahead and stick with the convention all right so let's take a look at our home component in our script basically all we're doing is importing the hello world component and setting it there and then using it in here after putting in our view logo and then our hello world component is a little bit more complex it is actually mostly template so we're taking in one props that's the message and you can see that we're feeding in those props there so that's a pretty easy way of putting in props that's nice and we've got a little bit of scoped scss so this will only be in this component that is really nice that's going to save a lot of time and then we have a lot of HTML mostly links all right cool so I'm pretty sure this is mostly explored so we do have our app dot view which is all right so we're gonna have our home and about pages up the top that's what's putting those in right here and then we have a router view component so basically this is what's shown everywhere and then we put in our router and we've got some styling that I think is app wide so I mean don't use a nav ID anywhere else and you'll be fine and then finally we've got our assets which is just a logo right now alright so that is what if you see Eli gives us to start that took a little bit longer to explain than I expected but that's okay now we know where everything is and we can get started on building our own app with confidence in this section we're gonna take a list of videos and then display them on the home page so we'll be working with our first data and messing with our first template it's relatively simple but it's a good nice starting exercise plus it's something we need to do for the site all right let's get started on the code here is what we're displaying right now on the home page and this is what its gonna look like by the end of this section it wasn't a whole lot of code that actually had to write to get this to work but there were a lot of concepts to learn and several gotchas that I ran into let's take a look at those the first thing we want to do is remove the hello world component so let's go ahead and remove it from the template and uh-oh it looks like there's an error so if we register the component but don't use it we can't load our app that's kind of surprising but I guess it's nice so we're gonna remove it from there oh look there's another error because it's defined but never used okay so we have to do all of that and now we can view our home page without the component while we're thinking about it let's go ahead and delete the hello world component all right now it's gone we'll go ahead and remove this image as well and have an h1 that says videos okay so far so good so this acts just like a regular template but it's got some special properties and one of those properties is that it can pull data from the data key in your JavaScript now when I was reading some of the docs the data key looked like this but it turns out that is not something we can do anymore so this needs to be a function all right so this and then it'll return a hash okay so it's compiling and then to use this will create an h2 and then we'll type in my key all right there we go so anything we have on the hash that's returned from the data function can be used in these handlebars like this but we don't want to just say hey we want to show a list of videos so I'll go ahead and paste in a list of videos and you'll see that they have a name and a description we'll put more information on them later but this should be enough to get us started with our for loop so let's go ahead and get that for loop going so we'll stick everything in a class of video container and then we'll have another div that contains our for loop so we're going to use V - 4 and we have video in videos so that's gonna take the videos array here and loop over it and give us a video and I'm just going to output video dot name in an h3 just to show you that it works and all right so it's giving us an error because it needs the V bind key directive so we could do V bind key or the shortcut just key and then we'll go ahead and use the video name it's not ideal you want a unique ID and you know this is unique enough for now all right so it's stopped complaining and here we are here we have our eight video titles we've got our video titles I do want to start doing a little bit of styling so I'm not great at styling stuff but you know we're gonna work with what we have and later on we may use something like beautify but I'm gonna show you how the style tag works here so let's go ahead and put a class and we'll call it video box and then we'll look here and see if it's applied and it is excellent so it's being applied to everywhere in the for-loop so now let's go to the bottom of our home dot view file and we'll make a style tag all right so it's automatically scoped which is good which that means it won't accidentally apply to our about page so we'll start off with a video container and then inside that will put video box and this is going to give us an error it's because it's not expecting nested because we haven't told it that we're working with an S CSS first yet so there we go now it knows what we're doing and so we're going to go ahead and give it a border and it's not showing up well that is not good let's take a look here got the video box and nothing's happening well that's unfortunate check that we spelled everything correct and then let's go ahead and put it on a div inside the for-loop and we'll see that now it's supplying so even though the class technically apply adhere it for some reason didn't want to handle the styling so that's interesting but it is what it is so let's go ahead and put some other stuff on here I'll go ahead and paste it in and then it's looking a little bit better a little bit closer to what we're aiming for what we want next is to have the description show below this and to do that we're going to use a special view tag here in description you'll notice that we've got a template string and it has a paragraph tags within it so if we try to just do the description like this then it's not going to look great it has escaped all those tags so that you can see the P tag so what can we do to fix that well view has a special directive so do it is called V HTML and wouldn't feed it the video description and do that and now it displays nicely alright so a paragraph here and instead of showing the paragraph tag it actually creates a new paragraph alright so we are now really close to getting it looking like we want or at least good enough for now so let's go ahead and put in our thumbnail and then you get everything lined up to the left for the thumbnail I'm just going to put in a generic image for now and then we'll be able to put in our custom one per video after we get everything lined up correctly so as you can see this is a nice little picture of a cat and to get everything to line up first okay let's go down here to our style and we'll do text-align:left and that gets everything to the left and then we're gonna want to do some flexbox magic so that this stays on the left and then this stuff goes right here so we'll go ahead and put display flex justify context content flex start and then some stuff to control the image size and padding okay and then to make that work we're gonna want to have our image on the left and then this box on the right don't worry if you don't understand all of this this is just flexbox stuff styling stuff you can use whatever styling uh paradigm you like alright so this is looking pretty good so far our next step is to have custom URLs so I'll go ahead and just completely replace the videos hash with one that has the custom URLs in here and it's under the thumbnail property all right so let's go ahead and instead of this source being the same for everyone we'll do this and have it as video dot thumbnail all right so it's grabbing from here for each one and there we go this is looking pretty good this is a little bit too long I think so instead of a max height will do a width of me that may be 200 okay that's looking nice all right so this is what we'd planned on doing we have accomplished what we set out to do in this section along the way we encountered the style part of the view component including how to make it scoped and how to select a language we learned about the data function and the hash to that returns we learn that when you're removing a component you can't just remove it up here if it's the last usage you have to remove it in the components hash down here and in your imports then we learned about the V for loop and how it has to have a V bind of key and so here we're using name although that's not ideal but it is should be unique and we have our image that is the V bind of source and we learned how to do curly brace tags like this and finally we learned about the V HTML and so this takes stuff with tags and makes it so it displays it like it's supposed to be done all right we've done a lot of good stuff so far our next step is going to be making those links clickable so that when we go to them we can view a page just for that video we're not going to have the video washable yet that's in the step after this but it's going to be a huge step forward and to do that we're going to learn a lot about view X and the view router this is what we're going to be aiming for so it's just like before except when we click on this it'll take us to a page with this URL and then I'll have a place where the video is going to be then the title and in the description and of course if you click on a different one it'll take us to a different page with the information for that video as well so let's get started on this step-by-step first we're gonna go to our router and we're going to create a new route the path is going to be slash of video and then we're gonna want an ID we'll figure out how to do that later and then the name of it we'll call it video watch and then our component we're gonna make a video watch component and we're going to go ahead and import the video watch component and then go ahead and create it and so it's going to be a view and we're going to get it from the views because it's referenced from the router all right so this is going to need a template and it's also going to need a script for the template let's start off super basic just so we can see that it's working and the router let's go ahead and just make this slash video for now I got a little bit ahead of myself okay so slash video all right so we're getting to our new route everything's working as expected then we can do this and see what happens okay nothing's showing up there all right and that matches but we actually want to be able to pass an ID let's say we want to watch the first video so we want to watch the one about arrow functions what we put in well so we've got two problems first is that there's not really anything to recognize this by so if you look in our data in home we could do it by name so we could do this actually you know what let's do this we'll have this and we'll make it display that parameter so we're going to go here and we're going to have ID and we have to do params true in order to get it accepted all right so that's going to be the parameter and the parameter is going to be ID and then in here we're gonna we access the route and then params and then ID I think this will work it does not ah template requires exactly one element so we need to wrap all this within a div that by the way is going away in view three but for now okay so here we go this is displaying right there and we accessed it by going to the route and getting the params and then the one specific parameter we also had set params true so this is good this is progress we've passed something in from the URL but we don't have access to the entirety of this and it's going to be difficult to get access to it because it's stored on the home component and we're not accessing the home component from the video watch component but there is a way around that and that is view X view X is a state management library for view applications and basically it's a centralized store and then ways for accessing it and changing it if you've heard of flux or redux it is not quite the same but it has a lot of similarities we don't have to get into a whole lot of it now because all we need is for it to store the state right now we don't need to change any of it let's go to a store index and we'll see that there's a state hash and let's go ahead and put some videos on it and we'll grab those videos from here all right paste those and then we'll go ahead and access them from here so we'll do this dot state actually no this dot store and then call state on the store and then get the videos and let's go ahead and make sure that worked all right so we're still accessing the videos and so what we're doing here is dollar signs store gets us access to this basically and then we're getting state and then videos on here which is just an array it's also an array that we can access from video watch so we're gonna go ahead and have a computed property on video watch and so computed properties they basically recompute any time that the date of feeding them changes so we're gonna say video all right and the video function is it's a function but it will act like a property so you can reference it you know in your template like this all right so we're gonna return first we're gonna get the store and the state and the videos and then we're gonna select which video we want so as our argument to this function find takes a function and it returns one value all right and so we can go ahead and match the name and that'll match to this stopped route params dot ID okay so we have our arrow function1 and let's see if this works so we have our video and we'll see if the name alright so that's working we'll put in the description okay cool so we're able to access the entire video using just the name fed into this parameter but there is an issue here so let's say that we have that link but then someone changes the title say they make it not plural or they realize it was yes 2016 or something like that now all of our links out in the world are broken so it's much better to have a unique ID which no other item of that type will have and we will just have one through eight although a lot of times they'll create some sort of hash alright I just added an ID to everything and so then we're gonna go back to video watch and start matching it up via ID instead of by name so now instead of matching with this there we go it's matching by ID let's go ahead and make this screen a little bit prettier I mean we're not going to win any design Awards here but we can still do what we can [Music] and finally we'll put our thumbnail and that will be the video dot thumbnail we'll do a little bit of styling all right and not stylus I don't know why it auto corrects to that all right and for our image we'll just do a max width of say 60% here we go maybe make the max with 50% yes much nicer so this is where the video is going to go and then we'll deal with styling the stuff down here even better later so we are almost where we want to go the one thing we have left to do in this section is to make each of these clickable so it'll take us to the appropriate video watching page to do that we're going to use the router link component so we see these in app dot view that's what these are and go ahead and copy one of these and then use it in our home view alright so we'll go ahead and put it on the outside of the video box so if you click anywhere in the video box it'll take you there and we don't actually want to take you to about but alright it's a good demonstration that it's working and surrounding the place that we expect it to now let's go ahead and make this dynamic so instead of taking us to about it'll take us to video slash three or whatever the idea is now my first instinct was to do something like this but view very much does not like that and then I try to do something like this where you know you do this basically all the JavaScript stuff once again view does not like this any of the typical JavaScript solutions turns out there is a custom view thing where you do a V bind to which this is short for and you have quotes and then you have a hash which you put in the name or the path I like the name better so what do we name this was it just video Noah's video watch and then you put in the params and here is where you put in the video dot ID and then you close that out and now it should work yeah so I mean this took me some doing by the way the they have path in a lot of the documentation that's a lot trickier I just stick with name especially if you have params and there you have it we have our links that work that take us to the correct page all right so that was a lot that we learned we had our first look at the view X store just storing something in state and then accessing that from the home component right here and from the video watch component right here then we dealt with the router and our first set of Purim and we accessed it using this dot dollar sign route dot params in the name of the pram then we saw how to include that per am in a router link like this I'm really happy with our progress so far and it's only the first day we're gonna see if we can tackle just a little bit more trying to get the video actually playing on the route so this was a lot than I thought it would be it just involves installing an outside library and then configuring it and then boom we have video all right let's get started on that code so what we're gonna want to do is stick the video right here where the thumbnail is the thumb natal was always kind of a placeholder so let's go in and we're gonna want our video player right there but first we're going to need a little bit more data so in our store we're gonna go and put in a video url I'll actually go ahead and paste in a new set of videos that all have the video url now that we've got the data we need let's go ahead and search for a video player so I search for a view video library in Google and this is the first thing that came up and so it's fairly popular I mean playing videos somewhat niche so 8,500 weekly downloads is good and it's a wrapper for video j/s which is even more popular all right so it has structions so it says to npm install' we're using yarn so I did yarn add view video player - - save and we'll go ahead and do that all right and so this has changed our package.json an added view video player to our dependencies and now we just need to use it in the video watch component a readme for this library has some nice instructions so we could do it globally but we want to do it within a specific component so we're gonna import the styles and then import the component and then we're going to put on the components hash alright and then we're going to need to use the component there are a lot of options which we're going to be using later but for now we're just going to take the first three all right so we've got these and we're gonna close it out and then close it out here and so the class is just styling and options is where we're going to be doing most of the configuration and we're going to go ahead and return options for as a computed property player options and this is going to be a hash and let's see what options they give us I scrolled right past it okay so they say to do it in data I found that it works better and computed since we're going to be referencing the video which is a computed property all right so we'll copy all these and then customize them so muted not true language English yes playback rates let's go ahead and add 2.5 and 3.0 because I know some of you guys listen to it on that ah the poster is going to be this stop video and then the thumbnail and then the source will be this stop video dot video URL and let's see what that gets us and this is looking pretty good we'll play it and yeah I used to run a site called ember screencasts and alright this is great and we'll make sure that it plays all of them good it's got our thumbnail and then it's playing the correct video good stuff the one thing that I would change is that I'd like it to be in the center so let's go ahead and inspect this and we'll see and we'll go ahead and reload this so those errors go away all right so video players there and then the video itself the yo player is the entire thing and then this has a class video J s and this is what we want a sinner so we can go ahead and put a style on there of margin Auto and that's gonna Center it but we can't you know do it in the dev tools every time so let's go to the class video J s and use margin auto alright ha interesting it's not working let's reload and see what's happening and it is still not working and so the reason behind this is video player is a different component and so the scoped means that we're not reaching into that other component if we take out the scoped now it works so what I want to do first we're not using that image anymore so let's go ahead and have it unscoped but we're gonna wrap it inside video player box so it's not gonna do every single video player just the ones with this class which should be just the one in this component alright so we're removing one item of safety but adding another and if we had more styles here that might be an issue we would have to you know wrap it in something like this huh and then wrap everything in that but since we have only this one style uh-huh we don't have to do that yet that's just something to keep in mind and now we have a page which plays video all right I think it's time to call it a day as you can see it is dark out here it was dark when I started it is dark now that it's done and this is summer up in the north so I yeah anyways I learned a lot today I hope by following along you were able to learn a lot as well and we definitely got a really good start for day one now in the next couple of days I won't be able to spend quite as much time on it I'm gonna be doing some client work but I will be starting to connect it with a back-end and then I will be looking into something such as beautify they can help make it a little bit more beautiful so beautiful design and it'll make it look more like a standard app alright so if you have any questions let me know in the comments down below and let me know if I'm doing view if I did anything incorrectly in view we are all learning here all right I'm excited to see you next time

Channel: Vue Screencasts

Views: 26,473

Rating: 4.9904761 out of 5

Keywords: Javascript, vuejs, Vue.js, javascriptframework, programming, webdev, frontend javascript, web development, vue web framework

Id: vaCrzaeC-RE

Length: 53min 0sec (3180 seconds)

Published: Sun Sep 08 2019

Reddit Comments

[u/[deleted]]

What are tou trying to build?

[u/pinkp7996]

you install extension for json data in chorme to make it easier for people to see the data
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=vi