O front-end como você conhece vai morrer

Se pensarmos que a inteligência artificial já consegue substituir alguns empregos, como fica o futuro do front-end diante deste cenário? A profissão de desenvolvedor front-end está suscetível a mudanças, assim como qualquer outra. Toda tarefa mecânica, repetitiva e manual tende a ser automatizada, então, logo não vamos precisar de alguém executando o trabalho de front-end de ponta a ponta. Nesta palestra, iremos discutir sobre as possibilidades de avanços de Machine Learning na criação de interfaces e na personalização da experiência do usuário.

Transcript

1. Carla Vieira | @carlaprvieira
   O Front-End como você
   conhece vai morrer
   Insights e estudos até agora
   

   View Slide

2. Developer, Speaker and Artificial Intelligence Evangelist
   @carlaprvieira
   Carla Vieira
   FORMAÇÃO ENSINO TRABALHO
   Graduanda de
   Sistemas de
   Informação pela USP
   Aluna Especial pela
   USP
   Mestrado (em breve)
   rs
   Professora de
   Desenvolvimento
   Web na Habits
   Professora de
   introdução a IA e
   ML
   Desenvolvedora
   Coordenadora
   Perifacode
   

   View Slide

3. https://www.mckinsey.com/featured-insights/future-of-work/jobs-lost-jobs-gained-what-the-future-of-work-will-mean-for-jobs-skills-and-wages/pt-br#part%201
   

   View Slide

4. O fim do front-end?
   

   View Slide

5. View Slide

6. O fim do front-end?
   Embora muitas profissões possam ser substituídas por
   máquinas, alguns empregos ainda estão seguros devido à
   habilidades essencialmente humanas como a Criatividade
   

   View Slide

7. 1 2 5
   HISTÓRIA INTELIGÊNCIA
   ARTIFICIAL
   4
   FUTURO DAS
   INTERFACES
   HUMANO-
   COMPUTADOR
   3
   MACHINE
   LEARNING NO
   FRONT-END
   CONCLUSÃO
   

   View Slide

8. Vamos falar de
   história...
   1
   

   View Slide

9. View Slide

10. 1946
    ENIAC
    

    View Slide

11. s
    1981
    IBM - PC
    

    View Slide

12. Tim Bernes-Lee
    

    View Slide

13. View Slide

14. View Slide

15. https://www.researchgate.net/publication/224259495_The_Future_of_Web_Apps
    

    View Slide

16. 1.0 2.0 3.0 4.0
    Information People Machine Agent
    Evolução da web
    World Wide Web Redes sociais Big Data Homem x Máquina
    1995 2004 2015 ?
    

    View Slide

17. 1.0
    Information
    Evolução da web
    World Wide Web
    1995
    One-way communication
    Usuários passivos
    Conteúdos estáticos
    

    View Slide

18. 2.0
    People
    Evolução da web
    Redes sociais
    2004
    Popularização de blogs e redes sociais
    Marketing e Publicidade
    Usuário Ativo
    

    View Slide

19. Evolução da web
    Semântica
    Personalização de produtos e serviços
    Algoritmos...
    3.0
    Machine
    Big Data
    2010
    

    View Slide

20. Evolução da web
    Web simbiótica
    Limite homem x máquina
    4.0
    Agent
    Homem x Máquina
    ?
    

    View Slide

21. Evolução do front-end
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. O que é Inteligência
    Artificial?
    2
    

    View Slide

26. Conceituação
    INTELIGÊNCIA
    ARTIFICIAL MACHINE
    LEARNING DEEP
    LEARNING
    Programas com
    habilidade de agir como
    humanos
    Algoritmos com habilidade
    de aprender sem
    programação expressa
    Redes neurais artificiais que
    aprendem através de um
    grande volume de dados
    1950 1980 2010
    

    View Slide

27. Programação Tradicional x Machine Learning
    Exemplo: Reconhecimento de Spam
    

    View Slide

28. Programação Tradicional x Machine Learning
    Exemplo: Reconhecimento de Spam
    if(email.includes('viagra')){
    filterAsSpam(email);
    } else if(email.includes('v!agra')){
    filterAsSpam(email);
    } else if(...){
    ....
    }
    import * as spamModel from "model.json"
    const model = load(spamModel);
    const newEmail = getEmail();
    const prediction =
    model.predict(newEmail);
    prediction === 0 ? spam : not spam
    

    View Slide

29. Anatomia de uma rede neural
    Camadas:
    utilizadas para
    construção de
    redes neurais
    Imagem de
    entrada
    Camada de
    entrada
    Camada
    escondida
    Camada
    de saída
    Saída
    

    View Slide

30. Machine Learning no
    Desenvolvimento
    Front-End
    3
    

    View Slide

31. Web Development workflow
    

    View Slide

32. Entradas
    Saídas
    

    View Slide

33. Deep
    Learning
    

    View Slide

34. Microsoft AI Sketch2Work
    https://azure.microsoft.com/pt-br/blog/turn-your-whiteboard-sketches-to-
    working-code-in-seconds-with-sketch2code/
    

    View Slide

