dpw2016

A vida só pode ser compreendida olhando-se para trás;
mas só pode ser vivida olhando-se para frente.

Muitos conteúdos inéditos e traduções foram colocados no desenvolvimento para web desde sua inauguração, quase uma década atrás. Dentre estes, alguns meta artigos para contarmos um pouco sobre a experiência de desenvolvimento do blog, em si. Depois de pouco mais de 2 anos que sua última versão foi lançada, a webfatorial apresenta dpw2016!

Layout

Na “versão” anterior do blog, optamos por uma abordagem técnica ultraminimalistas, não usando quaisquer soluções prontas mais robustas para front-end, somente JavaScript puro etc. Para a dpw2016, a escolha foi Foundation, o melhor framework front-end da atualidade!

Naquela época (e até antes) já tínhamos um affair com o Foundation, mas a decisão de usá-lo no desenvolvimento para web, efetivamente, se deu pela evolução mesma do framework. Atualmente, ele não é o melhor framework front-end somente pela gama de componentes que possui e sua facilidade de uso; seu próprio código é muito bem escrito e modularizado, permitindo que se use tão-somente os recursos que sejam necessários, não trazendo “tranqueira” para os assets finais. Também contam os fatos de o Foundation usar tecnologias de ponta — como Sass, Flexbox e ECMAScript 6 — e de o estarmos usando bastante nos projetos da webfatorial.

Criamos mais elementos visuais para facilitar o entendimento dos conteúdos e aprimorar a apresentação dos artigos. Esperem ver mais cores, formas e até algumas animaçõezinhas por aí. Por exemplo, mensagens importantes agora têm uma formatação especial, do tipo:

Se quisermos evidenciar bastante uma imagem qualquer, agora é possível fazer algo como (veja numa resolução grande):

Conteúdo

Para começar, aprimorados a navegação: acabamos com “becos sem saída” nos artigos, agora mostrando quais são os respectivos anterior e próximo post de cada um. Também trocamos o menu hambúrguer para viewports maiores por uma clássica barra superior fixa com opções mais enxutas.

Remanejamos vários artigos de lugar para ser possível cortar algumas categorias. Já desde a versão passadas começamos com essa limpa, mas decidimos chegar ao número máximo de 10 categorias para o dpw2016.

No final das contas, aprimorar a experiência e facilitar a leitura de conteúdos que, convenhamos, apesar de gostarmos bastante — vocês que estão lendo e nós que estamos escrevendo –, não são tão fáceis de serem assimilados, foi uma de nossas principais metas na concepção do dpw2016!

Tipografia

No anúncio do último tema já havíamos comunicado um drástico aprimoramento na tipografia do site, mostrando algumas das (então) fontes mais consagradas sobre assunto. Mantendo a tradição de estudos para aprimoramento constante, usamos muito do que pode ser encontrado no artigo “Secret Symphony: The Ultimate Guide to Readable Web Typography“, dando especial atenção à maneira como o texto é apresentado, seu tamanho, contraste, espaçamentos etc.

Perceba que a leitura dos textos está bem melhor: mais prazerosa, menos cansativa, mais fluida. Mesmo que você não seja um leitor das antigas, certamente consegue perceber estas características enquanto lê estas palavras (e observa “o todo”).

Os comentários voltaram!

No dpw2014, havíamos tomado a decisão de abolir os comentários, direcionando toda a eventual comunicação às redes sociais. Nesta versão, os comentários estão de volta!

Perceba que a leitura dos textos está bem melhor: mais prazerosa, menos cansativa, mais fluida. Tuitar isso

Acreditamos que isso aumentará a participação da comunidade e dará ensejo a mensagens mais diretas sobre o(s) tema(s) abordado(s) em cada artigo. Entretanto, esse retorno dos comentários ainda não pode ser considerada como definitivo, então, se os comentários não forem minimamente utilizados, não há motivos para que continuem presentes.

Como a apresentação padrão dos comentários no WordPress e as interações disponíveis são um tanto que limitadas, está sendo usado o Disqus para aprimorar a coisa toda.

Infra

Todos sabemos que, no “mundo da tecnologia”, tudo evolui muito rápido. Mas continuamos achando incrível como, em poucos meses, toda a maneira de se desenvolver pode mudar! Para o desenvolvimento para web, este foi o caso.

AWS

“Serviços de infraestrutura de nuvem abrangentes e altamente especializados”. A descrição no próprio site da AWS não poderia ser mais precisa e verdadeira. A AWS é precisamente isso. Depois de diversos testes com diversos serviços ao decorrer dos anos, chegamos à inevitável constatação de que, atualmente, a Amazon é realmente a empresa que oferece os melhores serviços de infra através de seus Web Services!

No desenvolvimento para web, usamos alguns deles, como ECS, S3, CloudFront e RDS. Desenvolver em ambientes virtualizados e automatizar deploys direto na AWS são muito, muito eficientes! Certamente haverá conteúdos por aqui explicando mais sobre isso, mas continue lendo este artigo para algumas sneak peeks.

Docker

Para quem desenvolve usando virtualização, até não muito tempo atrás o protagonismo desse tipo de tecnologia era do Vagrant. Já há algum tempo, quem roubou a cena foi o Docker!

