JavaScript: de padrões a uma abordagem funcional

Organização inicial do projeto e primeira atividade - Visão geral do curso

Olá, meu nome é Flávio Almeida, e apresento a vocês o botão azul. Isso mesmo: este curso inteiro girará em torno deste botão que, ao ser clicado, acessará uma API Web, e entre sua apresentação e a busca dos dados, lidaremos com Promise e implementaremos um mecanismo de Retry, setTimeout, Delay.

Além disso, teremos que interagir de maneira um pouco diferente com o usuário, já que ele terá um número limite de cliques no botão, e de tempo para tal. Iremos organizar o código por meio de composição de funções, na qual introduziremos mônadas, ou seja, precisaremos lidar mais e melhor com este paradigma funcional para aplicá-lo no programa.

Ainda, desacoplaremos o código trabalhando com barramento de eventos, aplicando padrão de projeto Publish-subscribe, tudo neste botão. Embora pareça um exagero, tudo isso pode acontecer com você no projeto em que estiver trabalhando, e o mais importante é que você conseguirá pinçar cada técnica aprendida e utilizar em seu projeto, com JavaScript puro, quando necessário.

Organizaremos nosso código em módulos usando um sistema nativo de módulos do Google Chrome, algo que será vigente nos navegadores do mercado, e que estamos antecipando aqui. Antes de começarmos, porém, é recomendado fazer o exercício obrigatório desta aula, com os pré requisitos de infraestrutura, e o que mais você precisará saber antes de dar seguimento ao curso.

Estando tudo no lugar, e bem feito, vamos começar!

Organização inicial do projeto e primeira atividade - Projeto e sua estrutura

Com o projeto descompactado, vamos entrar na pasta project e subir o servidor através do comando:

node server

Lembre-se da dica da atividade anterior na qual alguns sistemas Linux usam o binário nodejs no lugar de node. Se este for o seu caso, suba o servidor através do comando nodejs server.

Como foi explicado na atividade de download e infraestrutura, será exibido no console a mensagem

Server is running at http://localhost:3000

A página principal do projeto

Vamos acessar o endereço http://localhost:3000 que exibirá uma página padrão já criada que exibe um título e um botão.

Ela possui a seguinte estrutura:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <title>Notas Fiscais</title>
</head>
<body class="container">
    <h1 class="text-center">Notas Fiscais</h1>
    <div class="text-center">
        <button id="myButton" class="btn btn-primary">Buscar</button>
    </div>
</body>
</html>

Este arquivo fica dentro da pasta project/public. Aliás, todos os arquivos estáticos do projeto ficam nessa pasta, inclusive os arquivos do Boostrap que utilizaremos para aplicar um visual profissional em nossa aplicação com pouco esforço.

Organização inicial do projeto e primeira atividade - Organizando o código em módulos

Para esquentar os neurônios, nossa primeira tarefa será buscar uma lista de notas fiscais da API REST disponibilizada pelo servidor do projeto que baixamos através do endereço http://localhost:3000/notas. Porém, antes de pensarmos no código que escreveremos, precisamos primeiro pensar em como organizaremos nosso código. Sem sombra de dúvidas, vamos organizá-lo em módulos. Porém, como faremos o carregamento deles em nosso navegador?

Suporte nativo de módulos do ES2015 (ES6) nos navegadores

A partir do ES2015 (ES6) foi introduzido um sistema de módulos padrão na linguagem caracterizado pelo uso da sintaxe import e export. Todavia, por haver divergências sobre como implementar o carregamento de módulos nos navegadores essa parte não foi especificada jogando a responsabilidade do carregamento no colo de bibliotecas e pré-processadores JavaScript. No entanto, a polêmica sobre o carregamento de módulos parece estar chegando ao fim.

Versões mais recentes do Google Chrome já suportam o carregamento nativos de módulos através da tag <script type="module">. Outros navegadores começaram a implementar este recurso também.

Partiremos do princípio que o aluno já conhece o sistema de módulos do ES2015, pois focaremos apenas na estratégia de seu carregamento pelo navegador, aliás, primeira novidade aqui. Caso o aluno queira saber mais sobre o sistema de módulos do ES2015 e como suportá-lo em diversos navegadores através de um processo de compilação, ele pode consultar o curso JavaScript Avançado - Parte 3.

Criando e carregando o módulo principal da aplicação

Vamos criar o módulo principal da aplicação app.js dentro da pasta public/app. Todos os arquivos que escreveremos ficarão dentro da pasta app. Por enquanto ele não terá dependência de nenhum módulo, mas quando houver, o navegador será inteligente para baixa-lo para nós, sem termos a necessidade de importá-lo através da tag <script>.

Nosso módulo associará um evento clique ao único botão que existe na página. Por enquanto exibiremos apenas um alerta para o usuário toda vez que o botão for clicado:

// public/app/app.js

document
.querySelector('#myButton')
.onclick = () => alert('oi');

Através da propriedade onclick do elemento e com auxílio de arrow function temos um código mais terso.

Agora, vamos realizar o carregamento do módulo através da tag <script type="module">:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <title>Notas Fiscais</title>
</head>
<body class="container">
    <h1 class="text-center">Notas Fiscais</h1>
    <div class="text-center">
        <button id="myButton" class="btn btn-primary">Buscar</button>
    </div>

    <script type="module" src="app/app.js"></script>
</body>
</html>

Porém, a importação de um módulo só funcionará se estivermos acessando a aplicação através de um servidor web e não diretamente pelo sistema de arquivo. É dessa forma porque o sistema de módulos do navegador realizará requisições Ajax para carregar nosso módulo. Sendo assim, tenha certeza de estar acessando nossa página através do endereço http://localhost:3000.

Sobre o curso JavaScript: de padrões a uma abordagem funcional

O curso JavaScript: de padrões a uma abordagem funcional possui 156 minutos de vídeos, em um total de 74 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Organização incial do projeto e primeira atividade
Adequação dos dados recebidos
Composição de funções
Adequação da interação do usuário
Lidando com problemas na rede
O pattern Publisher/Subscriber
Monadas

Aprenda JavaScript acessando integralmente esse e outros cursos, comece hoje!

R$ 1.800

12X

R$109

à vista R$1.308

Acesso a TODOS os cursos da Alura
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.

R$ 2.400

12X

R$149

à vista R$1.788

Acesso a TODOS os cursos da Alura
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Luri, a inteligência artificial da Alura
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.
Alura Língua (incluindo curso Inglês para Devs)
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.