DEV Community

Cover image for Arquitetura e Desenvolvimento Front-end: mais próximos do que você imagina
Angela Caldas
Angela Caldas

Posted on

Arquitetura e Desenvolvimento Front-end: mais próximos do que você imagina

É evidente o quanto a tecnologia está cada vez mais arraigada ao nosso dia a dia: da comunicação com parentes e amigos até planejamento financeiro e transações bancárias, tudo hoje pode ser feito através de um celular ou computador. E nos últimos anos, após a pandemia de COVID-19, o nosso relacionamento com a tecnologia se provou essencial.

Foi nesse contexto que percebi que, após pouco mais de uma década atuando como arquiteta com foco na construção civil, eu precisaria de um plano B para minha carreira. E esse plano B estava na tecnologia.

Como eu esbarrei no front-end

Meu primeiro passo foi pesquisar localmente qual tipo de tecnologia ou área de desenvolvimento oferecia mais oportunidades de trabalho. Descobri que, por aqui, o foco era back-end com Java. Porém, na semana seguinte, soube de um evento gratuito da Alura, totalmente voltado para iniciantes na área e com foco em lógica de programação com JavaScript. A tempo: eu já tinha algum conhecimento em desenvolvimento para a web, mas ainda achava que Java e JavaScript eram a mesma coisa (quem nunca?) e pensei: era a oportunidade que eu precisava!

Durante o evento, descobri que eram coisas bem diferentes. Porém, se não fosse esse “passo em falso”, eu não teria esbarrado com o fantástico mundo do front-end! Desenvolvemos algumas aplicações bem simples, no Codepen mesmo, mexi nas interfaces recebidas, estilizei algumas coisas à minha maneira e eu soube que era aquilo que eu queria aprender, de fato. E assim, despretenciosamente, meu plano B virou plano A.

Mas, enfim, o que faz um arquiteto?

arquiteto projetando em um notebook

A gente também passa a maior parte do dia na frente do computador.

Qual a primeira coisa que vem à sua mente quando você pensa na arquitetura? Aposto que sua mente borbulha de imagens de prédios mirabolantes e interiores meticulosamente decorados e mobiliados. Mas você já parou para pensar no que há por trás de tudo isso?

Muito mais do que o espaço em si, a Arquitetura, em um conceito bem simplificado, é a relação entre o homem e o espaço. Ou seja, é a maneira que interferimos no espaço para criar condições funcionais e estéticas favoráveis para ele, seja habitação, comércio, lazer.

“A forma segue a função.” — Arquiteto Louis H. Sullivan, 1896

A máxima acima proferida por Sullivan reflete esse pensamento. A função — ou propósito — de um espaço ou edifício deve ser o pontapé inicial de seu design. Dentre as funções de um arquiteto está saber pesquisar, investigar e identificar as reais necessidades do cliente e projetar o ambiente de acordo, mantendo o espaço adequado às atividades que ali serão desenvolvidas, mas também o deixando agradável e confortável. Anos depois, para fortalecer esse pensamento, o aprendiz de Sullivan, o famoso arquiteto Frank Lloyd Wright, estendeu seu entendimento da frase acima como “forma e função são um só”.

Onde a arquitetura encontra o front-end

computador em uma mesa com código na tela

O front-end é a vertente da programação voltada para aquilo que o usuário vê, também chamado de client-side. Tudo que você enxerga em uma página da web ou um aplicativo mobile, desde a logo até a última linha do rodapé, é o desenvolvedor front-end que constrói. E assim como acontece com os arquitetos, a primeira coisa que muita gente pensa quando ouve falar do front-end é a estética da página ou da aplicação.

Mas esse é apenas um traço das similaridades. Além da estética, a organização dos elementos na página e o código por trás daquilo tudo deve existir de forma que atenda a um propósito, proporcionando ao usuário uma boa experiência também funcional.

