Bem vindo de volta.
Então este vídeo representa um marco bastante importante nesta classe.
Estamos passando de tecnologias puramente front-end para nosso primeiro gosto de desenvolvimento de back-end e web.
Então vamos continuar usando tudo o que aprendemos.
É o JavaScript do CSSA do G-mail, mas vamos aprender algumas novas tecnologias que nos ajudam
a fazer aplicações web completas.
Claro que antes de começar a escrever um código, temos algumas outras coisas de que precisamos cuidar.
Começaremos por analisar como funciona a Internet.
Então, vamos falar sobre estática vs. sites dinâmicos e onde o front-end se encaixa
e onde volta e se encaixa e, principalmente, falaremos mais detalhadamente sobre as costas e tecnologias específicas com as
quais vamos trabalhar.
OK, então comecemos com a versão de 60 segundos de como a Internet funciona.
Quando chegamos a um Euro aqui para mim com os cursos de ponto com slash, há algumas coisas que acontecem nos bastidores.
A primeira coisa é que nosso computador precisa descobrir o endereço IP para enviar um pedido.
Então, leva-nos você R-OH para ler, ele obtém o endereço IP correto, que é o localizador exclusivo para
você e para o servidor.
Então, uma vez que temos esse endereço IP e a solicitação New Age TTP é enviada.
Então, um pedido é enviado para esse endereço IP e não é apenas um pedido em branco.
Tem um monte de informações.
Vamos falar mais sobre os detalhes específicos que estão nesse pedido no próximo vídeo.
Mas a versão curta é que tem coisas como seu próprio endereço de IP o tempo que você está
enviando para esse tipo de solicitação.
E, o mais importante, a página específica que você está pedindo.
Então, neste caso, estamos pedindo a página do curso.
Então, isso está codificado no pedido que é enviado ao meu lado, obtém esse pedido e descobre o que
fazer.
E então responde com alguma coisa.
Então, se estamos pedindo cursos Slash, o servidor Tomy descobrirá o que precisa seguir na página
do curso.
Então eu assumiria que ele entra em um banco de dados e agarra um monte de cursos
e imagens compila-os neste longo arquivo HTL com algum sucesso e algum javascript e, finalmente, ele é finalmente enviado
de volta para mim no meu computador tem resposta HTP e, em seguida, ele obtém para um navegador cujo trabalho é renderizar a página.
Então, este é o aspecto do conteúdo atual antes que nosso navegador cuide dele e o processe para
nós como seres humanos.
Isto é o que o computador vê apenas o sucesso da HMO em javascript.
Para resumir tudo isso quando eu vou para um URL e eu acertei, entre primeiro o que acontece
é que precisamos encontrar o endereço IP para esse domínio e, em seguida, enviamos uma solicitação HTP solicitando uma página específica para esse
endereço IP e, em seguida, o servidor recebe esse pedido.
Ele descobre o que fazer com o que responder.
E então responde de volta com H. M. SS em javascript.
A próxima coisa que quero discutir é a diferença entre páginas web estáticas e dinâmicas.
Nós conversamos sobre isso também em um dos primeiros vídeos sobre como funciona a internet.
Eu quero fazer uma recapitulação rápida, porque é importante para a discussão final que estamos prestes a ter.
Portanto, existem dois tipos diferentes de páginas estáticas de páginas da Web e páginas dinâmicas. As páginas da web dinâmicas são
sites compilados no lado do servidor onde o servidor está juntando ou construindo uma página da Web antes
de ser enviada de volta como uma resposta.
Tudo o que escrevemos até agora tem sido estático.
Então, mesmo assim, não parece que seja estático porque há conteúdo dinâmico.
Recebemos cores aleatórias de cada vez e é um jogo.
Não parece tão estático quanto o exemplo da página da Web do restaurante que usei no vídeo anterior
sobre este assunto, mas ainda é estático porque é o mesmo HMO C Ss no javascript.
Toda vez.
Sim, parece diferente porque temos algumas cores aleatórias, mas são as mesmas peças fundamentais
sempre que estamos abrindo no navegador em um site dinâmico.
Podemos ter diferentes javascript ou diferentes C Ss diferentes de cada equipe que está sendo enviada de volta a
cada vez.
Então, quando vamos a algo como Reddit, por exemplo, e atualizo a página, posso obter conteúdo diferente
aqui.
E, na verdade, faço todas as vezes que você está fresco na página, você recebe novos conteúdos e, portanto, há um banco
de dados que está compilando coisas.
Há alguns códigos que verificam se você está logado e, se você estiver logado, não mostrará um
formulário aqui, mas isso lhe mostrará um botão de logout.
E se você não está logado, mostra-lhe um formulário e mostra que você inicia sessão ou assina os botões.
o mesmo H G M L C Ss no javascript que me enviou sempre que o servidor realmente está decidindo o que devolver.
Portanto, esta página da web não é exatamente
Ao construir uma página da Web antes de enviá-la para mim, em relação a este site, é o mesmo conteúdo
exato a cada momento.
OK, então vamos focar um pouco mais na parte de trás agora.
Então, este diagrama é de uma pilha genérica e a pilha é um termo que é usado para se referir a todas
as tecnologias que uma determinada aplicação web usa.
Então H. T. Melchior diz que, em JavaScript, sempre são quase sempre parte de uma pilha hoje em
dia em grandes aplicativos web extravagantes.
Tecnicamente, poderíamos ter um site que não tenha sucesso.
Seria apenas horrível.
Poderíamos ter um site que ainda não possui javascript do lado do cliente e simplesmente não
seria muito interativo.
Mas ainda podemos fazer um site perfeitamente bom, como fizemos com o site de portfólio de fotografia original,
apenas cada equipe, Eliseus, nós, mas a maioria dos aplicativos da web, como mencionei, todos têm HDMI elsea diz e o Javascript
que está sendo enviado de volta no backend é onde vemos um muito mais variantes.
ou voltar e usar Ruby ou Python ou Skala ou Java ou javascript ou THP.
Portanto, existem diferentes idiomas que podemos escrever o código do lado do servidor e podemos escrever
Há muitas escolhas lá.
Existem todos os tipos de bases de dados diferentes lá fora.
Poste depois da crise e sequela na minha também e Mongo e há tantas opções.
Então, o termo "stack" refere-se a quais escolhas particulares os desenvolvedores criaram e quais as tecnologias
exatas que eles usam.
É uma questão muito comum para os desenvolvedores se perguntarem.
Qual é a sua pilha naquela empresa ou qual pilha você está usando neste projeto específico.
Então, aqui é um exemplo da vida real da pilha do Reddit.
Então, estas são algumas das tecnologias que o Reddit usa em seu site.
Então, o site está escrito em Python usando um quadro chamado frasco.
É construído em um servidor X do mecanismo e usa postscripts como seu banco de dados.
Na verdade, há um site dedicado a compartilhar pilhas de diferentes empresas chamadas compartilhamento de pilha.
Então eu tenho isso aberto aqui e esta é a página Reddit sobre textura e podemos ver todas as diferentes tecnologias que
eles usam.
E genética Python post gresse Amazon S3.
E diz-lhe um pouco sobre o que eles são usados.
Não se surpreenda com a quantidade de ícones que existem.
Quantos nomes e todas essas categorias diferentes e todos esses termos diferentes.
Esse não é o foco aqui.
Tudo o que quero mostrar é que diferentes sites usam diferentes tecnologias.
Então, vamos clicar em pilhas e podemos dar uma olhada em algumas outras pilhas da empresa.
Por exemplo, o ar B e B podem ver que FBN B usa trilhos e Ruby que usam o meu lote bem Esky para
javascript Java.
Eles usam todo um conjunto de tecnologias diferentes.
Então vamos voltar para nossos slides aqui.
Outra coisa que quero mostrar é que esta linha azul aqui denota o limite entre
o back-end eo front-end.
Então, discutimos como um site dinâmico é construído por um servidor no backend.
Então, aqui mesmo, esta parte do diagrama é onde a parte dinâmica do site entra.
vermelho, é o caso que descobre se um usuário está logado se precisarmos mostrar um formulário que adiciona
para adicionar à página quais imagens devem ser inseridas se precisarmos fazer uma inscrição e botão de bloqueio ou botão de saída.
Então, esta é toda a lógica escrita em Python em
Tudo isso é feito na parte de trás e nesta parte do diagrama e, em seguida, envia de volta
h tim L C S S e Javascript.
Então, aqui está a pilha que vamos aprender.
Nós vamos usar o nó j.
Sim.
Então, ainda estaremos escrevendo javascript, mas nós vamos escrever isso no backend.
Nós vamos usar um framework chamado Express e também usaremos o Mangu DBI como nosso banco de dados.
E então, claro, também teremos h t m l c s s e Javascript, como nós usamos
nas últimas unidades.
Então, agora, neste momento do curso, você pode se considerar um desenvolvedor de front-end ou um desenvolvedor de
front-end em treinamento onde cobrimos tudo o que você precisa saber para começar a fazer
a frente dos sites.
Agora, vamos começar a falar de volta no desenvolvimento da web e, uma vez que trazemos esses dois juntos para o final do curso,
sempre que escrevendo o código do lado do servidor com o Express A. J. Como o Mongo D-B, temos o login
do usuário, mas também estamos escrevendo o javascript do lado do cliente ou da frente.
H Tim L e C Ss.
Isso é o que chamaríamos de desenvolvimento web completo.
O desenvolvimento de web full stack completo refere-se ao código de escrita em todas as partes da pilha, a parte traseira
e a frente.
Aqui está um diagrama de algumas das funcionalidades que podemos implementar na cesta.
o Reddit como um exemplo novamente você pode ver que temos características como verificar se o usuário está logado inscrever
um usuário adicionar uma nova postagem ao banco de dados criar um novo comentário remover uma postagem do banco de dados classificar e
classificar as postagens criar um novo sub Reddit adicione um assinante ao boletim e salve isso no banco de dados.
E isso está usando
E o mais importante, claro, é descobrir o que cada equipe verá em javascript para enviar de volta
para o usuário que é enviado de volta.
Atravessando esta linha azul, onde agora vamos ao front-end que H. M. S. assassins e Javascript são enviados
de volta para mim e então vejo isso no meu navegador.
Eu tenho um diagrama mais aqui que também fala sobre front-end versus back-end, mas é formatado de
forma ligeiramente diferente.
Este diagrama mostra a seqüência de eventos entre front-end e back e ao longo de algumas cargas de páginas.
Então, no front-end, se eu for ler ele com ponto e atualizar.
Estou enviando um pedido para a página inicial Reddit e então isso é para lê-lo.
Esse pedido o torna no servidor e o servidor vê que estou pedindo a página inicial.
Então, há alguma lógica do lado do servidor que agarra a primeira publicação do banco de dados e faz todo o tempo LNC
SS e javascript que eu vejo aqui e, em seguida, envia isso de volta para mim, o que eu vejo no meu navegador.
O próximo passo é que eu poderia digitar algo em uma caixa de pesquisa como cães que eu vou fazer agora, digite
cães aqui e pressione enter.
acertar, digite uma nova solicitação é enviada de volta ao servidor Reddit desta vez dizendo que estou procurando por cães.
E quando eu
Então, o servidor tem alguma lógica que leva meus cachorros de pesquisa e encontra todas as postagens que combinam esse termo
no banco de dados e, em seguida, faz-me uma idade nova masculina avaliar em javascript para a página de resultados do cão
e depois envia isso de volta para mim .
E então o meu navegador o processa e vejo isso, é uma versão muito simplificada, obviamente.
Há muito mais acontecendo nos bastidores e Reddit estará realmente criando nossa própria versão
de um aplicativo muito parecido para lê-lo.
Uma vez que aprendemos mais sobre Express e conheça J. S. e Mongo DB E estaremos fazendo uma aplicação de stack cheio.