1
00:00:00,360 --> 00:00:01,320
Welkom terug.

2
00:00:01,680 --> 00:00:05,790
Dus deze video is een vrij grote mijlpaal in deze klasse.

3
00:00:05,790 --> 00:00:11,580
We verhuizen van puur front-end technologieën om onze eerste smaak van rug en web development.

4
00:00:11,580 --> 00:00:13,940
Dus we gaan te blijven gebruiken alles wat we hebben geleerd.

5
00:00:13,950 --> 00:00:20,880
Het is G-mail CSSA javascript maar we gaan een aantal nieuwe technologieën die ons te helpen met volledige web applicaties te leren.

6
00:00:20,880 --> 00:00:25,300
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.

7
00:00:25,410 --> 00:00:27,840
We beginnen met de herziening van hoe het internet werkt.

8
00:00:27,840 --> 00:00:38,580
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.

9
00:00:39,030 --> 00:00:43,660
OK dus laten we beginnen met de 60 tweede versie van hoe het internet werkt.

10
00:00:43,980 --> 00:00:50,790
Als we gaan naar een Euro hier om dot com slash cursussen zijn er een paar dingen die gebeuren achter de schermen.

11
00:00:50,790 --> 00:00:56,130
Het eerste ding is dat onze computer nodig heeft om erachter te komen wat het IP-adres op een verzoek sturen naar.

12
00:00:56,490 --> 00:01:04,840
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.

13
00:01:05,130 --> 00:01:10,050
Dan keer hebben we dat het IP-adres en New Age TTP verzoek wordt verzonden.

14
00:01:10,290 --> 00:01:14,910
Dus een verzoek aan dat het IP-adres verzonden en het is niet alleen een blanco aanvraag.

15
00:01:14,910 --> 00:01:16,800
Het heeft een heleboel informatie.

16
00:01:16,800 --> 00:01:20,830
We zullen meer te praten over de specifieke details die in dit verzoek in de volgende video.

17
00:01:21,090 --> 00:01:27,910
Maar de korte versie is dat het dingen als uw eigen IP-adres van de tijd dat u het verzendt op dat type verzoek.

18
00:01:27,990 --> 00:01:31,920
En vooral de specifieke pagina die je vraagt.

19
00:01:31,950 --> 00:01:34,710
Dus in dit geval vragen we voor de pagina van de cursus.

20
00:01:34,830 --> 00:01:43,010
Dus dat is gecodeerd in het verzoek om naast mij wordt gestuurd krijgt dit verzoek en cijfers uit wat te doen.

21
00:01:43,140 --> 00:01:44,810
En dan antwoordt het met iets.

22
00:01:45,030 --> 00:01:52,230
Dus als we vragen om Slash cursussen de Tomy server zal uitzoeken wat er moet gaan op de cursus pagina.

23
00:01:52,230 --> 00:02:13,580
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.

24
00:02:13,860 --> 00:02:19,880
Dus dit is wat de werkelijke inhoud eruit ziet voordat onze browser verzorgt het en maakt het voor ons als mens.

25
00:02:20,010 --> 00:02:24,880
Dit is wat de computer ziet juist HMO succes in javascript.

26
00:02:25,050 --> 00:02:42,600
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.

27
00:02:42,750 --> 00:02:45,310
It figures wat te doen wat te antwoorden met.

28
00:02:45,570 --> 00:02:51,300
En dan antwoordt het terug met H.M. SS in javascript.

29
00:02:51,300 --> 00:02:56,510
Het volgende wat ik wil bespreken is het verschil tussen statische en dynamische webpagina's.

30
00:02:56,610 --> 00:03:00,960
We spraken over dit ook in een van de eerste video's over hoe het internet werkt.

31
00:03:00,960 --> 00:03:05,730
Ik wil een korte samenvatting te doen, omdat het belangrijk is om de back-end discussie die we op het punt om te hebben.

32
00:03:06,330 --> 00:03:22,530
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.

33
00:03:22,530 --> 00:03:25,610
Alles wat we tot nu toe heb geschreven is statisch geweest.

34
00:03:25,650 --> 00:03:31,330
Dus zelfs zoiets als dit, dat het niet lijkt alsof het statische omdat er dynamische inhoud.

