$30 off During Our Annual Pro Sale. View Details »

O front-end como você conhece vai morrer

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.

Carla Vieira

August 23, 2019
Tweet

More Decks by Carla Vieira

Other Decks in Technology

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
    [email protected]
    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