O que é front-end?

Front-end e back-end são partes in­de­pen­den­tes, porém com­ple­men­ta­res, de um software. Se com­pa­rar­mos um software a um res­tau­rante, podemos dizer que o front-end inclui elementos como a fachada, as mesas, as cadeiras, o cardápio e a equipe de aten­di­mento. O back-end, por sua vez, seria a cozinha o de­par­ta­mento ad­mi­nis­tra­tivo do res­tau­rante, res­pon­sá­veis pela operação dele e ina­ces­sí­veis aos con­su­mi­do­res.

O que compõe o front-end?

Front-end é a interface gráfica do usuário de um site ou aplicação, ou seja, ela é a parte do software feita para ser operada pelos usuários. Pode-se afirmar, então, que o front-end é voltado às ne­ces­si­da­des e ex­pec­ta­ti­vas dos humanos, estando entre suas pri­o­ri­da­des exibir in­for­ma­ções de forma atrativa e pos­si­bi­li­tar in­te­ra­ções in­te­li­gí­veis. Ainda, o front-end deve ter foco em pro­por­ci­o­nar uma boa ex­pe­ri­ên­cia do usuário (UX).

O front-end é também a parte do software executada no cliente. De aparência mais simples, ele não revela o complexo pro­ces­sa­mento de in­for­ma­ções que ocorre na “parte de trás”, o back-end. Em segundo plano, por meio de uma interface de pro­gra­ma­ção de apli­ca­ções (API), o front-end se comunica com o back-end a todo tempo, para sin­cro­ni­zar dados e refletir as devidas al­te­ra­ções.

Porque respeitam o princípio de pro­gra­ma­ção da separação de in­te­res­ses, front-end e o back-end são con­si­de­ra­dos partes in­de­pen­den­tes. No entanto, ambos são igual­mente ne­ces­sá­rios para que um software funcione ple­na­mente. Sem o back-end, o front-end não passa da fachada de uma casa que não possui nada no seu interior.

Quem pode acessar o front-end?

Dois grupos de pessoas acessam o front-end de um site ou aplicação:

1. Usuários, que interagem com o software pelo front-end.
2. De­sen­vol­ve­do­res front-end, para criar e manter o front-end do software.

A seguir ex­pli­ca­re­mos, em mais detalhes, o papel de cada um desses grupos de pessoas que acessam o front-end.

Quais são os papéis dos usuários no front-end?

Vi­si­tan­tes de sites navegam por suas sub­pá­gi­nas, por meio de links. Eles consomem conteúdo em forma de texto, acessam outros tipos de mídia, e interagem com botões e outros elementos, como com for­mu­lá­rios HTML, menus suspensos e campos de inserção de in­for­ma­ções.

Usuários de apli­ca­ções fazem o mesmo: eles também acessam as fun­ci­o­na­li­da­des de um software e interagem com ele por meio dos botões e de outros elementos dis­po­ni­bi­li­za­dos. Assim como em sites, o escopo das in­te­ra­ções de apli­ca­ções é limitado e leva a caminhos bem definidos. Ex­cep­ci­o­nal­mente, usuários de certos softwares obtém mais liberdade, podendo criar conteúdo próprio.

Quais são os papéis dos de­sen­vol­ve­do­res no front-end?

Usuários usam o front-end de forma limitada, o que não ocorre com de­sen­vol­ve­do­res, pro­fis­si­o­nais que trabalham com a criação, a ma­nu­ten­ção e o apri­mo­ra­mento do front-end de um site ou aplicação. Eles costumam atuar lado a lado com designers, já que oferecer um produto com um web design fácil de usar está entre as pri­o­ri­da­des de ambos.

Mas, o que exa­ta­mente de­sen­vol­ve­do­res front-end fazem? Para res­pon­der­mos a essa pergunta, vamos tomar como exemplo o sistema de ge­ren­ci­a­mento de conteúdo (CMS) WordPress. Lá, de­sen­vol­ve­do­res front-end criam widgets para WordPress, assim como temas para WordPress, para tornar os sites mais atrativos.

Graças a temas criados e mantidos por de­sen­vol­ve­do­res front-end, di­fe­ren­tes tipos de conteúdo podem ser in­te­gra­dos com fluidez e es­tru­tu­ra­da­mente em um site, ga­ran­tindo a con­sis­tên­cia deste. Ainda, de­sen­vol­ve­do­res front-end podem criar landing pages com elementos de call to action (CTA) para guiar vi­si­tan­tes e convidá-los a uma ação. Além disso, o design res­pon­sivo também constitui um elemento im­por­tante da pro­gra­ma­ção front-end.

