Save 37% off PRO during our Black Friday Sale! »

Automatização no desenvolvimento de interfaces web

188900fc4ed166ff159a9b74aa38a9bd?s=47 fernahh
March 27, 2018

Automatização no desenvolvimento de interfaces web

Desde o princípio temos ferramentas populares no mercado que geram código para interfaces de produtos web, porém, sabemos que na realidade a presença humana ainda é necessária para manter um nível de excelência nas interações. Nessa palestra vamos ver como times multidisciplinares estão se organizando, quais ferramentas são utilizadas para entregar valor em um tempo menor sem perder qualidade e como o Machine Learning promete revolucionar o design em código.

188900fc4ed166ff159a9b74aa38a9bd?s=128

fernahh

March 27, 2018
Tweet

Transcript

  1. Automatização no desenvolvimento de Interfaces Web @fernahh

  2. “O tempo necessário para testar uma ideia deveria ser zero.”

    Benjamin Wilkins
  3. No dia-a-dia, criar protótipos ainda é um processo manual, repetitivo

    e caro no desenvolvimento de produtos. Realidade
  4. None
  5. None
  6. • continuous deployment; • continuous delivery; • ...

  7. None
  8. • pesquisa; • protótipo; • ...

  9. O que veremos nessa palestra • como buscamos diminuir trabalhos

    manuais na ContaAzul; • como novas tecnologias irão nos ajudar no futuro com o desenvolvimento de protótipos.
  10. @fernahh fernahh.com.br

  11. ContaAzul contaazul.com/vagas

  12. 1/4 interfaces no desenvolvimento de produtos

  13. Estrutura de um time Capitã(o) Desenvolvedor(a) Desenvolvedor(a) PO UX

  14. None
  15. Entrega Backlog Implement. Discovery

  16. Backlog Discovery Entrega Implement.

  17. Implement. Backlog Discovery Entrega

  18. Times multidisciplinares nada mais são que pequenos waterfalls.

  19. • designers que saibam HTML, CSS e JavaScript; • front-ends

    que conheçam o básico para construir um serviço RESTful; • back-ends que saibam JavaScript. Pessoas multidisci- plinares
  20. Implement. Backlog Discovery Entrega

  21. Backlog Pesquisa Protótipo Teste Implement. Entrega

  22. No final, todo artefato gerado pelo design na etapa de

    discovery se torna inútil. Resultado
  23. Implement. Backlog Discovery Entrega

  24. None
  25. None
  26. Discovery

  27. Implementação

  28. Entrega

  29. Se cada passo tem como objetivo entregar o mesmo produto,

    como agilizar a entrega?
  30. 2/4 as tentativas de automatizar a criação de interfaces

  31. Tinha como papel a concepção de uma interface até o

    desenvolvimento com HTML, CSS e JavaScript. Web Designer Implement. Backlog Discovery Entrega
  32. A maioria das linguagens server-side possuem template engines. O objetivo?

    Diminuir a fricção com front-end. Linguagens server-side Implement. Backlog Discovery Entrega
  33. Tem como objetivo eliminar a etapa de desenvolvimento front-end. Muitas

    vezes são usadas para testar uma ideia. Geradores de código Discovery Entrega Backlog Implement.
  34. Podem agilizar a etapa de front-end e eliminar a etapa

    de discovery de design. Templates Implement. Backlog Entrega
  35. A web evoluiu.

  36. “Produto mínimo viável: crie uma fatia ao invés de uma

    camada por vez.” Jussi Pasanen
  37. None
  38. • comunicação em tempo real ficou fácil de ser implementada;

    Web APIs
  39. • comunicação em tempo real ficou fácil de ser implementada;

    • cache e armazenamento de dados permitem entregar uma experiência mais próxima de apps nativos; Web APIs
  40. • comunicação em tempo real ficou fácil de ser implementada;

    • cache e armazenamento de dados permitem entregar uma experiência mais próxima de apps nativos; • multimídia se tornou uma realidade, tanto entrada como saída. Web APIs
  41. Web Designer • possui foco em layout. • pouco conhecimento

    sobre otimização de recursos. • Nenhum conhecimento sobre back-end
  42. Web Designer • possui foco em layout. • pouco conhecimento

    sobre otimização de recursos. • Nenhum conhecimento sobre back-end Linguagens server-side • O padrão RESTful tomou conta do mercado. • Novas linguagens nem cogitam recurso de templates (ex: Go)
  43. Web Designer • possui foco em layout. • pouco conhecimento

    sobre otimização de recursos. • Nenhum conhecimento sobre back-end Linguagens server-side • O padrão RESTful tomou conta do mercado. • Novas linguagens nem cogitam recurso de templates (ex: Go) Geradores de código • Não escalada. • Difícil de aplicar otimizações para dispositivos móveis.
  44. Web Designer • possui foco em layout. • pouco conhecimento

    sobre otimização de recursos. • Nenhum conhecimento sobre back-end Linguagens server-side • O padrão RESTful tomou conta do mercado. • Novas linguagens nem cogitam recurso de templates (ex: Go) Geradores de código • Não escalada. • Difícil de aplicar otimizações para dispositivos móveis. Templates • Difícil de escalar e personalizar. • Apesar de eliminar a etapa de design, precisa de uma etapa de pesquisa.
  45. 3/4 qual é nosso cenário e quais as soluções?

  46. Design Systems.

  47. Shopify Polaris Atlassian Design

  48. Renderiza componentes React no Sketch. Facilita o desenvolvimento de design

    systems. React Sketch.app
  49. A navegação dos testes nos protótipos é feita com imagens

    png ou jpg. A experiência não é realista. Fidelidade Baixa
  50. Protótipos de alta fidelidade.

  51. Gera protótipos de alta fidelidade com pouca interação com código.

    Bootstrap Studio
  52. Exige um bom conhecimento em tecnologias web. Também limita recursos

    a marcação do Bootstrap. Manutenção
  53. Apesar de agilizarem o processo, ambas as soluções não eliminam

    trabalhos repetitivos.
  54. 4/4 o futuro do processo através da AI

  55. None
  56. “Nós desenvolvemos uma teoria de trabalho onde algoritmos de machine

    learning podem classificar um grupo complexo de centenas de símbolos feitos a mão… Benjamin Wilkins - Airbnb
  57. ...com um alto grau de precisão, então eles devem estar

    habilitados a classificar os 150 componentes no nosso sistema e ensinar uma máquina a reconhecê-los.” Benjamin Wilkins - Airbnb
  58. 150 componentes

  59. Desenho feito a mão

  60. Reconhecido através de ML

  61. Renderizado no browser More

  62. https://airbnb.design/sketching-interfaces/

  63. Essa solução permite ao time de discovery gerar valor a

    partir de esboços.
  64. Backlog Pesquisa Protótipo Teste Implement. Entrega

  65. Implement. Backlog Entrega

  66. Deep Learning.

  67. “O deep learning vai mudar desenvolvimento front-end e irá aumentar

    a velocidade de prototipagem.” Emil Wallner
  68. “A maior barreira para automatizarmos o desenvolvimento front-end é poder

    computacional… Emil Wallner
  69. ...no entanto, podemos usar algoritmos de deep learning para começar

    a explorar a automação do desenvolvimento front-end.” Emil Wallner https://medium.freecodecamp.org/how-you-can-train-an-ai-to-c onvert-your-design-mockups-into-html-and-css-cc7afd82fed4
  70. None
  71. None
  72. https://emilwallner.github.io/html/550_epochs/

  73. Discovery. Backlog Entrega

  74. Discovery. Backlog Entrega

  75. None
  76. Esse tipo de tecnologia irá nos permitir investir no verdadeiro

    potencial do ser humano: a criatividade.
  77. obrigado! @fernahh estamos contratando! contaazul.com/vagas