Arquitetura e Desenvolvimento Front-end: mais próximos do que você imagina
Tags: career, frontend, beginners, braziliandevs
Published: 2023-02-16 16:46:47

É 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](https://www.alura.com.br/), 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?

<figure>
![arquiteto projetando em um notebook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w60pwxm2mde1w1x5lvnc.jpg)
<figcaption>A gente também passa a maior parte do dia na frente do computador.</figcaption>
</figure>
>

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 <mark>condições funcionais e estéticas favoráveis</mark> 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ó”](https://www.guggenheim.org/teaching-materials/the-architecture-of-the-solomon-r-guggenheim-museum/form-follows-function).

### Onde a arquitetura encontra o front-end

![computador em uma mesa com código na tela](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bddod0oer44gldle8sex.jpg)

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_](https://www.ebad.info/vitruvius), 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 <mark>**beleza**</mark> (_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 <mark>**funcionalidade**</mark> (_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 <mark>**acessibilidade**</mark>. 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_](https://www.w3.org/Translations/WCAG20-pt-br/), 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_](https://www.w3.org/Translations/WCAG20-pt-br/).

Já a <mark>**solidez**</mark> (_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](https://www.sydle.com/br/blog/clean-code-602bef23da4d09680935509b/).

---

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 é <mark>**multidisciplinar**</mark>: 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”_.