Com o passar dos anos a web não só criou uma identidade própria como também está ditando o ritmo de toda a interação entre o usuário e as aplicações, usando interfaces interativas e inteligentes

Interfaces

A interação entre usuário e máquina é tema de várias cadeiras na área da Computação, e, tem se tornado cada vez mais importante no mundo das aplicações. Detalhes triviais tornaram-se diferenciais e junto com outras áreas (como Inteligência Artificial) criaram ecossistemas que são capazes de cativar as pessoas mais exigentes.

Se compararmos as interfaces de hoje com os primeiros terminais interativos veremos o quanto a experiência de uso foi aprimorada, deixando claro o que ainda há porvir. Guiar o usuário para o “caminho feliz” é uma das grandes metas (ou deveria ser) de quem constrói telas, e, fazer isso de forma eficiente vai depender de usar todos os recursos disponíveis no navegador.

HTML ^5, CSS ^3, ECMAScript ^7

Se o público está mais exigente, é preciso pensar em atender a demanda crescente por interfaces inteligentes. Por conseguinte, para atender a necessidade de quem quer fazer interfaces impecáveis, as tecnologias tem precisado se manter frequentemente atualizadas.

Os avanços nas tecnologias da web tem impulsionado os navegadores e outras ferramentas a implementarem especificações cada vez mais rebuscadas que nos permitem trabalhar com interfaces que mudaram em 360° os pilares do desenvolvimento web. Em um exemplo simples, uma simples submissão de um formulário usando os modos tradicionais pode ser totalmente redesenhada usando recursos que as versões mais atuais do HTML (*atualmente no 5) e do Javascript ([atualmente na versão ES2016 / ES7](ecma-international.org/ecma-262/7.0), caso eu não tenha perdido nada). Além disso animações e definições de estilo podem usar CSS ([em sua versão 3](w3.org/Style/CSS/)*) em um nível tão absurdo de qualidade que algumas propriedades são delegadas de forma transparente para as GPU’s quando disponíveis.

Como entrar nesse universo?

Minha dica é: desista de atalhos. Não é incomum eu lidar com códigos de companheiros onde visivelmente tem trechos copiados e colados de snippets encontrados em pesquisa pela internet. Trechos que se repetem e que poluem os seu próprios projetos. Sob a desculpa da pressa e da urgência fazemos algumas coisas das quais não nos orgulhamos, só que ainda assim eu insisto: invista no futuro.

Tente procurar por projetos de outras pessoas, ler seus códigos, entender o que eles fazem; ache exemplos e transcreva-os a sua necessidade; ou seja, descubra suas necessidades e compreenda profundamente o que está fazendo. Nunca vi nenhuma pessoa reclamar de ter feito isso, já o contrário é bem comum de se ver.

Notas importantes sobre JavaScript

Atualmente temos algumas metodologias comuns do uso do Javascript para criar interfaces para web (geralmente baseadas em DOM — Document Object Model). Elencando o que é mais comum:

• Minimalista ~> pequenas injeções de Javascript no corpo de páginas que são renderizadas totalmente pelo servidor. Essa abordagem é interessante e pode ser impecável em qualidade se os códigos javascript estiverem bem organizados. Evite deixar linguagens se misturarem sem um controle claro (isso serve pra vida);

• Modificação manual do DOM ~> uso de javascript para criar telas complexas gerando html através de concatenação de string. Geralmente essa abordagem é combinada com alguma coisa de ajax e costuma criar grandes peças de complexidade. Embora já tenha usado muito, recomendaria abortar projetos com essa metodologia; ela pode ser feita usando ferramentas (de terceiros ou próprias) que lidem melhor com isso;

• Model–view–viewmodel ~> manipulação do HTML através do JavaScript de forma transparente (também conhecido por 2-way-databind). Com essa técnica é possível entregar interfaces interativas com pouco esforço para os resultados obtidos. Comumente combinada a requisições assíncronas são obtidos efeitos bem interessantes do ponto de vista de usabilidade (com uma carga menor de efeitos colaterais);

• MVVM com Virtual DOM ~> é uma evolução da anterior, com o adendo de se preocupar com a performance com uma técnica que diminui os custos de se modificar o DOM;

• Web Components ~> a especificação de Web Components (W3C) trata de manter as peças que compõe uma página como componentes auto suficientes que possuem mecanismos para interagir com os demais itens associados ao documento.

Um desenvolvedor que queira criar interfaces de alta qualidade hoje, vai em algum momento ter que lidar com alguma dessas metodologias. Isso acontece porque para ter um ganho na relação usuário e aplicação é preciso modificar pequenas partes da página ao invés de recarregar tudo a cada interação, o que transforma o JavaScript em seu melhor amigo. Cabe a nós compreendermos qual dessas técnicas citadas melhor se adapta melhor ao que está sendo produzido.

The Vue Point

Para poder mostrar como fazer interfaces impecáveis aqui no blog usaremos o VueJS como ferramenta piloto. Obviamente que há razões pessoais envolvidas (é uma ferramenta que está sendo usada pelos membros da comunidade nos seus trabalhos), mas é importante salientar que embora seja possível enumerar motivos para se escolher essa ou aquela ferramenta, nada substitui a capacidade que a equipe que está trabalhando em um projeto tem de identificar o que é bom ou não para o trabalho fluir da melhor forma possível.

Estamos conversados então?! Interfaces são importantes e para abordarmos esse tema usaremos VueJS. Já está saindo do forno a série de vídeos que introduz a ferramenta e vamos ter artigos também para ajudar os iniciantes, curiosos e até os mais experientes trocando experiências e impressões do cotidiano.

Sigam-me os bons!

Fiquem de olho no nosso canal, converse com a turma no Telegram, siga o nosso twitter para saber das novidades (links abaixo). Críticas, sugestões e até xingamentos são interações válidas ; ) Grupo de PHP da Zona da Mata O PHP completou mais de 20 anos, e, contrariando diversos boatos a linguagem continua a crescer. Atualmente a stack com…youtube.com PHP da Zona da Mata Grupo de PHP da Zona da Mata destinado a falar de tecnologias em geral, encontros e tecnologias para a web phpzm.rockst.me PHP ZM (@phpzm) | Twitter The latest Tweets from PHP ZM (@phpzm). Grupo de PHP da Zona da Mata. Minas Gerais, Brasiltwitter.com

to code is to think, just it