35. https://airbnb.design/sketching-interfaces/
    Airbnb
    

    View Slide

36. Uizard
    

    View Slide

37. View Slide

38. https://arxiv.org/abs/1705.07962
    

    View Slide

39. Web Development workflow
    

    View Slide

40. “Nossa visão é capacitar as pessoas com
    Inteligência Artificial porque acreditamos em
    um futuro onde as máquinas auxiliam os
    seres humanos, não os substituem.”
    Tony - Uizard
    

    View Slide

41. TabNine
    Autocompletion with deep learning (TabNine)
    

    View Slide

42. Deep
    Learning
    ~2M Github Files
    Autocompletion with deep learning (TabNine)
    

    View Slide

43. Futuro das interfaces
    humano-computador
    4
    

    View Slide

44. System Hardware Controls
    1970s
    Comandos e interfaces no
    mainframe
    

    View Slide

45. GUI e CLI
    1970s
    Graphical User Interface – utilização
    de menus e objetos
    CLI – Command-Line Interface
    

    View Slide

46. Mobile e Touch Screen
    2000s
    Dispositivos mobile
    Substituição do mouse
    

    View Slide

47. VR – Virtual Reality
    2010s
    “O conhecimento intuitivo do
    usuário a respeito do mundo
    físico pode ser transferido para
    manipular o mundo virtual.”
    

    View Slide

48. VUI – Voice User Interface
    2010s
    Web Services e Internet das Coisas
    Acessibilidade
    Hardware compatível
    Inteligência Artificial
    

    View Slide

49. VUI – Voice User Interface
    2010s
    A fala é um meio fundamental de
    comunicação em todas as culturas,
    sendo também o meio primário para
    construir relações.
    

    View Slide

50. https://medium.com/hackernoon/a-glimpse-into-the-future-of-front-end-engineering-21bbebfc7008
    Alibaba
    

    View Slide

51. We need systems that interact
    like humans but think like
    machines
    

    View Slide

52. Se a voz é o futuro das interfaces de
    computação, e aqueles que não
    podem ouvir ou falar?
    

    View Slide

53. Acessibilidade
    Making Amazon Alexa respond to sign language using AI - Abhishek Singh
    import {KNNImageClassifier} from
    'deeplearn-knn-image-classifier’;
    import * as dl from 'deeplearn';
    const IMAGE_SIZE = 227;
    const TOPK = 10;
    

    View Slide

54. Acessibilidade
    Making Amazon Alexa respond to sign language using AI - Abhishek Singh
    

    View Slide

55. Ferramentas
    

    View Slide

56. Limites
    • Pode levar muito tempo para treinar modelo
    • Lembre-se da importância da experiência mobile
    • Modelos caixa preta
    • Ética
    

    View Slide

57. Qual o futuro que estamos
    escrevendo?
    

    View Slide

58. View Slide

59. View Slide

60. Human Bias Technology
    Bias
    

    View Slide

61. Conclusão
    5
    

    View Slide

62. O front-end vai morrer?
    

    View Slide

63. O front-end vai morrer?
    Não!
    

    View Slide

64. O front-end do futuro
    será mais integrado e
    diversificado
    #0
    

    View Slide

65. Developers e Designers
    #1 Relacionamentos colaborativos
    mais profundos
    Para tirar vantagem do uso
    de Machine Learning
    

    View Slide

66. Novas necessidades
    #2 As necessidades irão mudar, IA terá um
    papel fundamental na nossa sociedade
    Novos produtos baseados em IA
    

    View Slide

67. Obtenha o máximo de
    conhecimento de aprendizado
    de máquina que puder
    #3
    

    View Slide

68. Continue sendo criativo e pense
    em novas maneira de aplicar o
    aprendizado de máquina
    #4
    

    View Slide

69. Carla Vieira
    @carlaprvieira
    carlaprv@hotmail.com
    Obrigada!
    BIT.LY/BRAZILJS-CARLA
    

    View Slide

70. Links úteis
    5
    

    View Slide

71. Magenta.js
    NeuroJS
    ConvNetJS
    WebDNN
    Ml.js
    AIJS
    Keras.js
    Tensorflow.js examples
    Brain.js
    Synaptic.js
    Natural
    Neataptic
    Google Colab
    Teachable machine boilerplate
    PoseNet
    machine_learning
    Tensorflow playground
    Jupyter Notebooks
    ML5.js
    Amazon ML
    Microsoft ML APIs
    Google Cloud AI
    ONNX.js
    Ferramentas de ML
    

    View Slide

72. Udacity - Intro to Machine Learning
    Google - Machine learning crash course
    CreativeAI
    AI experiments
    A internet e o poder da comunicação na
    sociedade em rede: influências nas formas de
    interação social
    History of Web (WebFoundation.org)
    O inicio, o fim e o meio do Desenvolvimento
    Front-End - Felipe Fialho
    Referências
    A Brief History of Front-end Frameworks
    Airbnb - Sketching interfacs
    Mercado Front-End: da origem até o futuro
    A brief history of the internet over the past 20
    years and the role of the World Wide Web
    

    View Slide