Welkom terug.
Dus deze video is een vrij grote mijlpaal in deze klasse.
We verhuizen van puur front-end technologieën om onze eerste smaak van rug en web development.
Dus we gaan te blijven gebruiken alles wat we hebben geleerd.
Het is G-mail CSSA javascript maar we gaan een aantal nieuwe technologieën die ons te helpen met volledige web applicaties te leren.
Natuurlijk voordat we beginnen met het schrijven van een stukje code hebben we een paar andere dingen die we nodig hebben om te zorgen voor.
We beginnen met de herziening van hoe het internet werkt.
Dan gaan we praten over statische versus dynamische sites en waar de front-end past en waar de rug en past in en meestal zullen we meer in de diepte te praten over de specifieke rug en technologieën die we gaan werken.
OK dus laten we beginnen met de 60 tweede versie van hoe het internet werkt.
Als we gaan naar een Euro hier om dot com slash cursussen zijn er een paar dingen die gebeuren achter de schermen.
Het eerste ding is dat onze computer nodig heeft om erachter te komen wat het IP-adres op een verzoek sturen naar.
Dus het duurt u door ons R-OH u uit te lezen komen daarin het juiste IP-adres is het unieke locator voor u en mij server krijgt.
Dan keer hebben we dat het IP-adres en New Age TTP verzoek wordt verzonden.
Dus een verzoek aan dat het IP-adres verzonden en het is niet alleen een blanco aanvraag.
Het heeft een heleboel informatie.
We zullen meer te praten over de specifieke details die in dit verzoek in de volgende video.
Maar de korte versie is dat het dingen als uw eigen IP-adres van de tijd dat u het verzendt op dat type verzoek.
En vooral de specifieke pagina die je vraagt.
Dus in dit geval vragen we voor de pagina van de cursus.
Dus dat is gecodeerd in het verzoek om naast mij wordt gestuurd krijgt dit verzoek en cijfers uit wat te doen.
En dan antwoordt het met iets.
Dus als we vragen om Slash cursussen de Tomy server zal uitzoeken wat er moet gaan op de cursus pagina.
Dus ik neem aan dat het gaat in een database en grijpt een bos van cursussen en afbeeldingen stelt hen in dit één lange HTL bestand met enig succes en een aantal javascript en dan is het eindelijk weer naar me om mijn computer heeft HTP reactie en dan wordt het een browser wiens taak het is om de pagina weer te geven.
Dus dit is wat de werkelijke inhoud eruit ziet voordat onze browser verzorgt het en maakt het voor ons als mens.
Dit is wat de computer ziet juist HMO succes in javascript.
Om dat alles te vatten als ik naar een URL en ik druk op enter eerste wat er gebeurt is dat we nodig hebben om het IP-adres voor dat domein te vinden en dan sturen wij je een HTP verzoek vraagt ​​om een ​​bepaalde pagina aan dat het IP-adres en de server ontvangt dat verzoek.
It figures wat te doen wat te antwoorden met.
En dan antwoordt het terug met H.M. SS in javascript.
Het volgende wat ik wil bespreken is het verschil tussen statische en dynamische webpagina's.
We spraken over dit ook in een van de eerste video's over hoe het internet werkt.
Ik wil een korte samenvatting te doen, omdat het belangrijk is om de back-end discussie die we op het punt om te hebben.
Er zijn dus twee verschillende soorten websites statische pagina's en dynamische pagina's dynamische webpagina's zijn sites die worden samengesteld op de server waar de server elkaar trekt of de bouw van een webpagina voordat het weer als een antwoord is verzonden.
Alles wat we tot nu toe heb geschreven is statisch geweest.
Dus zelfs zoiets als dit, dat het niet lijkt alsof het statische omdat er dynamische inhoud.
Wij krijgen willekeurige kleuren elke keer en het is een spel.
Het lijkt niet zo statisch als het restaurant webpagina voorbeeld dat ik vroeger op de eerdere video over dit onderwerp, maar het is nog steeds statisch, want het is dezelfde HMO C Ss in javascript.
Elke keer.
Ja, het ziet er anders uit, want we hebben een aantal willekeurige kleuren, maar het is dezelfde fundamentele stukken elke keer dat we het openen in de browser op een dynamische website.
We konden verschillende javascript of andere C Ss anders elk team dat wordt teruggestuurd elke keer hebben.
Dus als we naar iets als Reddit bijvoorbeeld en ik Vernieuw de pagina die ik kan verschillende inhoud hier te komen.
En in feite doe ik elke keer dat je fris de pagina die u nieuwe inhoud te krijgen zijn en dus is er een database die is het samenstellen van dingen.
Er is een aantal codes controleren als je ingelogd bent en als je ingelogd bent dan zal je niet laten een vorm dan hier, maar het geeft je een log out knop te tonen.
En als u niet bent ingelogd in het toont u een formulier en het toont u inloggen of up knoppen.
Dus deze webpagina is niet exact dezelfde H G M L C Ss in javascript die terug naar mij gestuurd iedere keer dat de server eigenlijk beslissen wat terug te sturen.
Bij de constructie van een webpagina voordat deze stuurt het naar me versus deze site is het exact dezelfde inhoud elke keer weer.
OK dus laten we nu concentreren een beetje meer op de back-end.
Dus dit diagram is van een generieke stack en stack is een term die wordt gebruikt om te verwijzen naar alle van de technologieën die een bepaalde web-applicatie gebruikt.
Dus H.T. Melchior zegt in javascript zijn altijd zijn bijna altijd deel uit van een stapel tegenwoordig op grote luxe web apps.
Technisch gezien kunnen we een website die geen succes hoeft te hebben.
Het zou gewoon afschuwelijk.
We konden een website die geen client-side javascript ook heeft en het zou gewoon niet erg interactief zijn.
Maar we kunnen nog steeds een prima website zoals wij deden met de originele fotografie portfolio site gewoon elk team Eliseus ons, maar de meeste web apps zoals ik al zei hebben allemaal HDMI ELSEA zegt en Javascript dat wordt weer op de backend is verzonden is waar we een veel meer varianten.
Er zijn dus verschillende talen die we server-side code kunnen schrijven en we kunnen schrijven of rug en het gebruik van Ruby of Python of Skala of Java of javascript of THP.
Er zijn zo veel keuzes er zijn.
Er zijn allerlei verschillende databases die er zijn.
Na de post-crisis en vervolg het in mijn zo goed en Mongo en er is zo veel keuzes.
Dus de term stack verwijst naar wat bepaalde keuzes de ontwikkelaars gemaakt en wat de exacte technologieën die zij gebruiken.
Het is een veel voorkomende vraag voor ontwikkelaars om elkaar te vragen.
Wat is je stack bij dat bedrijf of wat stack gebruikt u op dit specifieke project.
Dus hier is een real life voorbeeld van Reddit stack.
Dus dit zijn enkele van de technologieën die Reddit gebruikt op haar website.
Dus de site is geschreven in Python met behulp van een kader genaamd kolf.
Het is gebouwd op een motor X-server en maakt gebruik van postscripts als database.
Er is eigenlijk een website gewijd aan het delen van verschillende bedrijven stapels genaamd Stack aandeel.
Dus ik heb het hier te openen en dit is de pagina Reddit op de textuur en kunnen we alle verschillende technologieën die ze gebruiken te zien.
En genetica Python bericht gresse Amazon S3.
En het vertelt je hieronder een klein beetje over wat ze gebruikt.
Laat je niet overweldigd door het aantal pictogrammen er zijn.
Hoeveel namen en al deze verschillende categorieën en al deze verschillende termen.
Dat is niet de focus hier.
Alles wat ik wil laten zien is dat verschillende websites maken gebruik van verschillende technologieën.
Dus laten we klik op stapels en kunnen we een kijkje bij enkele ander bedrijf stacks te nemen.
Bijvoorbeeld lucht B en B kunt zien dat FBN B maakt gebruik van rails en Ruby dat mijn Esky ook veel gebruikt om javascript Java.
Zij maken gebruik van een hele hoop van verschillende technologieën.
Dus laten we teruggaan naar onze dia's hier.
Een ander ding dat ik wil brengen, is dat deze blauwe lijn hier duidt op de grens tussen back-end en front-end.
Dus hebben we besproken hoe een dynamische site wordt gebouwd door een server op de backend.
Dus dit recht hier dit deel van het schema is de plaats waar het dynamische deel van de site komt.
Dus dit is al de logica geschreven in Python in het rood is het zaak dat de cijfers uit als een gebruiker is aangemeld als we nodig hebben om een ​​formulier wat toe te voegen aan toe te voegen in de pagina welke beelden op te zetten als we nodig hebben om een ​​sign up hebben laten zien en vergrendelen knop of een teken uit knop.
Dat alles wordt gedaan in de rug en in dit deel van het diagram en vervolgens verzonden h tim C L S S en Javascript terug.
Dus hier is de stapel die we gaan moeten leren.
We gaan knooppunt j gebruiken.
Ja.
Dus we nog steeds het schrijven van javascript, maar we gaan het aan te schrijven op de backend.
We gaan een kader genaamd Express gebruiken en we gaan ook Mangu DBI als onze database.
En dan natuurlijk zullen we ook h t m l c s s en Javascript, precies zoals we zijn met behulp van in de laatste paar units.
Dus nu op dit punt in de cursus kunt u zelf een front-end developer of een front end developer in opleiding, waar we alles wat u moet weten om te beginnen met het maken van de front-end van websites hebben besproken te overwegen.
Nu gaan we beginnen te praten over terug in web development en zodra we die twee bij elkaar te brengen aan het einde van de cursus waar het schrijven van server-side code met Express A.J. als Mongo D-B hebben we de gebruiker log in, maar we zijn ook het schrijven van client side of front end javascript.
H Tim L en C Ss.
Dat is wat we volledige stack web development zouden noemen.
De term volledige stack web development verwijst naar het schrijven van code op alle delen van de stapel de back-end en front-end.
Hier is een diagram van enkele van de functies die we kunnen uitvoeren op de mand.
En dat is met behulp van Reddit als voorbeeld weer kunt u zien we hebben functies, zoals check als de gebruiker is ingelogd in teken van een gebruiker een nieuw bericht toevoegen aan de database te maken een nieuwe reactie verwijderen van een bericht uit de database sorteren en rangschikken van de posten een nieuwe sub Reddit voegen abonnee van de nieuwsbrief en op te slaan die in de database.
En het belangrijkste is natuurlijk erachter te komen wat elk team zullen zien beoordelen javascript terug te sturen naar de gebruiker, die vervolgens wordt teruggestuurd.
De kruising van deze blauwe lijn waar we nu naar het front-end dat H.M.S. moordenaars en Javascript is teruggestuurd naar mij en dan zie ik dit in mijn browser.
Ik heb nog een diagram hier die ook spreekt over front-end versus back-end, maar het is iets anders opgemaakt.
Dit schema van de volgorde van de gebeurtenissen tussen de front-end en back en in de loop van een paar pagina wordt geladen.
Dus op de front-end als ik ga om het te lezen dot com en te vernieuwen.
Ik ben het verzenden van een verzoek om Reddit homepage en dan dat gaat om het te lezen.
Dit verzoek maakt het aan hun server en de server ziet dat ik ben gevraagd voor de home page.
Dus er is een aantal server-side logica dat het eerste bericht uit de database grijpt en maakt de hele tijd LNC SS en javascript die ik zie hier en stuurt die terug naar mij, die ik vervolgens te bekijken in mijn browser.
De volgende stap is dat ik iets in een zoekvak als honden die ik nu ga doen typen honden hier en druk op enter kunnen typen.
En toen ik druk op enter een nieuw verzoek wordt teruggestuurd naar Reddit server gestuurd deze keer te zeggen dat ik ben op zoek naar honden.
Dus de server heeft een aantal logica dat mijn zoekterm honden neemt en het vindt alle berichten die overeenkomen met die term in de database en dan maakt het me wat nieuw tijdperk mannelijke beoordelen javascript voor de hond van de pagina met resultaten en stuurt dat terug naar mij .
En dan mijn browser maakt het en ik zie dit, dat is een heel erg vereenvoudigde versie natuurlijk.
Er is veel meer gebeurt achter de schermen en Reddit daadwerkelijk zal worden het creëren van onze eigen versie van een applicatie zeer gelijkaardig om het te lezen.
Zodra we meer informatie over de Express en weten J.S. en Mongo DB En we zullen het maken van een volledige stack toepassing.