35
00:03:31,350 --> 00:03:35,000
Wij krijgen willekeurige kleuren elke keer en het is een spel.

36
00:03:35,010 --> 00:03:48,030
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.

37
00:03:48,060 --> 00:03:49,160
Elke keer.

38
00:03:49,440 --> 00:03:58,530
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.

39
00:03:58,560 --> 00:04:04,620
We konden verschillende javascript of andere C Ss anders elk team dat wordt teruggestuurd elke keer hebben.

40
00:04:04,980 --> 00:04:11,580
Dus als we naar iets als Reddit bijvoorbeeld en ik Vernieuw de pagina die ik kan verschillende inhoud hier te komen.

41
00:04:11,820 --> 00:04:19,330
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.

42
00:04:19,380 --> 00:04:28,020
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.

43
00:04:28,320 --> 00:04:34,360
En als u niet bent ingelogd in het toont u een formulier en het toont u inloggen of up knoppen.

44
00:04:35,370 --> 00:04:44,430
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.

45
00:04:44,430 --> 00:04:53,540
Bij de constructie van een webpagina voordat deze stuurt het naar me versus deze site is het exact dezelfde inhoud elke keer weer.

46
00:04:56,320 --> 00:04:59,260
OK dus laten we nu concentreren een beetje meer op de back-end.

47
00:04:59,350 --> 00:05:09,800
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.

48
00:05:09,820 --> 00:05:17,770
Dus H.T. Melchior zegt in javascript zijn altijd zijn bijna altijd deel uit van een stapel tegenwoordig op grote luxe web apps.

49
00:05:17,770 --> 00:05:21,310
Technisch gezien kunnen we een website die geen succes hoeft te hebben.

50
00:05:21,340 --> 00:05:22,690
Het zou gewoon afschuwelijk.

51
00:05:22,780 --> 00:05:28,420
We konden een website die geen client-side javascript ook heeft en het zou gewoon niet erg interactief zijn.

52
00:05:28,540 --> 00:05:46,050
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.

53
00:05:46,270 --> 00:05:57,720
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.

54
00:05:57,820 --> 00:05:59,500
Er zijn zo veel keuzes er zijn.

55
00:05:59,530 --> 00:06:01,930
Er zijn allerlei verschillende databases die er zijn.

56
00:06:01,930 --> 00:06:07,760
Na de post-crisis en vervolg het in mijn zo goed en Mongo en er is zo veel keuzes.

57
00:06:07,810 --> 00:06:16,110
Dus de term stack verwijst naar wat bepaalde keuzes de ontwikkelaars gemaakt en wat de exacte technologieën die zij gebruiken.

58
00:06:16,180 --> 00:06:19,200
Het is een veel voorkomende vraag voor ontwikkelaars om elkaar te vragen.

59
00:06:19,450 --> 00:06:25,010
Wat is je stack bij dat bedrijf of wat stack gebruikt u op dit specifieke project.

60
00:06:25,030 --> 00:06:28,290
Dus hier is een real life voorbeeld van Reddit stack.

61
00:06:28,510 --> 00:06:32,830
Dus dit zijn enkele van de technologieën die Reddit gebruikt op haar website.

62
00:06:33,160 --> 00:06:37,010
Dus de site is geschreven in Python met behulp van een kader genaamd kolf.

63
00:06:37,410 --> 00:06:42,610
Het is gebouwd op een motor X-server en maakt gebruik van postscripts als database.

64
00:06:42,610 --> 00:06:48,250
Er is eigenlijk een website gewijd aan het delen van verschillende bedrijven stapels genaamd Stack aandeel.

65
00:06:48,460 --> 00:06:55,470
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.

66
00:06:55,660 --> 00:06:59,270
En genetica Python bericht gresse Amazon S3.

67
00:06:59,410 --> 00:07:02,590
En het vertelt je hieronder een klein beetje over wat ze gebruikt.

68
00:07:02,590 --> 00:07:04,980
Laat je niet overweldigd door het aantal pictogrammen er zijn.

69
00:07:05,110 --> 00:07:09,530
Hoeveel namen en al deze verschillende categorieën en al deze verschillende termen.

