Semântica, performance e boas práticas no código Front-end

Nas linguagens que utilizamos para o desenvolvimento Web, devemos considerar sempre um código semântico e, ao mesmo tempo, com boa performance. Além disso, ele precisa ser legível para que todos consigam compreendê-lo facilmente e aprimorá-lo futuramente conforme as necessidades.

No desenvolvimento de um site, precisamos utilizar várias tecnologias para tudo funcionar.

Estamos considerando que você sabe a diferença entre Front-end e Back-end (se você não sabe e tem interesse em saber, clique aqui), pois esse post é voltado para o código Front-end em si.

Vale ressaltar que alguns conceitos valem não somente para o Front-end, mas também para linguagens de programação, porém a aplicação desses conceitos aqui é demonstrada no Front-end. Então, vamos lá!

Adote HTML5 e CSS3 (hoje mesmo)

Aqui na Tecmedia, adotamos o HTML5 e CSS3, tendo em vista que são tecnologias atuais e já podemos adotá-las sem medo (se você não acredita, clique aqui para ver como é simples atualizar para o HTML5 sem perder a compatibilidade dos browsers). Só para enfatizar: o Internet Explorer 8 não suporta o HTML5, porém foi desenvolvido um script que resolve isso.

Recomendo fortemente que esse script não seja utilizado, pois a porcentagem de pessoas que ainda acessam sites através do navegador, é muito pequena (cerca de 1% no mundo), e se não utilizarmos esse script estaremos fazendo um bem pela web, pois se quem usa não conseguir acessar vários sites corretamente, ela acabará vendo que a raiz de todo o mal não é o site e sim o navegador.

Ao utilizar HTML5 e CSS3 é preciso tomar cuidado com a compatibilidade entre browsers, pois ambos possuem propriedades mais novas e ainda com pouco suporte. Mas isso, de maneira alguma, deve ser um impedimento para utilizá-las, pois existe um conceito chamado Progressive Enhancement, para saber mais:

O conceito de progressive enhancement define que a construção de uma página parte de uma base comum e garantida de executar nos mais diversos navegadores para depois acrescentar pequenas melhorias mesmo que só funcionem em navegadores modernos.

Se alguma dessas melhorias não for suportada pelo navegador, o usuário ainda assim conseguirá acessar o website, mesmo que tenha sua experiência reduzida. (Fonte: Blog da Caelum)

Semântica e performance com HTML5

Um fator muito importante no nosso código é a semântica (não somente para Front-end). No HTML5, a semântica não é interessante somente para facilitar a leitura do código para outros desenvolvedores, como também é extremamente importante para o SEO (Search Engine Optimization).

A Google, empresa responsável pelo maior indexador de sites da atualidade, se importa muito com um bom código atual e semântico, de forma que os sites antigos sem HTML5 já estão perdendo espaço nos resultados, por possuírem código ruim e/ou desatualizado.

Com as novas tags do HTML, a semântica foi aprimorada, sendo assim elas devem ser utilizadas. Veja aqui uma lista com as novas tags e as que continuam valendo das outras versões.

É necessário saber o propósito de cada uma delas para utilizá-las no local correto. Além da semântica, o HTML5 traz também maior performance, um elemento novo que diminui consideravelmente o tempo de carregamento de um site é o “<picture>”.

Tal tag serve para definirmos diversas imagens com tamanhos diferentes, para que sejam utilizadas no mesmo local, mas para diferentes resoluções de tela. Uma notícia muito boa é que ela já pode ser utilizada (veja aqui um exemplo), sendo que na sintaxe do HTML é definida uma imagem fallback (para navegadores antigos, essa será mostrada em qualquer resolução de dispositivos).

Na maioria dos browsers, a performance não irá mudar, sendo que hoje somente o Chrome e o Opera suportam a novidade, mas implementando isso deixará nosso código preparado para o futuro (e para quem usa o Chrome hoje).

Utilização de novas propriedades e boas práticas com CSS3

Antigamente, quando se iam construir os elementos visuais para novos projetos, era comum o uso de imagens para simular botões (por exemplo), assim como outras coisas. Quando se pensava em animações, o Flash já estava pronto para cuidar do trabalho.

Mas, estamos em 2015, então nada de imagens que não são imagens e animações com Flash, pois o CSS3 já está aí para acabar com tudo isso e fazer nosso código ficar mais limpo, performático e elegante (muito mais).

Assim como acontece com o HTML5, o CSS3 possui muitos elementos sem suporte a browsers antigos (como o já mencionado IE8), mas na grande maioria dos casos, não é preciso nem mesmo dar fallback a elementos. Um exemplo disso é o “border-radius” (propriedade que deixa elementos com bordas arredondadas).

Você talvez esteja se perguntando: “Tá, mas então ele funciona no IE8?”. É claro que não! Mas, e daí? O que vai acontecer se alguém abrir o site com esse navegador, é que os cantos do elemento não irão ficar arredondados, mas ele funcionará normalmente.

Para animações, o CSS3 traz grandes e empolgantes atualizações, tais como o canvas (do HTML5) e CSS animations. Grandes empresas já largaram o Flash há um tempo e adotaram essas tecnologias modernas, um exemplo é a Apple, que foi bastante radical nesse assunto, abolindo ele completamente de seus dispositivos (veja aqui). Apesar de radical, é uma atitude que devemos levar de exemplo, para um futuro melhor!

 

Espero que esse post tenha lhe trazido novidades e/ou ajudado em algo. Se você é desenvolvedor web, espero que coloque em prática tudo o que já está disponível para nós hoje, assim construiremos o futuro, hoje.