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. 3.

    No dia-a-dia, criar protótipos ainda é um processo manual, repetitivo

    e caro no desenvolvimento de produtos. Realidade
  2. 4.
  3. 5.
  4. 7.
  5. 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.
  6. 14.
  7. 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
  8. 22.

    No final, todo artefato gerado pelo design na etapa de

    discovery se torna inútil. Resultado
  9. 24.
  10. 25.
  11. 26.
  12. 28.
  13. 31.

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

    desenvolvimento com HTML, CSS e JavaScript. Web Designer Implement. Backlog Discovery Entrega
  14. 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
  15. 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.
  16. 34.

    Podem agilizar a etapa de front-end e eliminar a etapa

    de discovery de design. Templates Implement. Backlog Entrega
  17. 37.
  18. 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
  19. 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
  20. 41.

    Web Designer • possui foco em layout. • pouco conhecimento

    sobre otimização de recursos. • Nenhum conhecimento sobre back-end
  21. 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)
  22. 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.
  23. 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.
  24. 49.

    A navegação dos testes nos protótipos é feita com imagens

    png ou jpg. A experiência não é realista. Fidelidade Baixa
  25. 52.
  26. 55.
  27. 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
  28. 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
  29. 67.

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

    a velocidade de prototipagem.” Emil Wallner
  30. 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
  31. 70.
  32. 71.
  33. 75.
  34. 76.

    Esse tipo de tecnologia irá nos permitir investir no verdadeiro

    potencial do ser humano: a criatividade.