Front-End Showdown 2018 - Build an image search app with: Vanilla JS, React.js, Angular 6 and Vue.js

[Music] hello friends welcome to coding garden with CJ welcome to the front-end showdown the final battle so in this episode I am going to create the same app with vanilla JavaScript react.js angular 6 and view jeaious the main idea is to really see the different concepts implemented in all of these different frameworks if you're watching live please say hello in the chat hello Riley welcome to the stream hello Chad welcome to the stream it's gonna be a fun time thanks for joining all of the apps are going to contact the 500 pix 500 pixels API it's an image search API that you can sign up for this is it 500px comm they have lots of cool images like you can search for really anything and get awesome results I was trying earlier like huge is nothing but if you search for like react jeaious interesting like stock images so yeah this is what we're gonna use I'm not gonna get into how I created the API key and things like that I can well link to the the signup and Doc's in the description I already have my API key ready to go mainly this is gonna be about actually building app i am also gonna be using the skeleton CSS framework if you've never heard of that let's get skeleton comm yes this is it so a dead simple response to boilerplate so this is a CSS framework but it is very very lightweight if you've ever used something like bootstrap it's way way lighter than that you get styles by default so you don't have to add classes to things but if you want some classes or some some different styles you can add styles to get those like yeah and basically I'm gonna use this so our app looks decent by default hey emmi welcome to the stream hey Brooks Brooks is asking what is the build order it is this order from left right I'm saving few js4 last and I'm gonna do my best to not be opinionated while I build these things if you have watch my luxury before you know that I love VJ s but yes this is the order first in vanilla then in react then an angular then in view and this is kind of in the order of when they were introduced into the front-end framework web development scene vanilla Jas has been there all along but yeah so I'm gonna use skeleton super simple styles you just add it and it looks decent so yeah other thing I'll have a super basic body style 80% width with margin on the side well yeah automatic margin on the side and two ends of margin on top so just like a base basic app but the main thing is when I build this app or fall three different frameworks these are kind of the core concepts that we're going to be demonstrating and they're typically the things you do and need to do when you're building an app with a front-end framework so the first thing is user input we're gonna have a search form the next thing is Dom events we're gonna have like a submit handle on the forum maybe eventually if we get to it we'll have like a click Handler on the images we are just getting started but this is my break timer so if you're watching from home and you've been sitting down a while stand up for a second take a quick stretch mm-hmm this is gonna be a fun time I'm excited and chad is asking which version of angular we'll be using we're gonna use version 6 which was released not too long ago and I believe I believe it's totally backwards compatible with angular 5 oh yeah that's what that's what we will be using and if I have enough time honestly I might even do it with angular 1x 2 maybe at the end ok yes so we'll be using demonstrating Dom events we'll be demonstrating API requests for everything except for angular I'm just gonna use fetch which is built into the browser angular has its own built in way of making API requests so we'll use that will show conditional rendering so like if something is happening show this otherwise show this other thing and we'll also be demonstrating rendering lists of data which is very common a very common thing for you to do when you're building a front-end up here's the basic task list so this is the these are the things I'm gonna do for every single app I will add the search form to the page make an API request with the search term which with the search term when the form is submitted show a loading image while we're getting the results then I pin the results to the page and then hide the look loading image pretty simple but it involves some things so that's what we're gonna do we're gonna do the same thing for every app but I do have a list of like stretch features so if we get all of this done fairly quickly I would love to start implementing things and the stretch features are paginate results so by default we're just gonna request the first page of search results but the API allows you to specify a page so you can do like next or previous button so maybe we'll add that then we could get into some more complex state management and maybe routing so you could click on an image to add it to your favorites and then there would be like a favourites page that you could go to and you can navigate between the search and the favorites page question in the chat from Eric how frequent are your breaks so I use a tool called time out by day job this and you can you can configure it for however you want but I I have a ten-second micro break setup every 15 minutes and then a 5-minute longer break every 60 minutes but you can add as many micro breaks or longer breaks that you want to in this tool and if you're on Windows there's a tool called I leo it works in a very similar way it basically does like a full-screen overlay so you are reminded to take a break ok who's excited let's let's let's do this okay first first up is going to be vanilla JavaScript so let's get started in this folder I will create a new directory let's call it vanilla and inside of there we'll create a file called index Scot HTML and it's important to note I'm not going to be using any JavaScript libraries so everything I do is built into the browser and will work without any libraries only library I'm using is the CSS framework to get some basic Styles so let's do in html5 html5 made yet cool and the title will be vanilla Image Search vanilla J's emoji whoa wrong thing that's the wrong thing how do you do an emoji there we go I want the ice cream cone vanilla cool so this is bringing in some styles let's create a style file called main CSS and that's just where we're gonna add our basic body style and then we need to bring in the skeleton CSS framework so that's just as simple as adding the link in the head there and then let's create a JavaScript file so at the bottom of the body I'm gonna add a script source we'll call this main Jas and then in this folder will create main yes cool that's just log that it's working hello world and we'll add like a basic h1 with this title well now I'm still getting used to vs code I've been using Adam forever okay let's make sure that our main styles are loaded after the CSS framework okay so now I'm gonna go into I believe this is image search and then in the vanilla folder cool Steve says he loves code I love code - cool so we're in that folder that I just created and I'm gonna use a tool called light server it's an auto refreshening dev server so anytime you change a file it'll automatically refresh the browser you can install that from NPM if you do NPM install - JEE light server you could probably also use the npx command I've had it installed forever so I'm just gonna use the light server command so that starts up a server running on port 3000 our page looks decent if we look at the dev tools we get a hello world and favicon not found but that's okay so hello world basic app we're up and going so the first task is to add a search form to the page so let's do that so right below the h1 let's add a form no action because we're gonna handle it with JavaScript and inside of here we need a label this will be for the search term below that we need an input type is text ID will be search term and the name will be searched cool and below that I'll add a simple little button that says search what do we got cool basic page if we look at skeleton CSS there's a way to make a full width forum or a full width input this you full width so on the input we'll give it the class full width and there we go nice nice little search form okay search form complete back to the readme we have added that to the page now make an API request with the search tour with the search term when the form is submitted so first let's tap into the form submitted event so on this button will give it a type of submit and then in JavaScript we're gonna add the event listener for the submit event so in here first I'm gonna get the form let's throw that in a variable I'm gonna use query selector and say grab the first element on the page that has the form tag cool and then we want to tap into that submit event so we can do for add event listener we're listening for the submit event and I'll just define a function called form submitted so below that we'll have a function I'll call it form submitted this will take in the event and for now let's just log that event cool so if I say hello world and then submit the form you'll notice it clears out and the page refreshes that is because by default in the browser a form tries to send the data somewhere we don't want that to happen because we want to handle it with JavaScript so we need to prevent the default action so on the form do event dot prevent default cool and now we should see the event logged so submit the form cool we're seeing the event let's grab the search term from the page so let's say search term is and I'm just gonna store the input in a variable so let's say input is document query selector grab the thing on the page the first tag on the page that is input cool and then we can get what's inside of that input just using input value and then let's just log out what the search term is that the user entered okay so if we search for puppies puppies logs to the cantos console so we're grabbing whatever the user enters and logging it to the console now we need to make an API request so I want to have a function that says like search you pass in the search term so let's define a function called search takes in the search term and then we're gonna use fetch so it's built in to all modern browsers and it's essentially the replacement for XML HTTP requests but it's pretty simple and easy to use you say fetch you specify what URL you want to make the request against I have that stored in here and this has my API key inside of it I might be able to get away with calling it without showing you my key but I'm still gonna revoke the key after after the stream and upload all this code break timer it's a short one and take a quick stretch take a sip of any beverage you might have nearby I'm drinking your Bamonte a classic gold oh my green screen is doing weird things with it cool okay so we have that URL let's store that in a variable equals that cool oh are you got that so now that we have the URL when we fetch we're gonna make a request to that URL and then on the query string we need to add and term equals and then we'll throw the search term on the end there I'm actually even before we make this request let's just lot well I was gonna say logged the URL out but I don't want you to see my API key actually it doesn't matter I'm gonna revoke it anyways okay so before we do this let's just say URL is equal to that and then we'll log out the URL and we should see the full URL with our search term on the end of it so if I search for puppies okay it's hiding might be cool so full URL and then on the end it has term equals puppies yeah that's working let's actually make the request so we throw in the URL and the way fetch works is it's promise based so you say got then you get access to the response object and there are various methods to deal with the response I know that this API returns JSON so I can do a response dot JSON that also returns a promise and when that is done we should get some result and let's just log that result out to make sure we're getting some data back from the API kittens go cool so we're getting back some results we've got a photos array each one has some data inside of it inside of there we have an image URL let's see what we get oh cool so API request is working let's check that off so user types in a search search term dogs they submit the form we make the API request we then log the data to the console all right making progress next thing is show a loading image while this is happening I found this gif earlier works better than anything else so he is this so basically while we're fetching the results we're gonna show this image and then when the results come back we are going to hide this image so let's do this on the page let's just throw the image there source is going to be that and let's just add a basic 100% with emits image style cool so by default yeah the loading image is there but when when the page loads we don't want to show that just yet so let's hide it when the page loads with JavaScript and then we'll show it when we make the API request so let's give this an ID of loading image and then in my JavaScript I'll store that in a variable document query selector we'll pass in the thing with the ID loading image cool and the moment the page loads will just say loading image style dot display is none so when the page loads it's gone cool but when we start fetching results we want to remove that so the moment we start the fetch we will set display to nothing which should show it on the page so now if I say puppies search it shows the image now we'll get back the results we'll add them to the page and then hide the image Amy says she likes that I am searching for cute images me too okay so we're hiding the loading image what we're showing it when the API request happens now let's append the results to the page so for that we need to figure out what we need so result is this entire object photos is the array so I want to iterate over that for sure but let's let's do this inside of a function so here's what I'm gonna do this promise is going to return result dot photos so this will return just the array and then we'll return this fetch from the search function so by returning it now search returns a promise so I can do something like search then display images and then I can define a function called display images that will actually add them to the page so let's do that display images that gets in the images for now let's just log them out make sure that this chain of promises is actually working so form is submitted search function is called the search function returns a promise that will eventually have that array of photos when that is done it will invoke display images which gets access access to that array and then we log it out to the console so should still work hamster's cool so it's working but now notice we're not logging the whole object we're just getting that one array of photos that reminds me I'm thinking about getting a betta fish and then like walleye stream I'll have him or her in the corner just kind of like floating around I don't know I'm probably gonna do that okay so we want to iterate over these images so we can do images dot for each image and let's just log the image out we need to figure out what what's the path to get to that URL so if we search for betta fish so if we look at one of these it has an image URL property which is an array and we want the first one so I should be able to do image dot image URL at zero that should give me the images cool so now we're getting direct links to those images ooh that's a pretty one I was watching a YouTube video earlier of how to train a betta fish they're like really smart it would be yeah it'd be awesome I was thinking I could do I get you something where I teach the betta fish tricks and then in like the live chat you can do something and I'd have some sort of like internet of things to make the fish do a trick or something I don't know I might do that that'd be fun okay so we're grabbing the image URLs now we actually want to add some images to the page so in my HTML I'm gonna make a little x marks the spot let's say it's a section and it will have a class of images and in my JavaScript let's grab that element up at the top image section will the document query selector grab the thing on the page that has the class images and this is what we're gonna be appending to yep so let's do this we will first create an image element so const image element that's going to be a document create element and we want to create an image tag and then we want to set the source of that image to be this URL so image element dot source will be this wait yeah just making sure i didn't name my my variable something conflicting hey guys and welcome to this dream okay so we're gonna set the source on the image to be that URL and then we're gonna append this image to the images section which is sectioned appendchild image element okay let's see what happens puppies I worked cool they're so happy that's not a puppy dan dan is asking did you miss one no this is the first one this is vanilla JavaScript and when I'm finished I will review the code that I just wrote and kind of talk about what I did comfy in the chat is asking what border order am i building it in it should be the same order as the video description vanilla first which is what I'm working on now then react then angular six then view and if I have enough time and if anybody wants to see it I might actually do angular one - cool mas welcome to a string hello cool so images are on the page that's fantastic let's hide this image first let's check off and I read me so we appended the results to the page now we want to hide the loading image after we got back the results so here after we append everything we'll set loading image back to display:none okay search for kittens go hey it worked look at that that looks like a like a wild cat or something I don't know cool let's just add some basic styles I was doing some nerds I was doing some that was reading the chat just now I'm not calling you a nerd you're great I was doing some research last night watch this watch out watch how easy it will be to make this like a three column layout I literally did not know this existed until last night and it has been around for a very long time so images is our image container and I'm gonna do column count 3 so now by default the container will be 3 columns the interesting thing is I believe it goes like in this order like instead of a cross but still we get like a masonry like layout if you if you've ever heard of that dogs look at that and it's fully responsive huh that's awesome cool I think we did it we did vanilla JavaScript Tyson just said in the stream if everyone watching right now shares this live stream with 10 friends and we have a 50% success rate this channel will have a thousand subs thank you so much guys Kaizen has been here since the beginning he's awesome but I am I'm getting up there I'm it's it's exciting the other day I was watching coding train and I answered his stream and he actually knew who I was I was I was freaked out but he he mentioned my name and then I got tons of subscribers after that but I'm almost to a thousand I did I did say when I get to a thousand subscribers I'm gonna do like an 8 hour stream like build some full stack app with as many features as possible code all day long of course I'll take breaks for lunch and stuff like that but yeah when I get to a thousand it's gonna be fun Amy's asking what is this skeleton thing so I'm using a basic CSS framework to get like the basic styling for the form it's called a skeleton CSS a dead simple responsive boilerplate if you're familiar with like bootstrap or materialised it's like that but smaller and a lot simpler like it adds default Styles instead of having to add classes to everything and then they do have some classes available and they have a built in twelve column grid system awesome okay um yeah I think we did we did for the JavaScript yay let me let me get my sound board let's let's let's cheer crowd cheer [Applause] okay Oh an Emmy is asking the image styling the thing I googled was CSS masonry layout so if you've never heard of masonry it's a library for a layout where so that you'll notice like typically if you're trying to do like columns across like there would be lots of white space in here but the way this column count works is it puts them from the top down and then I believe it goes back up like this so by doing that you get like a really cool almost like Pinterest style layout just automatically in the browser I think you can you can do similar things with flexbox there's some caveats and similar things with CSS grid and yeah and if you google masonry layout there are actually libraries that will do it yeah and this was the problem I was talking about like if you do it across and you end up with a lot of white space there's jQuery masonry yeah and a few different libraries but this this the way I'm doing it is just column count 3 and that's just a CSS property that has existed for a very long time if we look at it on Indian but I was reading an article from like 2014 that talked about using this thing so it's pretty straight it's pretty sweet Brooks is saying when I do my giant stream I can maybe stream devs live or show videos of interviews to take breaks totally that would be super fun I want to make in that event like I almost want to like live stream myself cooking breakfast or something like that I don't know if who would want to watch that but I think it'd be fun and then comfy in the chat asks how come you chose a stream on YouTube and not twitch and was it to keep all of your content in one place this is my break timer so if you're watching from home take a quick stretch or stand up out of your chair yes mainly I'm streaming on YouTube to keep my content in one place and then also I've found I get a lot more like organic subscribers like people will get suggested to my channel just by watching other coding channels like fun fun function or traversing media because my content is similar and on Twitch there you don't really get recommended channels like that so I have tons of people that I've just found me because YouTube's recommended them to me I've considered streaming on Twitch and then uploading to YouTube but the other thing is like when I go live if people have similar interests to like tags of my videos and stuff like that YouTube will actually show them hey this person is live so I've found it it gets a lot more traction but by using YouTube instead yeah it is something to consider actually I streamed a few times on Twitch before and I had maybe two viewers I didn't do much advertising but it was hard was harder for people to find me okay I've been talking a lot but we did it with vanilla JavaScript let's just review the app real quick what does it do and then we'll get on to using react so you load the page basic search form you can search for something you submit the form we see the loading image and then the images come back oh one one thing I think we should fix though if I search for something new the Emmitt the existing images are still there yeah they're not updating so one thing I need to do is when we do another search clear out the existing images so that they the puppy's got appended to the bottom yeah so let's just do this whenever we display images we'll set the image section dot inner HTML to be nothing and that will clear out there the previous results so the new results will show up and actually we should clear them out when we start doing a search here because when we see the loading image we want all those other images to go away okay let's try it now so if I search for kittens cool and beta fish-- whoo yeah Bader Fisher awesome I'm gonna get a betta fish I definitely am cool so we have a working vanilla app let's let's review what I did in the and let's check off this last one hide loading image so our HTML we're bringing in the skeleton CSS library that's there we're bringing in our CSS with just a few basic rules so the body has a little bit of space on the side a little bit of margin on top the images container has a column count of 3 and then any image on the page takes up a hundred percent with so these two styles are actually playing together because because this says a three column layout an image will take up a hundred percent of that column and then it flows from in this in this direction I think that makes sense and so that's how they actually show up on the page and then in the HTML we have a basic form we have an input and then we have a button that has a submit handler so in the JavaScript we tap into the submit event of the form and then make the request below that we have our loading image that's this thingy what else should i search for durables but the purpose of doing that was to show you that loading image so when you search you see that loading image for a split second and then things start to pop up there must be a mountain range named hamsters that's interesting okay but that we conditionally hide and show and then the section here has all of the images inside of it and then we just have one javascript file up at the top we're storing the API URL this is where we're actually making the request to we're storing all of our variables so we have the form the input the user is typing into the image itself and then the section so I'm storing all of these up here so if I need to use them multiple times I can just use that variable then when the page loads we hide the loading image and then we listen for the submit event excuse me of the form and when the form is submitted this form submitted function is called we prevent the default action to prevent the page from refreshing then we grab the search term from that input and then we call our search function which actually which actually calls the API so we pass it in the search term that constructs the URL which is the full API URL with the search term on the end of it we show the loading image and we clear out any of the existing results if there were any there then we call the API using the built-in fetch parse the response as JSON and then return the array of photos that was in that response this function returns a promise so we dot then that promise up here and when this is finished we call display images display images just iterates over the images creates an image element for each one sets its source and then append it to the page and then we hide the the loading image and actually it might make sense to do something like this so we could do display images VIN and have a simple little function that just does that mainly because your functions should really only do one thing so search searches the API and actually we could do the same thing with these put that in a small little function say like show let's say let's call this function search start so when we start searching we want to show the loading image and hide the existing results and then we'll just call that function right before we call search cool any is asking what will be the name of my fish I was thinking QWERTY my brother has a dog named QWERTY but if you ever watch the show mr. robot he has a fish named QWERTY I might it's not that original but I really like that name Harvey said this became my favorite channel out of nowhere awesome I appreciate that RV I'm doing my best I'm putting my content out of there out there all I can hope for is is that people watch me and like me I don't know well yeah that's our app we submit the form we make the search display the images this is vanilla JavaScript now I'm not using any sort of state management pattern and when we're working with front-end frameworks you typically have some sort of state management like you don't just store your state in the Dom because we're essentially like storing this array of images in the Dom itself whereas what I'm using react that's just gonna stay inside of an array same thing with angular and view and it's one of the major differences between vanilla JavaScript and these other front-end frameworks is really the separation of concerns whereas JavaScript vanilla JavaScript everything is kind of just mixed in here unless you decide to format your code and more of that style and then the other frameworks kind of forced you to separate separate out your data from your presentation but okay we did it how long have I been streaming 38 minutes cool so we're done with vanilla JavaScript let's get into react jeaious yes react here so for this I'm gonna use the create react app command so let's do that I'll kill the server that's running in vanilla go up to my image search directory and then create react app we'll create a new directory for me so I will do that I'm going to do npx create react app and put it in a folder called react react cannot create a project called react so let's do react image search it's happening okay cool and the the the thing about create react app is it's from Facebook and Facebook also published yarn which is kind of the same thing as NPM there are some differences but they work in a similar way and so if the create react app detects that you have yarn on your system it actually automatically does a yarn install instead of an NPM install and then we can do yarn start so let's close out all these other things and in my react folder we can see what got generated there are a few different scripts we can use we can start up the app we can build it for being deployed we can run tests and then eject will take all of the hidden configuration like web pack and things like that and actually put it in the folder so you can customize it the source directory actually contains your react code index J s is the web pack entry point we bring in the react library their default web pack config has a CSS importer so we can import that in we're bringing in our app component and then it has some built in code for like caching the files with a register with a serviceworker and then this is the code right here that kind of adds are apt to the page so what you're looking at here if you've never seen react before is JSX it's essentially HTML inside of our javascript so what we're saying is render this app component which we defined in this file on the element that has the ID root and if we look in our public folder index dot HTML has that one div right there so essentially our entire react app will live on that one div cool while we're in here let's go ahead and add the CSS framework so let's grab this link to skeleton in our index dot HTML inside of the head we'll throw the CSS file there and I should be good actually before I do that let's let's show what we get by default with create react app so in this directory if I do a yarn start oh I have to go into reacting Church and then do a yarn start that'll start it up that's this this was the my previous app it's running on the same part but the other ones closed but by default you get the super basic react app it has this cool little animated image welcome to react and edit source app dot J s to get started so for all three of the freight the front-end frameworks I used tonight I'm gonna do everything inside of one component just to keep it simple if I have time at the end I might talk about how to break that out into separate components but I really just want to demonstrate the the concepts of like user input and list rendering in in just one component for now so if we look in the source directory says all of our code I showed you the entry point indexed is this brings in index dot CSS let's just get rid of default Styles for now actually we can we can bring in the styles that we want we want these in our index set CSS cool and then we want to bring in a skeleton in index.html and then if we look at a pas this is our react component so we're bringing in react in component from the react library their default webpack config allows you to import images as well so they're just importing a SVG image we get rid of that and then they're importing a CSS file which might be CSS that's specific to just app the app component let's see what's in there right now yeah a lot of stuff I really don't want any of this so I get rid of that and then I'm also going to get rid of the import we just have some basic styles at the at the top top level dan is asking side chatter any of anyone ever just sieges GSX files containing the react code yeah and I believe you can actually name this dot JSX and it will still work yeah so I named that JSX the app failed to compile oh and then in the import I might have to actually specify JSX logo is not to photo and then the render is trying to use that logo that I got rid of let's get rid of that let's get rid of all of this and just have an h1 inside of our component for now react image search so I think this should worked in basically the web pack loader has a rule that says if you see a dot JSX file treat it like a JavaScript file and the web pack loader automatically I believe looks for JSX inside of other JavaScript files if there might be something yeah so this is still compiling and is working totally so it's just a convention and it's probably just a convention to let other developers know that hey this file has JSX inside of it I'll leave it that way cuz why not okay but what we're seeing here is our basic app component this is what's getting rendered into that div with the ID root it has just a basic h1 and you'll notice here we're saying class name and the interesting thing about JSX is it's inside of JavaScript so you can't use reserved words from JavaScript so the class keyword means something in JavaScript it means you're creating like an object-oriented class so in your JSX if you want to specify a class name you have to use the word class name I don't want that at all let's get rid of that okay first order of business let's add the search form to the page I am gonna cheat and just grab the form that we created with vanilla it's gonna look exactly the same but we'll have to hook it up so right below the h1 I'm gonna throw this form and the other reserved word is for because in JavaScript you typically are writing a for loop so if your want to use for like on it label you have to use HTML 4 this is my brick timer let's take a quick stretch welcome Chris to the stream late to the party but we're just getting started with react just finished vanilla starting react now angular after that okay so we can't use 4 because that's a reserved word so we have to say HTML 4 cool so that gives us a label we have our input the other interesting thing about react is all elements must close themselves so regular HTML doesn't doesn't care because an input is a self closing tag but in react you have to actually close that tag like that for it to work and actually let me show you what error we get if I don't do that filled to compile expected corresponding JSX closing tag for input so so the JSX parser knows that this is a self closing element you have to actually close it cool so we've got our basic form inside of react let's check a box add the search form to the page all right update state when input changes so before I do that I'm just gonna put the actual title of the page in the constructor in inside of state chris is asking why do I prefer view I will definitely talk about that when I get to view I don't want to spoil the party and really I at that point I'll have two apps to compare like this is how I did it with view this is how I did with react this is why I prefer to do it with that that way but stay tuned for come back later all right so we want a constructor in react your constructor must invoke super because this class inherits all of the properties of the component class so this is like an object-oriented concept basically by calling super we're calling the constructor of the component class so all of the default behavior happens then I'm gonna define my state and your state is just a an object a JavaScript object with the different things that you want to represent in the view so in this case I want a title on my state and I want that to be a string that has that value inside of it and now that I have this state I want to use the state inside of my render function so the way that works is use curly braces and you say this state dot whatever property you want in this case I want title so works exactly the same way but if we well well okay if we update the title you'll actually see that we are grabbing that from state right so this is one of the like the core concepts in front-end frameworks is you you take all of the the data of your app and you put it in one place your state and then your view is just a representation of that state so this basically says whatever title may be please put it inside of this h1 so we're doing that however what we want to do is update the state when the input changes so if we think about the state of this application even what the user is typing in here that is considered state because the the page itself is changing and so we should keep track of that so on my state I also want a search term and win the page first loads search term total empty and now we want to use this state inside of our render function so for that I am just gonna say value equals this dot state dot search term cool and just because I've used two different properties from state I'm gonna use destructuring so that's just a way of grabbing properties off of an object in a cleaner fashion so I want title and search term and I want to grab those from this state and now I could just say title here and search term here okay so what this is saying is when the the page renders like when this gets put into the Dom the value of the input will be the value of search term great so when the page loads it's totally empty but as the user types we want to update that to be the latest value of what the user typed so for that we need to listen for the change event of the input so I'm gonna say on change is going to be a function and will spell that wrong on on change and we'll say this dot search term changes cool get some really weird syntax highlighting what am I doing wrong I don't know okay so basically we're saying when the input changes call this function so now we need to define this and we're just gonna put this as a method on our class search-term changed that takes in the event and for now let's just log hmm I think vs code has totally crapped out let me quit vs code cuz my my autocomplete is not working right now okay I found that I have to do this every now and then like if I've been running vs code for a while it starts to act really weird okay please autocomplete log thank you okay that was weird and we're just gonna log the event so whenever the search term changes log the event to the console let's open our dev tools let's throw this down there invalid Dom property class did you mean class name why yes I did so on the input I believe I'm using a class from skeleton so we need to update that so class should be class name cool all right so when the input changes we should see that event logged so type we see the event log but notice nothing is actually showing up in the UI in value because it's bound to state right and we have not updated state yet so this event has a target the target is the element itself and believe there's a value property I don't know if we can see it in the dev tools but if I log event target value this will be the value of the input because that's the target of this event so you're typing a letter you'll notice that it's one letter at a time and it's not actually updating anything so now I want to update state we will run into an issue though so the way you update state in react is this dot set state you pass in an object and then you tell it which property on state you want to update and give it a value so I want to update search term and I want to set that to event target value cool but this won't work let's see what the air is and then we'll talk about why this won't work so what's the air cannot read property set state of undefined so essentially it's saying I'm trying to call set state but the thing on the left hand side is undefined inside of this function this is undefined so if I were to log this undefined so by default when you bind an event to a method it has no value so I want this method to have the this value of the instance of the component there's a few different ways to do it I could actually bind this in line I could say bind this this value to the value of the component of the instance this will work so that's working the other way to do it is to use a fat arrow function because a fat arrow function has a lexical this meaning it doesn't change the value of this so if I do a fat arrow or an arrow function and then I invoke this with event now because I'm invoking this event with a fat arrow lexical this means use it means use the this around where this thing is and the this around there is the component instance itself so now when that function gets invoked this will be the component and you notice state is actually updating and showing the latest value on the page whoa whoa Kaizen is saying pretty reactive is that a pun or a dig on it because it isn't as awesome as view it is it is reacting to change though right so we're and the way this is working under the hood is so we're saying on change call this search term change function so this gets called and then when we call set state that's gonna update the underlying state and then it's going to call our render function again and get back a new virtual Dom tree I haven't talked about that or what it is but basically it's a in-memory representation of what should be on the page so we update state it calls render and then it says okay let's look at what was on the page last time versus what we just got back from the render function and then update those things on the page so that's what's happening we call this event we set the state it updates state and then this rear Enders search term now has the latest value from state and then that gets added to the page cool so we are updating state when input changes change changes cool now let's make an API request with the search term when the form is submitted cool for this because we're using babel and webpack and we can do imports I'm actually gonna define my API requests in a separate file really just for modularity so in source let's create a new file let's call this API J s let's just export an object well yeah well export an object export default object and this object will have a search function that takes in a search term and then makes a request to the API I'm gonna cheat again and just grab what we did with vanilla JavaScript because it'll be very similar so we basically want to do this and then we also need the API URL inside of react cool Kaizen and the chat is saying he was gonna say something more harsh but react is like that friend you mocked but still need yeah I mean it has its purpose that's why people use it you and I chill much easier cool all right so we have this basic search function we have our API URL we construct the URL using the search term that was sent in and then we're just returning that array of photos what is this complaining about parsing your import and export may only appear with source type module did I put this in the wrong folder I didn't oh well let's try it so I defined API that is in this file let's attempt to import it into this file so in here I'm gonna say import API from relative directory just the API file okay so now we're bringing that into our component and now we need to listen to the submit event of the forum to actually call the API so our button has type of submit so now on the form we want to listen for on submit we're gonna do a very similar thing as we did with on change so we're just gonna use an arrow function so we don't have to find this so that accepts the event you'll say this dot form submitted pass in the event and then we need to define that form submitted method and we will do that here this accepts in the event we want to prevent the default action just like we did with vanilla jeaious so event prevent default and then we want to make the API request so I want to do API dot search I'll pass in this state dot search term because search term has being being has been updated under the hood every time the input changes so when this form submitted gets called we're gonna have the latest value of search term we'll call the API do that and then we will get back the images and for now let's just log those to the console make sure we're actually getting them so if we search for puppies there they are so we're actually calling the API when it's submitted that's great let's look at our task list so we're making the API request now we want to show the loading image while the API request is happening so again we want to represent this on state so on our state we're gonna say loading will initialize that to false because when the page loads were not contacting the API we're doing nothing so that that's initially false then whenever the form is submitted I want to set loading to true so this that set state loading is true and now let's use loading inside of our render function to show that loading image let's grab that from our vanilla that we did this so let's do it right below the form gotta grab that again okay copy wait no not that copy then right below the form will add the loading image we can get rid of the ID we don't need that in react but now we want to conditionally render this and I'm getting again that unterminated JSX contents image in regular HTML is a self closing tag but in JSX you have to add the closing closing tag so yeah now by default it's showing on the page when it loads let's update our CSS real quick we want our images to have a width of 100% cool and now let's show it so I also want to grab loading from my state and to decide whether to show this or not we just use a ternary statement so we'll say if loading then show me that loading image otherwise show me nothing so now when the page loads it's not their image elements must have an Ulta prop either with meaningful text or an empty string for decorative images ok let's just give this an alt problem of loading ok so now when I make the request to the API for kittens we see loading and then now we'll have to set it to false so that it disappears so let's look at our readme we're showing a loading image when we're making the request now let's pin the results to the page so if we think about it we need something on state to represent those results so now state is going to have an images property that initially is just an empty array so when the page loads there are no images and then when we get back the images we want to set those on our state so we'll just do this set state and we want images to be the value that we just got back from the API so now under the hood we're actually setting the value I think I have reactive tools yeah I do so we could actually see them without showing them on the page yeah so now if we look in the react dev tools see we can see our state the current value of values of our state and we can also see that the images array is now actually on our state so that's a good thing cool and now we actually want to show those images on the page and actually let's go ahead and set loading to false and if you want to set multiple things at the same time you just throw them inside of this object so when we get back the images set loading to false and update the images on state now if we want to show those images let's add a section give it a class of images and for that we just use a good old map so I also want to grab images from state and now inside of here I want to map over those images to show an image for each one so I'm gonna say images map it's gonna give me back an image and then I want to return a an image with the source set to the URL of the image and if I remember correctly image image URL at 0 cool so the way this works is images is an array when the page first loads can i let's go to so those are behaving weirdly I'm getting there oh yeah so this needs to be class name alright it's my break timer let's take a quick stretch and this is telling me I also need to give this image a value so let's look inside of that object and see if there's like a title of the image oh it's working put let's let's go into the to the react tools and on any given image it has a description does it have a title yeah well you will use description as the alt text and the way alt text work is for if for whatever reason the image doesn't load it'll show the text instead and then also for like screen readers for like somebody who's blind trying to use the website it will read the alt text to them so they know that there's an image on the screen so the alt text I want to set to be image description cool I was getting another error in the console you'll also notice so and to take a step back what's actually happening here is when the page loads images is an empty array so it'll still attempt to do the map but there's actually no data inside of it so nothing displays but when we actually get results it sets that array and now it maps over them and shows them on the page the error I'm getting right now is each child in an array or iterator should have a unique key prop this has to do with the fact that react is using the virtual DOM and it needs to it needs to differentiate between all the different things in that array so let's give it a key let's see what other properties we have on this image does it have ID yeah let's use use ID because I know or should it should be ID should be unique for every image and so that should work as our key in the iteration so each image needs a key that is imaged ID cool so we're gonna search for students it's working cool and let's go ahead and add that column count style just so we get some some column columns so the images section needs a column count of three and then we get that it's pretty cool awesome so that is react let's let's review what we just wrote there and I believe it has fully working functionality like if I actually no we need to clear out the array whenever we first start to get the results so like if I search for mountains you'll notice the previous results stay there so when we're setting state for loading let's also set images to be an empty array so the moment the form is submitted by setting this to an empty array it's gonna clear out their previous results so that they're not still on the page so if we search for mountains and then if we search for beta fish-- yep they're not there cool we did it with react alright let's review what we did and check some boxes so we are appending the results to the page and then we are hiding the loading image after everything has loaded cool so let's review what we did there first we have our app component it has state and when you're building a react app anything that changes anything that the user is interacting with that should be represented on state and so our state has a title search term that is what the user is typing in loading that's whether or not to show the loading image and then the images array which is the data we're getting back from the API the render function is what's actually being displayed on the page we're grabbing all of those values out of state using destructuring so that we can use those values in our render function we show the title up top we then have a form it has an input this is where the user is typing in and as they're typing we want to keep track of everything that they type so we're listening to on change and then we have our method search term changed that update state every time they enter a new key into the input box so if we look at search term changed essentially every new key that gets put into that input box we update state under the hood and then the app will rerender it's smart enough to only update the things that changed and that's that's this idea of the virtual Dom but that's what's happening there and then we're setting the value to be whatever search term is on State so search term changes update search term rerender value now has the latest value then when the form is submitted we call our form submitted event we first prevent the default action we then set state to have loading true so that will show the loading image and we clear out the images array just in case there were any previous results if you look in the UI there is this ternary statement here that decides whether or not to show that loading image so basically it says if loading is true show the loading image otherwise show nothing and then lastly we have our section where we display all of our images and to display those we use a map function because it's just an array so we say map over this array and for each image I want to create an image tag where the source is the source of that image and its description and its ID when we submit that form we call our API with the search term from state we defined our API just in a separate file but it's basically just doing a fetch request against that URL and then we get back the array of photos once we get those back we set them on state whenever we set state the page rear Enders and then the latest values of images will get spit out onto the screen we've done it Neil in the chat says very lit I agree it's it's fun to do these things like well I personally don't prefer react it's cool to see how these things work and really like how they structure the code because unless this this is where we'll let's compare this to how we were doing things with vanilla JavaScript oh that's cool so in react all of our state is in one place in vanilla JavaScript we don't really have any place where we're storing state like our state is stored in the Dom like the value of the input that's coming from the Dom when we add the images to the page we're just storing them in the Dom there is no render function we're actually specifically grabbing elements and updating their contents whereas in react we specify all of our UI in the render function init it decides for us what it should update there are some similarities though so like we still have to prevent the default action when a form is submitted we are defining our API call in a separate file I guess the other thing is like conditional rendering and react that's as simple as a ternary statement to decide whether or not to show that loading image in Dom manipulation it's very explicit we have to dive into the CSS property and say hide the loading image or show the loading image here cool that was fun any questions thoughts comments about react before I move into angular 6 which is the the one that I'm least familiar with but it should it should still be a fun time cool do we check all the boxes we did mm-hmm all right I'm gonna take a quick stretch and then we're gonna get into angular 6 all right anybody that's watching live do you have a preferred front-end framework or are you just getting started on the front end actually if you are watching why please let me know what is what's the framework that you work in the most often or maybe they want the one you prefer the most all right let's use angular and for that I am gonna go to the angular Doc's let's kill our server for now cool angular die oh and we can go into getting started and this tells us how to use the CLI tool so you can install it globally I am just going to use npx and then there CLI tool allows you to generate at generate an app just like we did with create react app but the react create react app is much more minimal than the angular CLI I was reading an article earlier today angular 6 yeah they're new CLI tool actually seems to have similar features to the view CLI tool they now have a way of yet ng add so you can there are various plugins in the angular ecosystem like progressive web app or angular material and you can just do inside of an angular app in G add and it will add that library automatically for you and hook it up and install it in all the different places cool so let's let's look at the look at the chat nicolas is learning react right now dan is to react in view that's awesome Brooks mostly in react siddharth is in react kaizen working in view most often Rodrigo just started with JavaScript three months ago and after looking at many frameworks review I started to learn view right away looking awesome glad glad to hear it and chat again is working in react so the overwhelming majority of the people in the chat right now are using react and some side chatter from Dan react also changes rapidly react 16 you don't need constructors on state I think they're building in some built-in loading and context API yeah I have heard about that and there's like chatter that Redux will go away so the app that I just built with react uses the built-in state management a lot of times when you see a react up it's actually using a thing called Redux which is a separate library for managing state and there is talk that in react 16 they've changed things ups to where you may not need Redux anymore and you may actually just be able to use the built in context API to manage things and Chris G says react for some and I'm converting him to view awesome I wish they were paying me but they're not actually no they don't need like just just use view it's awesome you don't got to pay me it's awesome but yeah the the the angular CLI tool has a lot of built-in features it has generating so you can run a command to generate an app you can run a current command to generate a new component it puts it in all the right places and hooks everything up for you so there's there's a lot going in I would say of all of the frameworks I'm covering today angular is probably the heaviest meaning it has the most things built in and there's there's just a lot of different ways to do things well not different ways there's there's a lot to do I'm gonna stop trying to put that into words Nicholas says he wants to learn views to person projects in the future absolutely do it okay so yeah angular six I believe was just released yeah 10 10 ish days ago and the CLI tool has all these new features so we're gonna use that CLI tool to generate the app we need to create a new project so again this command will create the directory for us so I'm gonna do npx angular CLI new and then the name of my app will be angular image search go actually I forgot to eat dinner today is happen to me like two days in a row for whatever reason I know so if you don't mind you eat this all this installs I'll mute my mic so you don't got to hear me chewing you peasant says stay fed I'll try cool and Chad's eating string cheese kaizen says glucose fills the Brita fuels a brain absolutely and Anna saying if you're a react lover J s comp has some cool reactive Mo's to check out with all that free time you have yeah I'm sure you can probably find those on YouTube alright so we have generated an angular app let's go into it and let's look at the files we got let's close everything else all right angular in the directory there's a lot going on one thing to mention about angular is it uses typescript I think it's I think it's just worth mentioning like what is typescript real quick before I even dive into that angular app so typescript is a way not a way it's a language that trans piles down to JavaScript and you specify your types so if you've ever worked in a strongly typed language like Java or C sharp or C++ when you define variables you can't just say var you have to say the type so like int string boolean variable name and typescript essentially is a superset of JavaScript to meaning all of the existing features of JavaScript will work inside of it but it adds things on top of it to give you type features quick start not with angular oh no not that I just want to learn about typescript typescript in five minutes cool so essentially let's look at the handbook real quick basic types so it looks a lot like JavaScript but you'll notice there are types so instead of just doing let is done equals false you have to actually say let is done and then you specify the type of that variable all of the primitive types in JavaScript have types built into typescript so bullying number string no undefined am I missing any probably object but that that's the interesting thing though I'll show that in a second so basically you're adding type descriptions to your code and what that offers you is before you run your code in the browser if you make a mistake like you accidentally put the wrong type into a variable or you also have to specify your types on function parameters so if you attempt to call a function with the wrong types the typescript compiler will yell at you basically it's it's almost like a debugging tool typescript is your friend to prevent you from making common mistakes that you might actually make in just plain old JavaScript so you have your basic typing there there's also this idea of interfaces so when you define an object in JavaScript it can have any number of properties on it with any number of types so an interface is basically a description of an object so it says this object will have these properties which will be of this type and so labeled value isn't will be an object that has a label property that is a string Square config can be an object that has an optional color property so the question mark says it may or may not have this property and that property will be a stream yeah so there's that they actually introduced I think they introduced the class keyword before es2015 came out but now it works in a very similar way you can also do inheritance but yeah basically you're you're adding adding types to your code to get better errors before your code actually runs in the browser and actually I'll just show functions real quick because like by default you've got a function however the other thing functions is you want so you want to specify the types of your input but you also want to specify the return type so then your code knows that this function is returning a number so if you're trying to store that in a variable you can only put it in a variable that's didn't have been defined as a number yeah so it's super interesting and angular uses that so you're gonna see a bit of that in the code that we look at now lots of configs up top if you look in the source directory this is where all your angular code lives a lot of stuff in here as well if you look at main TS this is kind of like the entry point the bootstrapping of the angular app we're bringing in lots of core packages that make stuff happen and then we're bootstrapping the app module and if we look inside of our app directory there is a padule TS when you see TS that's typescript and this is the set up of our app module you can think of your module that's kind of like a container for other components I'm only gonna have one component right now but typically your app might consist of multiple modules like you might have the home page module the about page module the search page module and then all of those modules will live inside of the app module so it really allows you to kind of like organize your code in that way but this is the main app module and it's bringing in the main app component and if we look at app component this is use class syntax to define your component and you'll notice these selector value here this basically says when you see this element on the page it should load this app component so if we look at our index dot HTML right here we have a croute and this is where the angular app is gonna get it loaded into cool you may notice that there is a ton of stuff going on so there are lots of files imported there are tons of files in the directory there are lots of things happening here this is a weird syntax you might not have seen before this is essentially a decorator syntax it allows you to I believe it's like passing your class into a function to modify some of its properties this was introduced yes 2017 or 2018 and also is a thing in typescript so you can find it decorator's with an introduction of classes and typescript there now exists certain scenarios that require additional features to support annotating and modifying classes and class members yeah so when you see this syntax it's a decorator there is so much going on in this angular app that I'm not even gonna try to explain everything I will try to explain the things that we come across and the things that are important but if you do have any questions please ask them in the chat like if I breeze over something that you may be like explaining a little bit more hey Bob welcome to the stream okay so that's our app component if we look at the definition it has a property on it and one thing about typescript is if you're defining a property it infers the type from the right-hand side so you could actually do well you could you could do this but this has a built-in linting rule that says type string trivial trivially inferred from a string literal remove type annotation so when it knows that this variable is a string you don't have to put the type annotation on there but you could think of this as our state on our component this there's a property on this component called title and we get access to that inside of the view the view is at this template in app component HTML and did we start it up yet no we didn't we can do npx serve and so the serve command will open the angular app in our browser and yeah we can see it see the basics cool so this is what we get by default and the property on our component is actually getting loaded in right there so if we look at the HTML welcome to title so angular uses this syntax known as handlebars and essentially it inside of the handlebars you can specify some property on your component and that's what will get rendered into the view yeah I think that's it for the overview let's get rid of everything and start over so we want an h1 and we want that to have our title and our title is going to be angular image search so now by updating that our page should just have an h1 on it awesome so let's add our basic body style and CSS so now in index dot HTML we're just gonna add skeleton right there okay and then we have styles that CSS these are styles that get applied to your entire app so here is where we're gonna put that body style like that and now we get our basic app with skeleton and it has the title on the page cool so what's next add the search form to the page let's do it so the interesting thing about a about angular is it separates out the logic like in react your view your template was inside of the component itself here our view is just this HTML file and our component is defined in this type script file so in here is where I'm gonna add the form and I'll grab that again from vanilla just to save some time so that's gonna go there let's see what we get we get a basic form no errors in the console we're doing good so we have added the search form to the page now update state when input changes angular has a pretty cool way to do this and it essentially is two-way data-binding so instead of having to manually hookup the change listener like we did with react there is a built-in way of listening for changes on an input and for that we're gonna go to the docs so I believe if I search for ng-model let's take a quick break hmm this is fun are you having fun I'm having fun I think this is kind of the first time I did this myself we're literally exact same app side-by-side I think the last thing I want to do after I finish angular and then view I'm getting excited because view is gonna take me like five minutes but once I finish I want to put them all side-by-side see like what are the real differences between between them all let's look up forms form concepts quick reference this is one thing I don't like about angular there's there's so much in their documentation it's really it's really hard to find things and there's also like what I'm about to show is a way to do automatic data binding you can also do it without that and it doesn't seem that in their Docs that the way to use that is easily findable I'm familiar with angular 1 which had this built-in thing called ng model and this this page is new or at least last time I tried angular this didn't happen but this shows you like how you would do something in angular 1 versus how you would do it now in angular 6 but the way to do it is with the banana in the box so in angular 2 a binding is denoted by brackets parenthesis descriptively referred to as a banana in a box so we're gonna add our banana in a box to a point to search term we can find that in ngmodel two-way binding to form elements okay so first thing we need to do is bring in the forms module so I grab the forms module and this is going to go in our app module file so an app dot module I'm gonna bring in forms and then we need to put forms on our imports so now our applique our application has access to NG bottle next thing is we can we can now use the banana in the Box syntax so this is basically what I want to do on my view so on the input I'm gonna specify that but the value that I want to bind bind to I can name it whatever I want I'm gonna call this search term and essentially whatever is inside of the double quotes here refers to some property on my component so on my component I'm gonna set search term to initially be just an empty string cool but the cool thing about this is now after adding that the search term is automatically getting updated under the hood by default so if I were to try to render that out we should see as I start typing you'll notice it's getting rendered out so just by importing that forms module adding it and then putting the banana in the box on our input we now have that two-way data-binding where it's it's hooked up to our component properties cool so now we are updating state when the input changes next thing make an API request with the search term when the form is submitted okay for this we're gonna want to use an angular service so let's figure out how to create a service actually earlier I had a really hard time finding in the docs but if you search for angular 5 service or angular generate service here this is this is a good wiki for the angular CLI if you go to the generate page it has all of the different things that you can generate using the CLI tool and a service is one of the things that we want to generate you can think of a service as a place to store information that you want to access in multiple components across your app it's also a place where API requests should happen and yeah that's the main thing so we're gonna create a service and we're gonna use the CLI to generate our API service and actually let me also find well actually we'll look before HTTP HTTP client yes okay so we'll have to add this HTTP client module and then it's showing this code that we're gonna need to add to a service but let's go ahead and generate that service before we do that typically you give your service a descriptive name they're calling there's config service so I'm going to call mine images service so npx No so we want to say generate service and then we'll call this images service well actually I think I'll just call this images I think it automatically adds the word service on the end go cool and you'll notice it tells you where it put it so inside of the source directory inside of app is images service let's take a look at that so we now have our image service and we want this to make the API request so if we look at the docs first thing we need to do is pull in the HTTP client module well now go back cool so in the same place where we brought in the form is module we're gonna bring in the HTTP client module okay now we add that module as our imports great now inside of our service we bring in HTTP client and the HTTP client has methods on it like get post put delete it's essentially a way of making API requests so we have that and now in our service we will import it and our constructor for our service will inject the HTTP client so angular has a concept called dependency injection basically you define what dependencies your service or component has and whenever angular creates an instance of that service or an instance of that component it decides what it should in inject or pass into your constructor so we're telling it we want the HTTP client great now we actually want to I guess we also need to make this thing injector already as injectable that's good and so now we actually want to make that API request so in their example they're just getting a JSON file with JSON data but in our case we want to do this but we can call it whatever we want so our method is going to be called search should take in the search term and then just return this HTTP GET and then we're gonna define API URL on the service so let me grab that and then on the images service we're gonna add just a property called API URL exceeds maximum length I don't care I'm not gonna try to fix that so our images service can have properties on it just like our components can so we specify the API URL property and then when we call the search function of the images service it will get the search term and then it needs to make a request to that URL so let's say URL is this dot API URL and the term is search term cool and now we just want to make a request against that URL awesome so we have this service it makes a request to the API in this function called search now how do we use it so inside of the component you can get access to the service and we need to actually inject the service can I see an example of that inject the dependency injection pattern [Music] let's actually look up service in the docs to see if they have an example their introduction to services and dependency injection okay so let's say you have a service defined like that and you want to get it into your component so this is our hero service on our component constructor we need to inject it so inside of app component we're gonna need a constructor that accepts a service and we don't want the hero service we want the images service so we need to import that from images dot service cool and we'll do that so and this is the typescript syntax for there will be a property on my component called service that is of type images service so let's actually call this images service cool now we need to actually tell it that it's injectable yeah so in our app dot module we need to specify the service as a provider so we'll do that if you go to app dot module inside of here we'll need to import our images service there we go and then images service now goes inside of providers and basically this this tells angular that hey here's this images service and if anyone else asks for this thing to be injected that's what we want to use so that works like that and yeah and you canyou can inject it at either level you can either put it as a provider on the app module or put it as a provider on the component itself I'm just putting it on the app module which means it's available to any component inside of my app ok so we have our images service now we need a submit' function so we can actually call the service so let's look at ng submit angularjs to angular concepts let's look up mmm let's look at forms submit yes submitting the form within G submit so let's see the user should be able to submit this form after filling it in so on the form itself we say in G submit and then the name of the function or the other method that we want to call inside of our component so in our app component will say on submit and for now let's just log form submitted and now inside of our view on the form will say ng submit is on submit so when this form is submitted call the function on my component called on submit that will get called here and this should log to the console so let's try it something's broke unexpected token oh wait what in our app module oh I misspelled from from cool refresh there we go no errors so if I say hello world well actually let's get rid of that binding real quick we don't want that anymore so in our template get rid of the search term hello world submit the form form submitted cool so now that function is getting called when the form is submitted let's contact our API so here is where we can actually use the HTTP client so we want to call it like this and the interesting thing about this is the HTTP client is actually an observable so instead of using something like a dot then on a promise you use a subscribe which basically get caught you can subscribe for data and that will get called any time new data is available so we're gonna follow this pattern but inside of our on submit so we'll say this dot images service dot search and then we need to pass in this search term to call it and then we're gonna just subscribe to let's just call this result cool and then let's just log result let's see what happens so now when the form is submitted we're gonna call the search method that we defined on our service pass in the search term get back the result log it to the console where are we here we are alright puppies please broke in images service dot search is not a function I thought it was let's look at our images service searches there take a quick break let's see I look back at that example get config is defined on the image service in our component file we are bringing in images service in our app module we are bringing in images service and specifying it as a provider are you sure about that angular let's see it's not a function Erik oh yeah let's just log the image service and see what we have access to it is an empty object it isn't inherits from ng injectable super-interesting why are those properties not defined on my service let's see do I have any any other errors besides this linter error let's see alright let's double check the docs for defining a service singleton services I guess that's kind of what I want so I have export class user service export class images service and in our app module we are importing it in that's working hmm yeah so give this introduction of services and dependency injection so in their example here they have a service class called lager that has three methods on it log error and warning and so in the chat they're saying after export class after the curly braces hmm so this this is defining a class with a constructor maybe post a fuller example if you if you can explain a little bit more let's see look at our component because this is exporting a class defined as a class with its constructor and then we're doing constructor actually no that should be okay I was thinking the this class might need to I do have it after constructor is that not Oh on my app component oh no I got it there too because uh at least from what I've seen yes so your your constructor can just have like an empty empty parentheses because all my component i've got empty parens and it is getting access to the images service the images service just doesn't have any properties on it which is curious i had this working earlier i don't know what i did any different let's see we are bringing in look again at HTTP client so bringing in HTTP client module that should be in my app dot module is it under imports yep and then inside of the service bring in HTTP client and injectable which i'm doing and then they have like a super simple class config service that has the constructor let's just copy it make sure I'm not doing anything weird cool I mean I don't think that's messing with anything and then yeah this is saying inside of the service you can just define a property and then you can define your method so I do have search they're taking in search term and it's returning HTTP GET which is an observable and then in our app component on submit is on the component itself let's try again hard refresh I literally changed nothing all I did was a hard refresh oh okay sorry about all the debugging but I think I think it should work now geez okay it worked so we're getting data back data from the API okay cool I did not change anything like I don't know why that was happening it could have been that I needed a hard refresh but it's supposed to be refreshing for me regardless okay where are we we are now making the request we got back the data now we actually want to store that on our component itself so let's say images is an array and then we'll say when we get back the data this dot images will be result dot two photos cool I'm getting type checking errors property photos does not exist on type object I could define an interface oh you think I renamed HTTP when it was passed in let me do it I think I can probably command Z it to see it let's see I don't know oh crap doesn't seem like it but I wouldn't put it past myself because it's definitely possible and made the call to this dot HTTP when it was named something else possibly I'll go back and watch the video and see what it actually did okay so because we're getting back this result from the API we we probably should define an interface that describes like what is the data we're getting back from the API but I don't want to do that so in typescript there is also the any type and that basically just says this is this can be anything and now I don't have to actually define my types I'm only doing this because I've been I've been spent a long time on angular and there's there's a lot going on in angular so we're gonna leave it as the any type here's what we're doing on our component we're defining images as an array that's the property and then when we get back our data we're setting it on this not images now we actually want to show these images on the page and the component so in our component let's do and actually we also want to show our loading if we go back to our readme so we're making the API requests awesome we should show the loading image before we actually show the results on the page so in here let's also have a loading property that is initialized to false and then when you submit the form will set this start loading to true and then now we want to show that loading image inside of our component and by the way thanks Mallory for for debugging with me I don't know if I've seen you in the chat before but thanks for stopping by and let's just grab our loading image that we already had and we'll put this inside of our app component so right below the form we're gonna throw that image and then let's just add a basic style in styles that CSS will set image to have 100% width cool so now by default when the page loads we see that loading image we want to hide that though based on loading so in angular there is a thing called ng-if and it allows you to do conditional rendering I always forget the syntax because I'm so used to angular 1 which is in gif so in angular 6 it is this so basically I want to say only show this loading image if loading is true and so now by default when the page loads there is no loading image and then if I start to make a search we see the loading image and then now we will hide the loading image when we get back through so we'll show the results on the page so let's add a section give it a class of images and inside of here is where we want the images to go but for this we want to repeat over that array so we have our array of images on our component and inside of the view we basically want to say for that array show every element show show an image for every element in that array and for that we can use in g4 so in g4 says let image in images so the thing on the right hand side is whatever the property name is inside of your component so that's the array itself and then the thing on the left hand side you can name it whatever you want whatever you want but you're basically saying for everything in this array give it the name image now on this image we have access to on this image we have access to this image and now we can set the source so I can do source equals image image URL at 0 and in angular if you want an attribute to use something from your component or you want it to be an expression you have to put that in Hittle ours so now we broke something in g4 I might have gotten that wrong look up in g4 whoa whoa whoa whoa Oh movie of tried to do it from memory image of images cool Shalom hey this channel is gold I appreciate that thanks for watching okay let image of images cool now we should hide the loading when we get back the images so we'll set the images and we'll say this start loading equals false okay we got there it took us a while but let's see what happens puppies search loading cool let's do some basic styling to put them into multiple columns so images will have column count of three and now if we search for kittens there they are look at them awesome yeah one thing we want to do though is the next time we make a search we want to clear out the array cuz otherwise the results will appear below the loading image so if I search for a betta fish there was the the kitten results were still there so for that before we make the request we need to set this dot images back to an empty array so that while it's making the request the previous results going that should work dogs there they are and if we look at cats you notice the dogs were gone for a second and then everything else shows up it shows up Wow and you are we did it all right let's look at our checklist so we showed the loading image we appended the results to the page and we hid the loading image all right I'm gonna do a quick rundown of what we just did with angular and then I'll get into huge is the very last one we're gonna do tonight I anticipate that view Jas is gonna take me 10 min at most maybe even five we'll see them okay but let's let's review what we did here with with angular before we go too far all right so our app kind of starts at our in our HTML we have this app root element that is defined by our app component and whenever angular sees this it knows to load our app component into that we have our app module and this is essentially a container for all the other components in our app right now we only have one component but if we had other components they would live inside of this module our component is the one being rendered on the page and it's selector says app root so that's where it's basically saying when you see an element with this name that's what should show up on the page and then our component is split up into three parts you have the component itself that's all of the the state and methods you have the view or the template and that is just an HTML file with some special syntax to grab data from State and then you have CSS to be applied for just this component and that right now is just an empty file I don't have any specific CSS for this component and on a component it's a class a class and any properties you defined are essentially like the state of this component so these are the properties are that we're going to be updating basis based on certain user interactions and these were the properties we're using inside of the view so we have a title we have a search term this represents what the user is typing in we have whether or not we're loading results and then we have an array of images if we look in the view we use handlebars to render out that title we use the banana in a box to bind the input to the search term so this syntax here basically says whatever the user is typing into that input box should be bound back to the search term property and then when this form is submitted it calls on submit inside of the component this sets loading to true clears out any current results and then calls our images service so in angular whenever you want to share data between components or make API requests or have maybe some shared logic typically that goes in a service so we defined a service called images service it brings in the HTTP client and this is built into angular just a way for making API requests so HTTP has get post put delete you can do all those different things for our case we just wanted to do a get request and on our service we define defined a search method where you pass in the search function call it with your API URL and the current search term and then return the call to the API back in the component when we get back the results we set it on images and we set loading to false inside of the component we are using this in G for syntax to iterate over the images and we're using ng if to decide whether or not to display the image the main one of the main things I had to do is in app dot module to get ng model working and I believe in Ji sub MIT I had to bring in the forms module and then to be able to use the HTTP client I had to bring in the HTTP client module this is angular cool now the moment you've all been waiting for I'm sure view Jas here we come we waited so long I didn't last on purpose thank you but yeah all right so I'm just gonna take a quick break that was that was a lot we implemented an angular app that was a lot let's uh let's kill it in the terminal let's close that throw it out go out of the angular directory okay so for this view app I'm gonna use the view CLI three to use that you can do npx at view slash CLI that's a break if it doesn't I think that's the way to do it and then you say create and then the name of the app you want to create so I'm gonna do view image search go check my messages [Music] what a cliff in your head um this is my break summer I am gonna take a quick stretch if you've been sitting down at home for this whole stream you should stand up right now just stand up get the blood flowing cool all right so the view CLI tool gives you lots of options these are some of my pre-configured options that I've done before but you can also go to manually select features and then choose what you want to have inside of your app so for this I it's gonna be a basic up I I did have those stretch features I'm not gonna do them I've already been streaming for two hours so what we want is just basic linting and that's it we'll do air B&B lint on save and lint and fix on commit we'll put all of our configs inside of the package.json and we will not save it as a preset dan are you saying it's a cliffhanger because I waited to do view Jas all the way to the end it I think it was an interesting decision because it's either like watch PJs and see how awesome it is and then watch me struggle through all these other frameworks or see it happen with those and then see me do it with UJS in like five minutes mm-hmm can someone start a timer actually also I'll start a timer I'm gonna time myself after it's generated so after you ran that command that created a folder with your view GIS app inside of it you can do in NPM runs serve that'll start it up and this is an auto refreshing hot reloading dev server so the cool thing about hot reloading is if only one component changes or one file changes only that part of your screen will update instead of the whole thing so that's pretty cool no errors let's get rid of all our angular resources cool all right I will start a timer right now um start a stopwatch go okay if we look at our readme first thing is add the search form before I do that I will do a quick tour got our basic folder all of our view Jas code is gonna go inside a source public has a basic HTML file it has a div called app that's where our view j/s app is gonna live very similar to how react did it if you look at mange is this is the entry point basically we're bringing in the view library library we're bringing in our app component and then we're saying mount that app component on that app element great that's how it works our app top view has some basic stuff in it I'm gonna get rid of this I'm gonna get rid of this hello world component get rid of that get rid of any decent default styles and this is the interesting thing about a huge AAS component your template or your view your script and your style all exists inside of the same file which is pretty awesome I think they're very you might have different opinions on that but I like the fact that everything I'm doing is all inside of one file all right first things first let's add skeleton to our app and we'll do that in public in the index dot HTML so we'll add that there great next thing is we'll add some basic styles so this is the style that I want there for app dot view I'm just gonna put those Styles inside of that style tag there by default these are just going to be global styles so that should apply to it and then inside of my app component I'm gonna have an h1 that says view image search what do we get cool so next thing is I need a form let's grab that from our vanilla app not that that uniform and that's just gonna go right below our but cool first things first let's get some state going on this component in view your state is known as data and that is a function that returns an object the first thing that we want to represent on state is the title so let's do that UJS uses handlebars template syntax to render things from your data so I'm saying render the title right there and on our data we'll have a property called title that is that value cool should that not be there oh I thought my linter wanted trillion comets we'll see okay so that's there still works we've got our basic form awesome let's look at the readme we want to so we've added the search term now update state when the input changes alright so on my state I need search term and then inside of the template I want to bind the input to that search term it's kind of similar to angular except it involves less work I don't have to import anything else I can just do a V - model and say search term this automatically syncs it with my data so to see that in action if I add nh3 and put search term inside of there now by default I instantly am syncing with my data good to go alright next thing is make an API request with the search term when the form is submitted so on the form I want to listen to submit and view you do that with the @ sign you can specify any event I have a plug-in inside of code that tells me all the different events so I'm gonna say submit submit they have a lot of built-in helpers one of them I'm going to use is that prevent that automatically prevents the default action and then you can specify what function you want to run when the form is submitted so I'm going to say form cool now on my component I need this function and on your component you can define methods that is an object it can have any number of functions inside of it I'm gonna put form submitted there and when the form is submitted I'm just gonna log log this start search term cool James true they'll be back for the content just stop by to say CJ you're a monster thanks man and you're stopping by cool so when the form is submitted let's log what the user typed into the form so hello world submit it logged to the console let's also just get rid of that h3 I feel like I'm moving fastest cuz I want to finish quick but I should slow down explain things alright let's make that API request we can grab this code from our vanilla lap it's gonna be very similar we are gonna use fetch so we need that I could define this in a separate file just like I did with react actually I'll do that let me just grab from our react up I can copy this API file and we'll just use that exact same API file inside of our view view JSF cool so now in here I have this this file that exports an object and I'm just going to import that in to my components so inside of here I'm gonna say import API from from that form API cool so now this component has access to the API and when the form is submitted we will do API dot search we'll pass in this dot search term and we will dot VIN it will get access to the images and then let's just log those out king of game and the chat says what's up what are you using this is the very last one of the stream right now I am doing it with view J s we did it with the vanilla we did it with react we did it with angular 6 this is the last one with UJS okay so when the form is submitted we call the API and then we'll just log those images out to the console so let's search for puppies there's our data awesome so we want to represent that data on state so on our data will say images we'll set that equal to an empty array and then inside of here we want to set the images so we'll just say this dot images equals images great I think again we want to show that loading image so let's grab that from our vanilla app actually we'll grab both these things because we want to do that so in my view app right below the form there is my break time alright let's take a quick stretch okay so we have the image but we only want to show this if we're loading so first we need a loading property on our state so we'll say loading is initially false and then when we start to search the API will say this stop loading is true and we only want to show this if loading is true so view has a way to do that with V - if loading so if loading is true show that image let's see what we get so if we search for kittens loading and we're not setting it to false yet so it just shows up let's just add a basic 100% with style to our image cool and you'll notice the page didn't fully refresh and also all of my previous console logs there that's because of this idea of hot reloading like it's only changing the things that need to it's not refreshing the entire page cool so we now are showing it when we're loading images now we want to actually show those images on the page so inside of here I want an image and the source well I want to repeat this image for every image inside of my images alright so for that you have v4 I think this is why I messed up the syntax earlier in angular because it's image in images and so images is on our data this we can give it any property we want but this refers to each image inside of that array and then we can specify the source so in view to bind the value of an attribute you use a colon and then give it the value that you want in this case I want image that image URL at zero and my linter is complaining because I need a key so just like in reactive UGS uses this uses the virtual Dom so it needs a key to keep track of each image image ID cool all right and then the last thing is after we get the images will set this start loading to false and when we first submit the form will set this images to an empty array so that before making the API requests the previous results clear out all right here we go puppies go last thing is just a simple CSS style so let's say dot images will have a column count of three there we go time ten minutes 15 seconds I need a sound cool I did rush through that I think I'll take my time to really explain it because we're doing very similar things like we did with the other front-end frameworks but to me it's it feels like less code and just makes sense I don't know and it's doing a lot more for us than something like react and has a lot less involved in something like angular 6 king of game is asking what am I using to code on are you asking about my editor or my system I mean I'll give you that if it's not that ask clarify I am using a MacBook Pro running OSX I'm my code editor is vs code I have I'm using a theme called SETI Manik I and I have various other packages installed but give me a nice little icons and things like that and the framework that I'm coding in is view jas so we finished let's check those boxes and then let's just review how is this view Jay s application working alright first thing is the search form pretty basic and if we look at our state all of the state of our application is getting stored there on data so you have the title of the page what the current search term is what the images are and then whether or not we are loading the search term starts off as an empty string but with the v-model directive you can bind this input to your data so anytime search term changes the model is automatically being updated under the hood and then we listen for the submit event of the form view to listen for Dom events on elements you use the @ sign and then the name of the event there are various helpers built-in but this one dot prevent just prevents the default action and we tell it which method we want to call when the form is submitted and then on our methods we have form submitted um dancing oh man Final Fantasy music I know you're where the rest of my night is going awesome kinga game is asking do I have discord I don't I'm thinking pretty soon I will probably start some sort of forum or chat for the channel so that people can talk about my videos and maybe ask for help and stuff like that but I don't have anything set up just yet I'm getting very very close to a thousand subscribers and so I think part of the celebration of a thousand subs will be like setting up before um 9:20 I think I've gained eight subs while the stream is going that's awesome but I'm getting really close and yeah definitely more things to come for the coding garden with CJ and so when this method is called we set loading to true on our template if loading is true we show the image so we see the loading image we set images to an empty array and you'll when you when you read about view you'll hear here it being called it is reactive meaning the moment we change data the view instantly updates so you'll notice I'm not having to call set State or anything like that I'm just updating the values and then this will actually rerender our page according to the latest values of our data so we show the loading image we reach out to our API and then when we get back the images we set them by setting them this V for now knows to iterate over that array and we also set loading to false so that the image the loading image disappears and then V for just repeats that image for each one and we show that image on the plate on the page awesome Dan I'll see you later yeah fire up the retropie that's awesome appreciate you for stopping by that's it that's view genius alright let's we we did it how long have I been streaming 2 hours and 20 minutes alright let's take these last few minutes of the stream and reflect on the three different frameworks that we used I did have some like stretch features in mind but it took us a while to get everything going with with the other frameworks um I will admit that UJS was last so I did get to copy in some of the code we use from other ones so that made it a little bit faster but yeah let's talk about it so if we look at our vanilla app it has the HTML just defined inside of the HTML file there's there's really no built-in way of separating that out which you see and the other other frameworks so for our HTML this is our view and then JavaScript is using Dom manipulation to get access to specific elements and then changes them for react we have a render function that returns a representation of our view so yes so we're looking at JSX is essentially HTML inside of our JavaScript but instead of just defining the HTML separately we define our view in terms of our state so we we basically pick out what is the the data associated with my app you pull that out from the view and then you represent your view according to whatever that state might be and then changes happen state gets updated and then the view rear Enders if we look at angular it takes a similar approach to view look at our app we look at the component it's view is an HTML file that has things referenced from our component properties so things like loading images search term on submit all of those things are defined inside of our component so that's the view a few a few different approaches angular and view are fairly similar and then let's look at the JavaScript so in vanilla JavaScript we are just doing everything by hand so we're selecting specific elements were manually tapping into events we're manually changing style properties and then based on our logic changing things up inside of the app so up top I'm storing references to all the elements on the page and then when the form is submitted we call our function we prevent the default action we grab the search term from the search input and this is one of the key differences between like just vanilla JavaScript in front-end framework typically in vanilla JavaScript you're storing all of the state inside of the Dom so like the value of the input only exists in the Dom I don't I'm not updating it on our state and in every other front-end framework we're actually updating our state every time the input value changes so if we look at react we have an on change event on our input and every time the input changes we update state where's that yeah we set state with the latest search term and if we look at angular that's where we used ng model so our state has an initial empty search term and on the component this ng model anytime the input changes it automatically updates state and then in view it has a similar directive called V model and any time the input changes it update state so in all of the front-end frameworks we're keeping track of everything in the UI as JavaScript whereas in vanilla JavaScript things are stored inside of the Dom and aren't necessarily stored in JavaScript Rodrigo says cool thanks for tuning in Brooks time to head to bed I got to get up early thanks for tuning in and Chad says angular is so nasty I agree it just feels so convoluted and there's so many things you have to bring in and so many things that could go wrong it feels like a mess even compared to react even compared to to view yeah so that's the search input and then calling the API again if we look at vanilla when we call the API we can we can just use built-in fetch but when we get back the results we're then just storing those directly in the Dom we're not we're not really keeping track of them in in JavaScript lands so we get back that array of images and then just append a bunch of new elements to the page where as in react we're storing that on state so our initial state says images is an empty array and then when we call the API when we get back the images we update state and then react it takes care of changing that on the view or what the user actually sees and inside of our render function we simply just map over the array of images and return JSX that is an image image tag so anytime this array changes it'll just rerun that map function to create to the latest images if we look how we did it in angular it has that built in in g4 directive which basically allows you to say let give it a name of some property on your state so in angular on the class instance our images was a property on our component and when we're referencing images in the template we're referencing that directly and then lastly in view similar style on our data we have an array of images and it has a directive called v4 that lets us repeat over that array of images and if the array changes it automatically updates the repeating cool gets back to vanilla I think the last thing would be like conditional rendering so in vanilla we wanted to be able to hide and show the loading image so in our Java Script we're just directly grabbing the image and then when we want to hide it we set display:none and then when we want to show it we remove that so it's very manual we're basically deciding when to show that with react we have a property on our state called loading and if that is true it will render the image if it's false it renders nothing and so the way that works in the render function is just a ternary statements so it says if floating is true show the image otherwise show nothing in angular they have the built in directive in G if so if floating is true show this image otherwise don't show it and in view we have the V if directives so if floating is true show this image otherwise don't show it okay I think I kind of covered all the different things let's let's look back at my readme user input Dom events API requests for conditional rendering rendering list of data we did all of these things in four different ways you saw all the different styles I think that's it I think that's it for the stream thanks everyone for tuning in thanks everyone for participating in the chat this has been a great time I'm going to push all this code up to github I'll put the link in the description and I'll also tweet it out if you follow me on Twitter so if you go to twitter.com slash coding underscore garden you can follow me every time I go live I tweet out and yeah you can also message me on there too if you'd like to if you visit coding garden all of my upcoming streams extreme times are on there I am actually going to cancel the Thursday evening stream I have a prior commitment but I'll replace that with either a Friday or a Saturday stream and to be notified of that on my youtube channel I put all of my upcoming streams there so you'll see if either a Friday or a Saturday stream pops up there cool or goog thumbs up thanks for tuning in yeah and as mentioned if you haven't followed yet or subscribed please subscribe you can click set reminder on any of the upcoming streams I think that's it I'm just gonna play myself applause real quick that's that's a little pretentious I'm sorry boo [Music] but I had a great time it's super fun to think about like the different ways to build an app like this and how each framework approaches it in like a slightly different way cool if you're watching this afterwards throw in the comments below like what is your favorite framework which do you prefer out of all of these and I think that's it thanks so much for tuning in I'll see you next time here's this [Music] you [Music] you

Channel: Coding Garden

Views: 20,305

Rating: 4.9474549 out of 5

Keywords: debug, full stack web development, mechanical keyboard, javascript, full stack javascript, live streaming, full stack, backend, live coding, frameworks, frontend, learn javascript, node.js, css, lesson, learning, beginner, vscode, debugging, coding, learn web development, learn node.js, educational, learn to code, programming, how to code, html, web development

Id: qQGPpUmDSPI

Length: 154min 25sec (9265 seconds)

Published: Mon May 14 2018