O front-end como você conhece vai morrer

A presentation at BrazilJS in August 2019 in Porto Alegre, RS, Brazil by Carla Vieira

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

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

Slide 4

Slide 4

O fim do front-end?

Slide 5

Slide 5

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

1 Vamos falar de história…

Slide 9

Slide 9

Slide 10

Slide 10

1946 ENIAC

Slide 11

Slide 11

s 1981 IBM - PC

Slide 12

Slide 12

Tim Bernes-Lee

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

Evolução do front-end

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

2 O que é Inteligência Artificial?

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

3 Machine Learning no Desenvolvimento Front-End

Slide 31

Slide 31

Web Development workflow

Slide 32

Slide 32

Saídas Entradas

Slide 33

Slide 33

Deep Learning

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

Uizard

Slide 37

Slide 37

Slide 38

Slide 38

https://arxiv.org/abs/1705.07962

Slide 39

Slide 39

Web Development workflow

Slide 40

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

Slide 41

Slide 41

Autocompletion with deep learning (TabNine) TabNine

Slide 42

Slide 42

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

Slide 43

Slide 43

4 Futuro das interfaces humano-computador

Slide 44

Slide 44

System Hardware Controls Comandos e interfaces no mainframe 1970s

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

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

Slide 51

Slide 51

We need systems that interact like humans but think like machines

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

Ferramentas

Slide 56

Slide 56

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

Slide 57

Slide 57

Qual o futuro que estamos escrevendo?

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Bias Human Bias Technology

Slide 61

Slide 61

5 Conclusão

Slide 62

Slide 62

O front-end vai morrer?

Slide 63

Slide 63

O front-end vai morrer? Não!

Slide 64

Slide 64

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

Slide 65

Slide 65

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

Slide 66

Slide 66

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

Slide 67

Slide 67

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

Slide 68

Slide 68

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

Slide 69

Slide 69

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

Slide 70

Slide 70

5 Links úteis

Slide 71

Slide 71

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

Slide 72

Slide 72

Referências Udacity - Intro to Machine Learning A Brief History of Front-end Frameworks Google - Machine learning crash course Airbnb - Sketching interfacs CreativeAI Mercado Front-End: da origem até o futuro AI experiments A brief history of the internet over the past 20 years and the role of the World Wide Web 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