Sou aluno do curso de Gestão de TI na Faculdade de Pará de Minas. Em todos os semestres, desenvolvemos um projeto para aplicar os conhecimentos estudados nas disciplinas. Dessa vez, minha equipe decidiu criar uma página para um evento que acontece anualmente na faculdade: o Encontro Gamer de Pará de Minas.

O que começou como um site estático, se tornou uma aplicação Vue que consome conteúdos cadastrados em um CMS desenvolvido em PHP via API.

Nesse post, vou contar um pouco sobre nossa experiência e o que aprendemos no caminho.

Iniciando o projeto

Minha equipe é composta de três membros: eu, Lucas e Eduardo. Somos desenvolvedores. Lucas trabalha comigo, desenvolvendo sistemas para web e Eduardo trabalha desenvolvendo sistemas em Delphi (e tem muita experiência em redes, hospedagem e infra no geral).

A ideia inicial era desenvolver uma landing page estática, exibindo os principais detalhes do evento. Havia pouco tempo para o desenvolvimento, e nossa intenção era deixar o escopo bem reduzido.

Antes de iniciar com código, decidimos repaginar a identidade visual do evento. Foi importante para que pudéssemos incorporar a identidade do projeto na página. Criamos um conceito baseado nas cores dos botões da versão europeia do controle de Super Nintendo.

Com a logo criada e as cores definidas, era hora de buscar inspirações.

Inspirações e prototipações

Como ponto de partida, analisamos vários sites de eventos, anotando o que funciona e o que não funciona em cada um deles. O foco era buscar inspiração nas disposições dos itens e informações na página.

Criamos alguns pequenos protótipos (que mais pareciam wireframes funcionais) para testar a viabilidade de cada layout antes de efetivamente escolher as tecnologias e iniciar o desenvolvimento.

Escolhendo as tecnologias

Além de criar uma página com boa experiencia de uso, a prioridade era utilizar o projeto como um playground para experimentação e aprendizado. E escolher tecnologias diferentes das que utilizamos diariamente no trabalho foi uma das melhores formas de se alcançar esse resultado.

Escolhemos...

Vue.JS como framework JS + Webpack como module bundler

A sintaxe do Vue é muito amigável, o projeto é bem documentado e a comunidade é enorme. Utilizamos um template de código aberto com webpack pré-configurado, permitindo a criação de componentes individuais em arquivos .vue. Esse template nos trouxe uma série de facilidades: comandos para compilação do projeto, suporte a pré-processadores de CSS, transpilador de JS moderno, servidor local com atualização de página automática a cada alteração nos arquivos e muito mais.

Bootstrap 4

Dispensa apresentações. Optamos o Bootstrap 4 pelo ótimo sistema de grids e componentes.

SASS (SCSS)

Pré-processador de CSS. SASS permite escrever CSS de forma muito mais inteligente, legível e automatizar vários processos. Utilizamos a sintaxe SCSS por ser mais parecida com o CSS clássico.

Git + Github

Controle de versão é algo básico para projetos modernos. Utilizando git como ferramenta de controle de versão, escolhemos o Github para hospedar o repositório com o código fonte. Utilizamos o Bitbucket no trabalho e escolher o Github foi uma ótima forma de conhecer as diferenças e equivalências entre os serviços.

Colocando a mão na massa

Trabalhando cooperativamente de forma assíncrona

Criamos um repositório no Github e utilizamos issues e pull requests para nos organizarmos. Como eu e Lucas somos familiarizados com o Bitbucket, aprender as equivalências no Github foi muito fácil. No momento que escrevo esse post, temos 491 commits e 24 issues fechadas no repositório.

O fluxo é basicamente:

1. definir a criação de uma funcionalidade;
2. abrir uma issue para a nova funcionalidade / correção e atribuir a um de nós e criar o novo branch;
3. desenvolver;
4. criar um pull request apontando para o branch master, inserindo o outro como revisor;
5. após aprovação, mesclar as alterações e deletar o branch antigo.

Funcionou muito bem e tivemos pouquíssimos conflitos de código. Nos organizamos muito bem, mesmo desenvolvendo em horários totalmente diferentes nos fins semana.

Vue, vue, vue

Com o template do webpack configurado e repositório iniciado, iniciamos o desenvolvimento. Estudamos os conceitos básicos do framework e em pouco mais de uma semana já existia um esqueleto funcional da aplicação do site.

Um dos primeiros desafios foi entender o básico do Javascript moderno (ECMAScript 6+), já que toda a importação e exportação de bibliotecas e componentes é baseada nos recursos de modularidade das versões mais recentes do ECMAScript.

O Vue tem uma sintaxe muito fácil de aprender, especialmente se você já trabalhou com algum framework como Angular antes. A documentação é excelente e muito bem detalhada. E se inglês não é seu forte, fique tranquilo: ela também está disponível em português.

Uma das minhas coisas favoritas ao utilizar Vue com Webpack é a possibilidade de se utilizar arquivos .vue na criação dos componentes. Eles contêm o HTML, o CSS e o Javascript do componente em um só arquivo. E para utilizar um componente Banner.vue, por exemplo, basta usar <Banner></Banner>. Isso torna o código muito mais legível para o desenvolvedor.

A necessidade de se criar um CMS

Simples, porém efetivo.