Quais são os fra­meworks mais im­por­tan­tes para o front-end?

O front-end de um software é exibido aos usuários por meio do dis­po­si­tivo (cliente) utilizado. Apesar de termos de dis­tin­guir o front-end web, criado para ser exibido por na­ve­ga­do­res, do front-end nativo, criado para rodar em um sistema ope­ra­ci­o­nal es­pe­cí­fico, métodos de de­sen­vol­vi­mento modernos e mul­ti­pla­ta­forma permitem que front-ends para di­fe­ren­tes dis­po­si­ti­vos com­par­ti­lhem uma mesma base.

As lin­gua­gens mais comumente uti­li­za­das em front-ends web incluem HTML, CSS e Ja­vaS­cript. Essas cor­res­pon­dem aos três elementos fun­da­men­tais da pro­gra­ma­ção web:

Te­o­ri­ca­mente, qualquer front-end pode ser criado uti­li­zando-se somente essas três lin­gua­gens web. Na prática, contudo, fazer isso dá muito mais trabalho, já que fra­meworks para front-end existem jus­ta­mente para sim­pli­fi­car processos de de­sen­vol­vi­mento.

Os inúmeros fra­meworks para front-end oferecem di­fe­ren­tes recursos e be­ne­fí­cios que se adequam a cenários es­pe­cí­fi­cos. Eles ampliam pos­si­bi­li­da­des de aplicação de lin­gua­gens web, facilitam a interação com o back-end e asseguram a con­sis­tên­cia do fun­ci­o­na­mento do software em di­fe­ren­tes sistemas e na­ve­ga­do­res.

Fra­meworks mais modernos, como o React e o Vue, têm foco na re­a­ti­vi­dade, fazendo com que al­te­ra­ções nos dados sejam re­fle­ti­das ime­di­a­ta­mente no front-end — com­po­nen­tes (elementos de UI reu­ti­li­zá­veis e in­de­pen­den­tes) são es­sen­ci­ais para esses fra­meworks.

A depender da sua ne­ces­si­dade, você pode se be­ne­fi­ciar de fra­meworks para front-end CSS ou Ja­vaS­cript puros. Fra­meworks para front-end web e opções mul­ti­pla­ta­forma também estão entre as opções dis­po­ní­veis.

Front-end baseado em com­po­nen­tes com fra­meworks reativos

Fra­meworks para front-end em Ja­vaS­cript são voltados a com­po­nen­tes reativos e feitos sob medida. Esses com­po­nen­tes combinam estrutura, aparência e com­por­ta­mento para se adaptarem au­to­ma­ti­ca­mente às mudanças dos dados sub­ja­cen­tes. Por exemplo, se você excluir um dado de um conjunto, a entrada cor­res­pon­dente de­sa­pa­re­cerá da lista, o que fará com que o contador exiba ime­di­a­ta­mente o valor atu­a­li­zado.

Os prin­ci­pais fra­meworks reativos para front-end são Angular e React. Ex­tre­ma­mente complexos, ambos podem ser usados para criar apli­ca­ções de página única ou mais so­fis­ti­ca­das. Al­ter­na­tiva a eles é o Vue, framework mais moderno e compacto.

O framework Svelte é um de­sen­vol­vi­mento novo e in­te­res­sante, que adota uma abordagem diferente do React e de seus equi­va­len­tes. Em vez de inventar novas es­tru­tu­ras dentro do Ja­vaS­cript, ele faz uso de um com­pi­la­dor. Este é capaz de trans­for­mar código simples em códigos Ja­vaS­cript mais complexos.

A maioria dos fra­meworks reativos para front-end também sim­pli­fica o trabalho com dados globais, o que é possível graças ao state-store, fer­ra­menta usada para gerenciar o estado de apli­ca­ções de forma cen­tra­li­zada.

Processos de cons­tru­ção separados, que contém um task-runner como Gulp ou Grunt, também podem ser usados para gerar códigos front-end.

Fra­meworks de aplicação para front-end: Os clássicos

