Arquivo de Web Design - Página 5 de 7

Trataremos neste post de Back-End e Front-End:

Back-End

No back-end, você trabalhará basicamente com bases de dados, SQL, APIs, segurança de dados e programação na linguagem do framework. No nosso caso de estudo, utilizaremos o Flask e a linguagem Python. Dessa forma, você entenderá como construir aplicações robustas.

O objetivo é ter uma base de dados centralizada para atender todos os usuários. Assim, garantimos a integridade e a organização das informações.

Exemplo de Back-End:

Consultar, salvar, editar ou remover informações em uma base de dados única é essencial para a gestão de dados. Além disso, a automação desses processos facilita a escalabilidade.

Se estivermos falando de microserviços, podemos pensar em uma base de dados simples ou no acesso a módulos e funções Python por meio de APIs. Consequentemente, isso permite maior flexibilidade e desempenho em aplicações complexas.

Um exemplo de microserviço é um aplicativo de rota de veículos. Cada veículo compartilha sua localização em intervalos de tempo constantes. O servidor com essas informações pode calcular a velocidade média dos veículos e informar a todos onde o fluxo está lento. Neste caso, será um microserviço se o processamento ocorrer entre vários servidores, cada um com sua função específica. Com os dados pré-processados separadamente por cada servidor, podemos atingir o objetivo final: retornar as informações ao aplicativo de diversos clientes. Portanto, microsserviços permitem maior escalabilidade com máquinas menos robustas, mas exigem uma coordenação eficiente entre as diversas equipes de TI.

Front-End

No front-end, você aprenderá o que chamamos de “Web Design”, que envolve o desenvolvimento de componentes, estrutura das páginas, acessibilidade, design responsivo (adaptável a telas de diferentes dimensões), paleta de cores, identidade visual e UX (experiência do usuário). Para isso, é necessário conhecer HTML, CSS (tratado com Sass ou Styled Components), JavaScript e, possivelmente, TypeScript. Assim, você estará preparado para criar experiências agradáveis para o usuário.

Exemplo de Front-End:

O editor de texto deste site roda JavaScript no computador do cliente, garantindo a segurança dos dados, pois nada sai do computador do cliente. Além disso, essa abordagem melhora o desempenho.

Um exemplo clássico é a validação do preenchimento correto de um formulário de compra. Para habilitar o botão de envio das informações ao servidor, os campos obrigatórios precisam ser preenchidos corretamente. Consequentemente, o tempo de resposta é imediato, pois o computador do cliente orienta o usuário durante o preenchimento do formulário. Se o processamento fosse feito no servidor, o tempo de resposta seria insatisfatório e o servidor ficaria sobrecarregado.

Abordaremos em outros posts sobre Back-End e Front-End.

Referências:

Documentação JavaScript
Tutorial JavaScript

Veremos neste post comentários, variáveis, documentação com JavaScript.

Comentários:

Os comentários desempenham um papel essencial ao melhorar a legibilidade do código, explicando partes relevantes e ajudando outros desenvolvedores a manterem o código, especialmente aqueles que não conhecem o projeto. Por isso, os desenvolvedores consideram os comentários indispensáveis.

Uma linha

// use comentários de uma linha // para anotações curtas e objetivas

1	// use comentários de uma linha // para anotações curtas e objetivas

Várias linhas

/* escreva comentários longos em múltiplas linhas. Isso funciona muito bem para explicações detalhadas. */

1	/* escreva comentários longos em múltiplas linhas. Isso funciona muito bem para explicações detalhadas. */

Eu recomendo que você insira comentários sempre que necessário, descrevendo o propósito de partes mais complexas do código e destacando observações importantes. Dessa forma, os leitores futuros entendem o projeto mais facilmente.

Declaração de variáveis:

Declarar variáveis de maneira adequada constitui uma prática essencial em JavaScript. Você pode fazer isso utilizando var, let e const. Cada uma dessas opções apresenta características específicas que influenciam diretamente o escopo e o comportamento das variáveis no código.

Var

Ao usar var, você define variáveis com escopo de função. Isso significa que elas permanecem acessíveis em qualquer parte da função onde foram declaradas, mesmo fora de blocos delimitados por chaves. No entanto, você deve ter cuidado com o hoisting, pois ele pode gerar comportamentos inesperados.

if (true) {
    var x = 10;
}
console.log(x); // 10

if (true) {

var x = 10;

}

console.log(x); // 10

Let

Quando utilizamos let, o escopo da variável se restringe ao bloco onde foi declarado. Esse comportamento contribui para evitar conflitos e diminui os erros causados por sobreposição de variáveis.

if (true) {
    let y = 20;
}
console.log(y); // ReferenceError: y is not defined

if (true) {

let y = 20;

}

console.log(y); // ReferenceError: y is not defined

Declaração de constantes:

Const