Com o site tomando forma, a necessidade de se criar um CMS para cadastro dos conteúdos foi ficando maior. Precisávamos de um CMS que permitisse o cadastro dos games presentes no evento com detalhes sobre o título (vídeo, artes, etc), campeonatos, informações sobre localização, link para compra de ingressos, dúvidas frequentes e depoimentos.

O CMS foi uma criação completa do Lucas, utilizando um framework PHP customizado que ele utiliza em projetos pessoais. O front end do CMS tem a mesma estrutura base do site, utilizando os conceitos de componentização. Consiste em um painel dividido em seções para cadastro, edição e remoção dos conteúdos. Os dados são retornados no formato JSON, por uma API consumida pelo site.

Atualmente, o código do CMS está contido em dois repositórios: um para o front end e outro para o back end.

Componentes, SASS e a facilidade de se experimentar com o layout

A componentização com Vue permitiu uma série de experimentos com o mínimo de esforço. Pra testar uma nova disposição de itens, cores ou fontes, por exemplo, bastava alterar o código do componente. Automaticamente, todas as instâncias daquele componente herdam as alterações.

O uso do SASS foi uma escolha acertada. Como adiantei no começo do texto, o SASS permite a criação de variáveis e trechos de código para automatizar processos que envolvem CSS, além de ter uma sintaxe que particularmente acho muito mais legível que a do CSS puro.

Tenha em mente que no final das contas, tudo que está escrito em SASS vai virar CSS. O que é muda é a forma de organizar o código. Optei pela sintaxe SCSS, que mantém as chaves e os ponto-e-vírgula para delimitar o fim das linhas e seletores.

Responsividade e imagens

Mesmo se você está começando agora no mundo do desenvolvimento web, já deve saber que ter um site / sistema responsivo é primordial. Num mundo onde a maioria dos acessos à web é feito por meio de smartphones e outros dispositivos móveis, ter um site que se adapta bem a pequenas telas é algo básico.

Nos preocupamos muito em oferecer uma ótima experiência para os usuários que acessam o site pelo smartphone. E isso não se resume apenas a itens bem posicionados e legíveis. A quantidade de dados que a página utiliza para exibir seus conteúdos também é importantíssima - visto que grande parte da população utiliza redes móveis lentas e com limitação de dados.

Nosso site é extremamente dependente de imagens, que são as responsáveis pela maior parte do consumo de dados da página. Pensando nisso, implementamos uma solução no CMS para redimensionar e comprimir imagens ao se fazer o upload.

Essa solução gera uma série de variantes da mesma imagem com diferentes resoluções (e tamanhos). Utilizando as tags <picture> e <options>, verificamos o a largura do display do dispositivo e exibimos a variante da imagem mais adequada a tela, reduzindo consideravelmente o consumo de dados para exibir as imagens.

Iterando, polindo e testando

Iteramos diversas vezes até chegar no layout final. Como não impuseram restrições, tivemos bastante liberdade para experimentar. Os padrões com tamanho das fontes, ícones e espaçamento entre os itens, por exemplo, só foram definidos próximos da entrega do projeto.

Durante as iterações, decidimos seguir um caminho baseado em "menos é mais". As primeiras iterações eram cheias de animações CSS, por exemplo. Decidimos reduzi-las a um número mínimo, para não distrair o usuário do conteúdo.

Além dos testes internos, criamos uma URL de teste e compartilhamos com amigos próximos e colegas de classe. Grande parte dos polimentos veio do feedback obtido desses usuários.

A recepção

Fizemos o lançamento do site na amostra de projetos integradores no útlimo mês. A recepção foi muito positiva. Apesar do pouco conteúdo disponível no site, quem foi nos visitar gostou da experiência de acessar o site pelo smartphone e pelo computador disponível na apresentação.

A melhor parte foi os colegas de curso super interessados nas tecnologias por trás do desenvolvimento. Creio que instigamos muita gente a começar a brincar com projetinhos como este (e ficamos muito felizes com isso)!

O que dá pra melhorar?

Mesmo após a entrega, continuamos a iterar sobre o projeto. Subimos vários ajustes e melhorias nas semanas seguintes corrigindo bugs, adicionando funcionalidades no CMS e melhorando a experiência geral.

Mesmo assim, temos ciência de que ainda há muita coisa pra melhorar. Algumas das atualizações planejadas incluem:

• Melhorar a acessibilidade das páginas;
• Implementar esqueleto animado, evitando que a página "pule" após o carregamento de algum conteúdo que vem da API;
• Realizar melhorias na parte de infraestrutura: cache, HTTPS, etc;
• Melhorar a velocidade do primeiro carregamento do site em dispositivos móveis (o conteúdo inicial costuma demorar alguns segundos);
• Implementar lazy loading nas imagens que não ficam visíveis na parte inicial da página;
• Implementar ferramentas para testes automatizados.

Concluindo...

Aprendemos muito com o desenvolvimento do projeto. Fugir um pouco do fluxo de trabalho do dia-a-dia e brincar com ferramentas diferentes é uma ótima forma de aprender novos conceitos e jeitos de se construir sistemas. Já apliquei alguns dos novos conhecimentos no trabalho, inclusive.

Quaisquer dúvidas ou sugestões, é só deixar um comentário! :)