Fra­meworks de aplicação para front-end (também chamados de fra­meworks abran­gen­tes) são mais antigos, tendo sido am­pla­mente usado antes do advento dos fra­meworks reativos. O Bootstrap e suas al­ter­na­ti­vas, por exemplo, pa­dro­ni­zam o front-end para que este seja exibido por di­fe­ren­tes na­ve­ga­do­res e sistemas. Fra­meworks do tipo oferecem uma série de com­po­nen­tes prontos para uso, como menus de navegação, ac­cor­di­ons com campos re­co­lhi­dos e barras des­li­zan­tes com imagens animadas.

O que todos os fra­meworks de aplicação têm em comum é o fato de usarem tanto códigos em Ja­vaS­cript quanto em CSS. O ZURB Foun­da­tion, framework de UI compacto, tem como foco a adap­ta­bi­li­dade de apli­ca­ções pro­fis­si­o­nais. O jQuery UI, outro framework Ja­vaS­cript mi­ni­ma­lista, pode ser combinado ao primeiro, para que de­sen­vol­ve­do­res possam se be­ne­fi­ciar das fun­ci­o­na­li­da­des de ambos.

A vantagem de fra­meworks de aplicação para front-end é que eles são in­cri­vel­mente fáceis de usar, bastando, na maioria das vezes, um arquivo CSS ou Ja­vaS­cript. No entanto, se você precisar realizar al­te­ra­ções ou oti­mi­za­ções, a situação se tornará mais complexa, pois combinar partes di­fe­ren­tes desse tipo de framework é uma tarefa um tanto quanto tra­ba­lhosa.

Fra­meworks de interesse único para front-end: Es­pe­ci­a­li­za­dos e compactos

Ao contrário dos fra­meworks para front-end de aplicação, que combinam Ja­vaS­cript e CSS, fra­meworks de interesse único (single-interest) se limitam a uma única linguagem. Foi o Tailwind CSS que es­ta­be­le­ceu esse padrão ao adotar uma abordagem baseada em classes para o de­sen­vol­vi­mento de com­po­nen­tes de front-end com regras de CSS. No Tailwind, classes pre­de­fi­ni­das são uti­li­za­das di­re­ta­mente em elementos HTML para aplicar estilos, em vez de exigir que o usuário escreva o res­pec­tivo código ma­nu­al­mente.

O Alpine JS, por outro lado, outro framework para front-end, é uma fer­ra­menta chave de ma­ni­pu­la­ção de com­por­ta­mento e re­a­ti­vi­dade. Em vez de depender ex­clu­si­va­mente de CSS, ele utiliza trechos de Ja­vaS­cript prontos para uso. Esse framework se descreve como o Ja­vaS­cript uti­li­tá­rio para a web moderna, fazendo re­fe­rên­cia ao clássico framework jQuery.

A principal vantagem dos fra­meworks de interesse único é a sim­pli­ci­dade deles. Ge­ral­mente, eles permitem reduzir a quan­ti­dade de código ao mínimo ne­ces­sá­rio, embora a re­a­li­za­ção de um processo de con­fi­gu­ra­ção separado possa ser ne­ces­sá­ria. Além disso, di­fe­ren­tes partes desse tipo de framework podem ser com­bi­na­das: uma com­bi­na­ção popular é a junção do Tailwind CSS com o Alpine JS.

Fra­meworks mul­ti­pla­ta­forma: Criar múltiplos front-ends de uma só vez

Todos os fra­meworks apre­sen­ta­dos acima são voltados a na­ve­ga­do­res web. Além desses, existem os chamados fra­meworks mul­ti­pla­ta­forma para front-end, uti­li­za­dos para o de­sen­vol­vi­mento de apli­ca­ções nativas. Apli­ca­ções nativas costumam ignoram na­ve­ga­do­res, uma vez que esse tipo de aplicação roda di­re­ta­mente em um sistema ope­ra­ci­o­nal, como no Windows, no macOS, no Android ou no iOS.

Um dos populares fra­meworks mul­ti­pla­ta­forma para front-end é o Flutter, baseado em Dart, a linguagem de pro­gra­ma­ção do Google. Uma interface de usuário de­sen­vol­vida no Flutter pode servir de base para a criação de diversos front-ends, tanto nativos quanto web.

GTK, um framework para front-end nativo, adota uma abordagem parecida. Com ele, você consegue criar front-ends para Linux, Windows e macOS a partir de uma mesma base. Ao contrário do Flutter, o GTK não utiliza tec­no­lo­gias web. No entanto, ele oferece suporte a uma ampla seleção de lin­gua­gens de pro­gra­ma­ção, que podem ser em­pre­ga­das no framework.