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.

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
6. • continuous deployment; • continuous delivery; • ...
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
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
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
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
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
72. https://emilwallner.github.io/html/550_epochs/
73. Discovery. Backlog Entrega
74. Discovery. Backlog Entrega
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