O front-end como você conhece vai morrer

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

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

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

O fim do front-end?

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

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

1 Vamos falar de história…

1946 ENIAC

s 1981 IBM - PC

Tim Bernes-Lee

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

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

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

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

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

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

Evolução do front-end

2 O que é Inteligência Artificial?

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

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

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

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

3 Machine Learning no Desenvolvimento Front-End

Web Development workflow

Saídas Entradas

Deep Learning

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

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

Uizard

https://arxiv.org/abs/1705.07962

Web Development workflow

“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

Autocompletion with deep learning (TabNine) TabNine

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

4 Futuro das interfaces humano-computador

System Hardware Controls Comandos e interfaces no mainframe 1970s

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

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

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

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

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.

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

We need systems that interact like humans but think like machines

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

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

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

Ferramentas

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

Qual o futuro que estamos escrevendo?

Bias Human Bias Technology

5 Conclusão

O front-end vai morrer?

O front-end vai morrer? Não!

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

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

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

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

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

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

5 Links úteis

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

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