Constantes declaradas com const possuem escopo de bloco, da mesma forma que let. No entanto, ao contrário das variáveis, seu valor não pode ser alterado após a inicialização. Isso as torna particularmente úteis para armazenar valores fixos durante a execução do programa.

if (true) {
    const y = 20;
}
console.log(y); // ReferenceError: y is not defined

if (true) {

const y = 20;

}

console.log(y); // ReferenceError: y is not defined

Como saber o browser do usuário:

O navegador utilizado desempenha um papel importante na forma como o conteúdo é exibido. Por exemplo, o formato de imagem WebP é extremamente eficiente e promissor. Contudo, nem todos os navegadores oferecem suporte a ele. Assim, para proporcionar a melhor experiência ao usuário, identificar o navegador em uso e adaptar o conteúdo é uma estratégia útil.

/**
 * Identifica o navegador utilizado pelo cliente com base no user agent.
 * 
 * @returns {string} O nome do navegador identificado. Retornos possíveis:
 * - "Chrome": Caso o user agent indique o navegador Chrome.
 * - "Firefox": Caso o user agent indique o navegador Firefox.
 * - "Safari": Caso o user agent indique o navegador Safari.
 * - "Internet Explorer": Caso o user agent indique o navegador Internet Explorer.
 * - "Edge": Caso o user agent indique o navegador Edge.
 * - "Outro": Quando o navegador não for identificado pelos critérios acima.
 * 
 * @example
 * // Exemplo de uso:
 * const navegador = getBrowser();
 * console.log(navegador); // Pode retornar "Chrome", "Firefox", etc.
 */
function getBrowser() {
    const userAgent = navigator.userAgent;
    if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
    } else if (userAgent.indexOf("Firefox") > -1) {
        return "Firefox";   
    } else if (userAgent.indexOf("Safari") > -1) {
        return "Safari";   
    } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
        return "Internet Explorer";
    } else if (userAgent.indexOf("Edge") > -1) {
        return "Edge";
    } else {
        return "Outro";
    }
}

/**

* Identifica o navegador utilizado pelo cliente com base no user agent.

* @returns {string} O nome do navegador identificado. Retornos possíveis:

* - "Chrome": Caso o user agent indique o navegador Chrome.

* - "Firefox": Caso o user agent indique o navegador Firefox.

* - "Safari": Caso o user agent indique o navegador Safari.

* - "Internet Explorer": Caso o user agent indique o navegador Internet Explorer.

* - "Edge": Caso o user agent indique o navegador Edge.

* - "Outro": Quando o navegador não for identificado pelos critérios acima.

* @example

* // Exemplo de uso:

* const navegador = getBrowser();

* console.log(navegador); // Pode retornar "Chrome", "Firefox", etc.

function getBrowser() {

const userAgent = navigator.userAgent;

if (userAgent.indexOf("Chrome") > -1) {

return "Chrome";

} else if (userAgent.indexOf("Firefox") > -1) {

return "Firefox";

} else if (userAgent.indexOf("Safari") > -1) {

return "Safari";

} else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {

return "Internet Explorer";

} else if (userAgent.indexOf("Edge") > -1) {

return "Edge";

} else {

return "Outro";

}

Identificar o navegador do usuário é um passo fundamental para adaptar o conteúdo de forma eficaz. Isso garante compatibilidade e oferece uma experiência aprimorada, independentemente do dispositivo ou navegador utilizado pelo cliente.

Criar a Documentação JavaScript

Para documentar seu código JavaScript de forma eficiente e padronizada, você pode recorrer à poderosa biblioteca JSDoc. Essa ferramenta facilita a criação de uma documentação clara e bem estruturada para o seu projeto.

Os comentários no exemplo acima servem como base para desenvolver uma documentação completa. Para que a documentação seja realmente útil, é essencial comentar todas as funções, classes, variáveis globais e constantes do código.

Ao comentar funções, não se esqueça de incluir informações como os parâmetros recebidos (@param), o tipo de retorno (@returns) e exemplos claros de uso (@example). Dessa forma, você esclarece o funcionamento do código de maneira detalhada e prática.

Instale o JSDoc com:

npm install jsdoc -g

1	npm install jsdoc -g

Esse comando instalará o JSDoc globalmente, permitindo que você o utilize em qualquer projeto JavaScript sempre que necessário.

Gere a documentação com:

npx jsdoc src -d docs

1	npx jsdoc src -d docs

Com este comando, você analisa o código no diretório src, processa os comentários JSDoc e gera uma documentação em HTML no diretório docs. Certifique-se de que os comentários no código estejam bem estruturados e informativos, já que eles são convertidos diretamente no conteúdo da documentação.

Seguindo essas etapas, você cria uma documentação profissional, que facilita a compreensão do código e apoia a manutenção por outros desenvolvedores no futuro.

Referências:

Documentação JSDoc

livros sobre JavaScript

Interno:

Área de Convivência