No tratado De Architectura, Marcus Vitruvius (90–20 BC) nos fala sobre os três pilares da arquitetura: utilitas, firmitas e venustas — representando funcionalidade, solidez e beleza, respectivamente. Que tal traçarmos alguns paralelos entre as duas disciplinas?

A beleza (venustas) da aplicação é, naturalmente, o primeiro aspecto que notamos em ambas as áreas: um aplicativo ou página web, assim como uma edificação, num primeiro momento chama a atenção por sua beleza (ou a ausência dela) — seus acabamentos, cores e volumes, sua elegância ou casualidade.

E assim como na arquitetura, o visual de um site ou aplicação não é feito por mero capricho, mas é elaborado a partir de um conjunto de pesquisas e estudos visando tanto uma comunicação entre produto/consumidor quanto conforto visual através da paleta de cores, fontes e contrastes (e aqui entram também os Designers UX/UI).

A funcionalidade (utilitas) é onde o desenvolvedor front-end deve ter o seu forte. Assim como na arquitetura, em que projetamos espaços organizados de forma a garantir a melhor experiência do usuário de acordo com a função do ambiente, um bom desenvolvedor deve garantir que a aplicação funcione plenamente, de forma fluida, com boa performance, sem travamentos e erros, atendendo ao propósito que lhe foi dado.

E aqui entramos também em um outro ponto que podemos acrescentar nessa relação: a acessibilidade. Mesclando conhecimentos técnicos do código a ser desenvolvido, bem como conceitos estéticos, o desenvolvedor é capaz de criar sites e aplicações dentro do conceito de desenho universal.

Na arquitetura, o conceito do Desenho Universal “tem como pressupostos: equiparação das possibilidades de uso, flexibilidade no uso, uso simples e intuitivo, captação da informação, tolerância ao erro, mínimo esforço físico, dimensionamento de espaços para acesso, uso e interação de todos os usuários.” — ABNT 9050:2020

Um site bem desenvolvido também deve ser acessível a todos os usuários, sem distinção. Quando o código de sua página é semanticamente bem escrito, utilizando as tags HTML da forma apropriada e com o auxílio dos atributos WAI-ARIA, com bons contrastes de cores, fontes e áreas de toques bem dimensionadas, você já andou um excelente caminho rumo a uma página mais acessível dentro do desenho universal, além de melhorar o SEO.

Já a solidez (firmitas) na arquitetura diz respeito aos elementos construtivos, à escolha de sistemas estruturais, envoltórios físicos, tipo de tecnologia empregada e qualidade nos materiais utilizados. No aspecto do desenvolvimento front-end, podemos trazer esse conceito para a solidez do seu código, algo que você vai desenvolver com a experiência.

Um código sólido pode ser entendido como um código bem escrito e dentro das boas práticas da programação para a linguagem escolhida; de fácil entendimento para que terceiros possam compreender facilmente sua lógica, facilitando a manutenção e escalabilidade (a capacidade de um código “crescer” e ainda assim continuar entendível e administrável). Em resumo: um Código Limpo.


No fim das contas, se pararmos para comparar uma edificação construída e uma aplicação completa, existem vários outros paralelos que podem ser feitos. A construção de uma edificação é multidisciplinar: nós, arquitetos, somos o front-end conforme explanado neste artigo; as instalações hidráulicas, elétricas e de sistemas seriam o back-end da aplicação, fornecendo os recursos necessários pra que toda aquela estrutura, funcione da forma que foi planejada; as melhorias e a manutenibilidade da edificação seria a equipe de DevOps, buscando sempre a qualidade e melhor performance da aplicação para seus usuários.

No fim, existem diversas correlações que aqui podem ser feitas entre duas áreas que, num primeiro momento, não teriam nada a ver uma com a outra. Se você deseja fazer uma transição de carreira para a área da tecnologia, tenho certeza que, independente do setor do qual você está vindo, você vai ver similaridades e trazer conhecimentos e experiências relevantes para sua nova trajetória.

Como diria Antoine-Laurent de Lavoisier, “nada se cria, nada se perde, tudo se transforma”.

Top comments (0)