Eu sou um grande defensor de aumentar a comunicação designer / desenvolvedor e facilitar a transferência entre marcação estática e implementada – e Stagehand é minha última tentativa de preencher a lacuna.
Prototype UI sem escrever Javascript.
Stagehand é um plugin jQuery que permite que não desenvolvedores simulem os estados de uma página simplesmente adicionando alguns atributos de dados. Por exemplo, se um designer ou desenvolvedor de front-end precisa dividir uma página de pesquisa em HTML / CSS, eles podem facilmente dividir a folha em branco , os resultados da pesquisa e as mensagens ‘sem resultados’, tudo em uma única visualização. Em seguida, usando a barra de ferramentas Stagehand, qualquer pessoa que visite a marcação estática da página de Pesquisa pode percorrer os vários estados:
%section(data-stage='search' data-scene='blank slate')
%h1 Search for something!
%section(data-stage='search' data-scene='results'
// cool search result listing
%section(data-stage='search' data-scene='no results')
%h1 No results for this query
= link_to "try searching for something else", "#"Essa é apenas a ponta do iceberg. No mês desde que lancei o Stagehand, ele foi usado para barras de ferramentas, menus suspensos de navegação, formulários dinâmicos e muito mais. É uma nova maneira de pensar sobre interfaces de mock – que resultou em economia de tempo e aumento da qualidade de marcação para nossos projetos.
Uma solução como o Stagehand demorou muito a chegar. Tentamos várias soluções diferentes ao longo dos anos na tentativa de descobrir onde traçar a linha entre simulação e implementação de interações Javascript:
No qual cortamos chamadas AJAX.
Antigamente, dividir recursos AJAX envolvia apenas configurar o código para chamar uma URL fictícia, que seria então trocada por uma chamada real na visualização real do aplicativo. Nós nos veríamos com a marcação estática quebrada conforme o Javascript fosse implementado para o aplicativo real, mas tratamos isso como uma compensação necessária pela conveniência do método de troca de URL.
Para piorar as coisas, conforme as interfaces do lado do cliente se tornavam mais complexas e os frameworks (Backbone, Ember, etc.) se tornavam mais comuns, encontraríamos bugs de layout inesperados que estavam profundamente dentro do aplicativo implementado ou simplesmente difíceis de reproduzir.
No qual duplicamos os arquivos Javascript.
Também tentamos manter um arquivo Javascript separado apenas para a marcação estática, cheio de alternâncias e animações jQuery rápidas e fáceis. Mas à medida que os projetos cresciam em complexidade, o JS fictício também crescia, resultando em algumas centenas de linhas de código essencialmente descartável – além disso, corríamos o risco de tomar decisões de implementação de Javascript antes da implementação do framework que amarraria tudo junto . Pouco saudável!
Ajudante de palco: desacoplado e feliz.
Digite o Stagehand. Agora, pode haver um mínimo vazio de JavaScript para acompanhar nossa marcação estática, e os estados da interface são simulados com atributos de dados Stagehand. JavaScript quebrado é coisa do passado, e nenhum JavaScript descartável é escrito.
Honestamente, foi difícil para mim deixar de ir depois de anos com a equipe de design e front-end do Hashrocket sendo responsável pelo núcleo das interações Javascript junto com o HAML / SASS. Mas, graças ao Stagehand, me concentro em projetar e fatiar todos os estados de interface possíveis, porque é muito fácil escrevê-los todos de uma vez. Isso me ajudou a detectar problemas de layout mais cedo e reduz a quantidade de suposições que os desenvolvedores precisam fazer ao implementar visualizações.
E estou evitando escrever JavaScript, deixando 100% da implementação para nossa equipe de desenvolvedores, que adotou JS e Coffeescript de maneira rápida e competente junto com Ruby, Elixir, Go e todas as outras coisas que estamos escrevendo por aqui. Como a natureza dos aplicativos mudou, devemos nos adaptar – e espero que o Stagehand seja a próxima etapa que estamos procurando.
Isso é um pouco como o Stagehand mudou nosso processo para melhor – talvez ele possa fazer o mesmo por você. Verifique a página inicial do Stagehand para documentação e mais exemplos – e então vá em frente e divida!
(postado originalmente no The Hashrocket Blog )