70
00:07:09,790 --> 00:07:11,100
Dat is niet de focus hier.

71
00:07:11,340 --> 00:07:15,910
Alles wat ik wil laten zien is dat verschillende websites maken gebruik van verschillende technologieën.

72
00:07:15,910 --> 00:07:20,190
Dus laten we klik op stapels en kunnen we een kijkje bij enkele ander bedrijf stacks te nemen.

73
00:07:20,290 --> 00:07:33,130
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.

74
00:07:33,520 --> 00:07:35,720
Zij maken gebruik van een hele hoop van verschillende technologieën.

75
00:07:35,770 --> 00:07:38,500
Dus laten we teruggaan naar onze dia's hier.

76
00:07:38,500 --> 00:07:45,650
Een ander ding dat ik wil brengen, is dat deze blauwe lijn hier duidt op de grens tussen back-end en front-end.

77
00:07:46,000 --> 00:07:51,490
Dus hebben we besproken hoe een dynamische site wordt gebouwd door een server op de backend.

78
00:07:51,490 --> 00:07:57,050
Dus dit recht hier dit deel van het schema is de plaats waar het dynamische deel van de site komt.

79
00:07:57,250 --> 00:08:13,130
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.

80
00:08:13,240 --> 00:08:23,600
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.

81
00:08:23,680 --> 00:08:26,170
Dus hier is de stapel die we gaan moeten leren.

82
00:08:26,380 --> 00:08:27,800
We gaan knooppunt j gebruiken.

83
00:08:27,870 --> 00:08:28,440
Ja.

84
00:08:28,450 --> 00:08:33,120
Dus we nog steeds het schrijven van javascript, maar we gaan het aan te schrijven op de backend.

85
00:08:33,280 --> 00:08:40,090
We gaan een kader genaamd Express gebruiken en we gaan ook Mangu DBI als onze database.

86
00:08:40,370 --> 00:08:46,490
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.

87
00:08:46,720 --> 00:08:58,950
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.

88
00:08:58,960 --> 00:09:14,510
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.

89
00:09:14,510 --> 00:09:16,170
H Tim L en C Ss.

90
00:09:16,390 --> 00:09:19,090
Dat is wat we volledige stack web development zouden noemen.

91
00:09:19,270 --> 00:09:26,380
De term volledige stack web development verwijst naar het schrijven van code op alle delen van de stapel de back-end en front-end.

92
00:09:26,710 --> 00:09:30,990
Hier is een diagram van enkele van de functies die we kunnen uitvoeren op de mand.

93
00:09:31,210 --> 00:09:51,420
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.

94
00:09:51,760 --> 00:10:00,270
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.

95
00:10:00,460 --> 00:10:10,730
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.

96
00:10:11,020 --> 00:10:17,260
Ik heb nog een diagram hier die ook spreekt over front-end versus back-end, maar het is iets anders opgemaakt.

97
00:10:17,560 --> 00:10:24,070
Dit schema van de volgorde van de gebeurtenissen tussen de front-end en back en in de loop van een paar pagina wordt geladen.

98
00:10:24,370 --> 00:10:29,410
Dus op de front-end als ik ga om het te lezen dot com en te vernieuwen.

99
00:10:29,680 --> 00:10:34,790
Ik ben het verzenden van een verzoek om Reddit homepage en dan dat gaat om het te lezen.

100
00:10:34,960 --> 00:10:39,340
Dit verzoek maakt het aan hun server en de server ziet dat ik ben gevraagd voor de home page.

101
00:10:39,370 --> 00:10:52,040
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.

102
00:10:52,780 --> 00:11:02,370
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.

103
00:11:02,710 --> 00:11:10,320
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.

104
00:11:10,570 --> 00:11:25,930
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 .

105
00:11:26,620 --> 00:11:32,700
En dan mijn browser maakt het en ik zie dit, dat is een heel erg vereenvoudigde versie natuurlijk.

106
00:11:32,810 --> 00:11:39,660
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.

107
00:11:39,820 --> 00:11:46,630
Zodra we meer informatie over de Express en weten J.S. en Mongo DB En we zullen het maken van een volledige stack toepassing.