Ele usa um conceito diferente de virtualização: enquanto Vagrant e outras soluções são ambientes virtualizados completos, o Docker usa recursos isolados compartilhando bibliotecas comuns — daí a metáfora de contêineres num navio. Certamente haverá artigos futuros explicando mais sobre o Docker, mas, por ora, basta saber que ele é muito rápido, eficiente e divertido de se usar!

Então, em nossas máquinas locais, fora editores/IDEs não temos nenhum software específico de desenvolvimento. Todos são contêineres Docker que permitem desenvolvimento e operações da VM rapidíssimos — inclusive em projetos diferentes, que compartilham os mesmos contêineres.

wercker

Se você ainda não ouviu falar e/ou leu sobre o wercker (pronuncia-se “worker”), tudo bem; ele é relativamente novo nos guetos de desenvolvimento web. wercker é uma plataforma de Integração Contínua baseada em contêineres Docker para operações na nuvem. É possível configurar scripts e workflows para facilitar bastante este tipo de tarefa e, como sabemos, em webdev, automatização é tudo!

Mesmo para projetos “da casa”, como o dpw, fazemos questão de usar todo o instrumental técnico-conceitual que fazemos com os projetos de clientes da webfatorial. Então, antes de ir para produção, o blog passa por um ambiente de homologação para ser testado.

É possível configurar scripts e workflows para facilitar bastante este tipo de tarefa e, como sabemos, em webdev, automatização é tudo! Tuitar isso

Graças ao wercker, passar códigos e assets de um ambiente para o próximo é muito simples e muito rápido: depois de devidamente configurado, quando é feito push no branch develop, automaticamente já é ativado um trigger do wercker que faz com que todo o código e assets sejam copiados para o ambiente de homolog — juntamente com outras ações, como criação de algumas pastas, alterações de permissões, adaptações ao ambiente homolog etc. Todo o processo demora menos de 5 minutos!

Depois de feita a homologação, basta um push para o branch master para que, através de um outro trigger do wercker, um deploy seja feito diretamente no ambiente de produção na AWS, já com as devidas credenciais de chaves, clusters, services etc, invalidação de cache e todas as outras medidas necessárias para que, em poucos minutos, as alterações sejam colocadas em produção. Tudo — absolutamente tudo — de maneira automatizada!

Fluxo de desenvolvimento

JIRA

JIRA é uma ferramenta que permite o monitoramento de tarefas — mais ou menos como a Trello. A diferença é que conseguimos total integração com o repositório do projeto, chat corporativo e muitos outros!

Sua interface muito intuitiva e eficiente e as possibilidades de personalização existentes por projeto o tornam bastante eficiente e aumenta bastante a produtividade e informação da equipe sobre o que acontece durante o desenvolvimento, características imprescindíveis para projetos e fluxos de desenvolvimento profissionais.

Então, por exemplo, na integração do repo Bitbucket, acontece o seguinte: no JIRA, conseguimos abrir um branch no repositório diretamente pela tarefa, acompanhar os commits feitos, o track de quanto tempo foi gasto nas tarefas e muitas e muitas outras integrações e facilidades.

HipChat

Algo com o que trabalhamos, também, é com a integração de todo o fluxo de tarefas do JIRA com o HipChat — que já usávamos como ferramenta principal de comunicação. Para citar somente uma das capacidades dessa integração, caso alguém cite no chat uma tarefa, colocando seu identificador, automaticamente o HipChat apresenta um snippet com informações a respeito:

E a integra��ão se dá por via dupla: nos textos dos commits do projeto, é possível usar algo que eles chamam de smart commits para atualizar determinadas informações sobre a tarefa, como tempo gasto, fazer comentários, alteração de status e mais.

Enfim, é o tipo de conjunto de “meta ferramentas” que, à primeira vista, pode parecer só “legal”, mas que no uso do dia-a-dia se mostra espetacular!

Performance

Por último, mas não menos importante, a performance! Evidentemente que usar frameworks e bibliotecas front-end mais completas aumentam o tamanho dos assets, então essa foi uma preocupação inicial. Entretanto, devido a todo o planejamento do restante do site, incluindo a infra e muita automatização de códigos, os resultados em comparação com a versão anterior — que tinha bem menos imagens e facilitadores visuais — não decepcionam. Pelo contrário: ficaram satisfatoriamente excelentes!

Com algumas ferramentas que usamos para testes de performance — respectivamente WebPagetest, Pingdom e notas do PageSpeed e YSlow –, ficou assim:

Conclusão

Estas características e ferramentas apresentadas são as principais usadas para “dar vida” ao dpw2016 e que continuarão sendo usadas para seus aprimoramentos. Com o fluxo do desenvolvimento ao deploy final tão rápido e facilitado como foi mostrado, muitas das ideias de conteúdos e interações diferenciadas para blogs que temos poderão ser colocadas em prática.

Esperamos, sinceramente, que nossos leitores casuais, mais assíduos e colegas de profissão continuem considerando o desenvolvimento para web uma fonte útil de conteúdos relacionados à web e, mais, que também possam fazer parte deste humilde e quase decenário blog!

Mais uma vez agradecemos imensamente e a gente se vê pela web!