SlideShare uma empresa Scribd logo
Comparando as
Hypes
Herbert
Henrique
Developer at Love
Mondays

❤ JS

Tento escrever código
para humanos 
Contexto
Comparando as Hypes - React & Vue
Problema
🔥Nuclear option
Comparando as Hypes - React & Vue
Necessidades e Benefícios
• Componentes

• Mais testes

• Gerenciar melhor os dados e estado da aplicação

• Trazer uma cara nova ao projeto

• Hiring Process
Necessidades e Benefícios
• Componentes

• Mais testes

• Gerenciar melhor os dados e estado da aplicação

• Trazer uma cara nova ao projeto

• Hiring Process
Comparando as Hypes - React & Vue
Como escolher?
• Estudar

• POC (Prova de Conceito)

• Discutir
História do React
• Criado por Jordan Walke, um engenheiro de software do
Facebook

• Foi utilizado no newsfeed do facebook em 2011

• Foi tornado um projeto open-source na JSConf US em
Maio de 2013.
Comparando as Hypes - React & Vue
História do Vue
• Criado por Evan You, ex-engenheiro do Google

• I figured, what if I could just extract the part that I really
liked about Angular and build something really lightweight
without all the extra concepts involved?

• Inicialmente lançado em Fevereiro de 2014
Comparando as Hypes - React & Vue
React: 1.694.265
Vue: 204.702
React
Vue
Outras empresas
React
• Facebook & Instagram

• Netflix

• Airbnb

• New York Times
https://github.com/react-brasil/empresas-que-usam-react-no-brasil
70 Empresas
Vue
• Gitlab

• Alibaba

• Baidu

• Tencent
https://github.com/vuejs-br/empresas-que-usam-vue-no-brasil
56 Empresas
Documentação
Comparando as Hypes - React & Vue
Comparando as Hypes - React & Vue
Render
React
React
Vue
Vue
Styled Components
CSS Modules
CSS Modules
PropTypes
Conditional Rendering
React
Vue
List Rendering
React
Vue
State Management
Comparando as Hypes - React & Vue
Comparando as Hypes - React & Vue
Single source of truth
The state of your whole application is stored in an
object tree within a single store.
State is read-only
The only way to change the state is to emit an action,
an object describing what happened.
Changes are made
with pure functions
To specify how the state tree is transformed by
actions, you write pure reducers.
Vuex
Comparando as Hypes - React & Vue
Router
React Router
vue-router
Iniciando um projeto
react-create-app
vue-cli
Test
Enzyme
Jest
🃏 Delightful JavaScript Testing
$ Easy Setup
Jest is a complete and easy to set up JavaScript testing
solution. In fact, Jest works out of the box for any React project.
% Instant Feedback
Failed tests run first. Fast interactive mode can switch between
running all tests or only test files related to changed files.
📸 Snapshot Testing
Jest can capture snapshots of React trees or other
serializable values to simplify testing
avoriaz

vue-test-utils
Curva de
aprendizagem
Comparando as Hypes - React & Vue
Comunidade
Conclusão
As melhores partes
React
• Everything is Javascript

• Ecossistema

• Comunidade

• React Native
–Cory House
“JavaScript moves fast, and React allows you to
swap out small pieces of your application for better
libraries instead of waiting around and hoping your
framework will innovate. The philosophy of small,
composable, single-purpose tools never goes out
of style.”
Vue
• Simples

• Ecossistema

• Comunidade
Dores
React
• Curva de aprendizagem

• Ecossistema
Vue
• Testes

• Comunidade

• Ecossistema
O que eu escolho?
Obrigado!
eu@herberthenrique.com
herberth3nrique
herberthenrique
Anúncio

Recomendados

Aulas 6: usando o Jest para fazer mocks to Mongoose, testando a função save
Aulas 6: usando o Jest para fazer mocks to Mongoose, testando a função save
Jorge Pires
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Criciúma Dev
 
UAI Test - Introdução Prática ao Jenkins
UAI Test - Introdução Prática ao Jenkins
Stefan Teixeira
 
Introdução ao Github actions - TDC Connections
Introdução ao Github actions - TDC Connections
Guillaume Falourd
 
Desenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do código
Guilherme Heynemann Bruzzi
 
Linguagem c
Linguagem c
saido_embalo1980
 
Uaijug ADF - spring boot - microservice - Introdução
Uaijug ADF - spring boot - microservice - Introdução
Rogerio Fontes
 
Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021
Erik Cruz
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
Letticia Nicoli
 
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
akamud
 
Integração Continua - Jenkins
Integração Continua - Jenkins
João Carlos Ottobboni
 
Jenkins integrando e estendendo.
Jenkins integrando e estendendo.
Leonardo Kobus
 
Jenkins, o CI ao seu dispor
Jenkins, o CI ao seu dispor
s4nx
 
Jenkins e a Integração Contínua
Jenkins e a Integração Contínua
Denis Vieira
 
Botando o Jenkins para rodar seus testes
Botando o Jenkins para rodar seus testes
kinow
 
Dev ops integração contínua com jenkins
Dev ops integração contínua com jenkins
Michel Cordeiro
 
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
Júnior Porfirio
 
Testes com xUnit + Coding Dojo
Testes com xUnit + Coding Dojo
Letticia Nicoli
 
Integração contínua em PHP com Jenkins
Integração contínua em PHP com Jenkins
Gilmar Pupo
 
Programação Orientada a Testes
Programação Orientada a Testes
Gregorio Melo
 
Jenkins - livre-se da parte chata do Java
Jenkins - livre-se da parte chata do Java
Fernando Boaglio
 
9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem
Fernando Henriques
 
Automação de build para frontend
Automação de build para frontend
Vanessa Me Tonini
 
Jenkins
Jenkins
Emmanuel Neri
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Getúlio Strapazzon
 
Automatização de Infraestrutura com Jenkins
Automatização de Infraestrutura com Jenkins
Felipe Santos
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Thiago Ferreira
 
Xamarin em 7 minutos
Xamarin em 7 minutos
akamud
 
Tendências e Dicas para o Desenvolvimento de Software
Tendências e Dicas para o Desenvolvimento de Software
Norberto Santos
 
Hello ReactJs
Hello ReactJs
Nathália Lourenção
 

Mais conteúdo relacionado

Mais procurados (20)

.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
Letticia Nicoli
 
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
akamud
 
Integração Continua - Jenkins
Integração Continua - Jenkins
João Carlos Ottobboni
 
Jenkins integrando e estendendo.
Jenkins integrando e estendendo.
Leonardo Kobus
 
Jenkins, o CI ao seu dispor
Jenkins, o CI ao seu dispor
s4nx
 
Jenkins e a Integração Contínua
Jenkins e a Integração Contínua
Denis Vieira
 
Botando o Jenkins para rodar seus testes
Botando o Jenkins para rodar seus testes
kinow
 
Dev ops integração contínua com jenkins
Dev ops integração contínua com jenkins
Michel Cordeiro
 
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
Júnior Porfirio
 
Testes com xUnit + Coding Dojo
Testes com xUnit + Coding Dojo
Letticia Nicoli
 
Integração contínua em PHP com Jenkins
Integração contínua em PHP com Jenkins
Gilmar Pupo
 
Programação Orientada a Testes
Programação Orientada a Testes
Gregorio Melo
 
Jenkins - livre-se da parte chata do Java
Jenkins - livre-se da parte chata do Java
Fernando Boaglio
 
9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem
Fernando Henriques
 
Automação de build para frontend
Automação de build para frontend
Vanessa Me Tonini
 
Jenkins
Jenkins
Emmanuel Neri
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Getúlio Strapazzon
 
Automatização de Infraestrutura com Jenkins
Automatização de Infraestrutura com Jenkins
Felipe Santos
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Thiago Ferreira
 
Xamarin em 7 minutos
Xamarin em 7 minutos
akamud
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
Letticia Nicoli
 
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
akamud
 
Jenkins integrando e estendendo.
Jenkins integrando e estendendo.
Leonardo Kobus
 
Jenkins, o CI ao seu dispor
Jenkins, o CI ao seu dispor
s4nx
 
Jenkins e a Integração Contínua
Jenkins e a Integração Contínua
Denis Vieira
 
Botando o Jenkins para rodar seus testes
Botando o Jenkins para rodar seus testes
kinow
 
Dev ops integração contínua com jenkins
Dev ops integração contínua com jenkins
Michel Cordeiro
 
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
Júnior Porfirio
 
Testes com xUnit + Coding Dojo
Testes com xUnit + Coding Dojo
Letticia Nicoli
 
Integração contínua em PHP com Jenkins
Integração contínua em PHP com Jenkins
Gilmar Pupo
 
Programação Orientada a Testes
Programação Orientada a Testes
Gregorio Melo
 
Jenkins - livre-se da parte chata do Java
Jenkins - livre-se da parte chata do Java
Fernando Boaglio
 
9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem
Fernando Henriques
 
Automação de build para frontend
Automação de build para frontend
Vanessa Me Tonini
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Getúlio Strapazzon
 
Automatização de Infraestrutura com Jenkins
Automatização de Infraestrutura com Jenkins
Felipe Santos
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Thiago Ferreira
 
Xamarin em 7 minutos
Xamarin em 7 minutos
akamud
 

Semelhante a Comparando as Hypes - React & Vue (20)

Tendências e Dicas para o Desenvolvimento de Software
Tendências e Dicas para o Desenvolvimento de Software
Norberto Santos
 
Hello ReactJs
Hello ReactJs
Nathália Lourenção
 
TDC 2015 Floripa - Testes de Unidade com Robolectric
TDC 2015 Floripa - Testes de Unidade com Robolectric
Stefan Teixeira
 
TDC 2015 - Testes de Unidade com Robolectric
TDC 2015 - Testes de Unidade com Robolectric
Lucas Albuquerque
 
React Native - Experiência Nativa para o usuário e experiência Web para o des...
React Native - Experiência Nativa para o usuário e experiência Web para o des...
Emiliano Barbosa
 
Integração do Zabbix com Testes Automatizados
Integração do Zabbix com Testes Automatizados
Robert Silva
 
Testes com TestLink e Selenium
Testes com TestLink e Selenium
André Thiago
 
Javascript levado a sério
Javascript levado a sério
saspi2
 
Growing oos guided_by_tests entire
Growing oos guided_by_tests entire
André Mendonça Bastos
 
Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013
André Borgonovo
 
TDC SP 2016 - Construindo um microserviço Java 100% funcional em 30 minutos
TDC SP 2016 - Construindo um microserviço Java 100% funcional em 30 minutos
Rafael Chaves
 
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Felipe Nascimento
 
Intodução ao React
Intodução ao React
Dev PP
 
[TDC - Testes] Estratégia de automação dos testes em microserviços
[TDC - Testes] Estratégia de automação dos testes em microserviços
Rodrigo Stefani Domingues
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhos
Felipe Gadelha Ruoso
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
Julia469065
 
Palestra ror edted
Palestra ror edted
brunoaalves
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
Jessica Zanelato Soares
 
Falando sobre DevOps no azure
Falando sobre DevOps no azure
Ricardo Martins ☁
 
Testes E2E em Cypress com JS
Testes E2E em Cypress com JS
Nàtali Cabral
 
Tendências e Dicas para o Desenvolvimento de Software
Tendências e Dicas para o Desenvolvimento de Software
Norberto Santos
 
TDC 2015 Floripa - Testes de Unidade com Robolectric
TDC 2015 Floripa - Testes de Unidade com Robolectric
Stefan Teixeira
 
TDC 2015 - Testes de Unidade com Robolectric
TDC 2015 - Testes de Unidade com Robolectric
Lucas Albuquerque
 
React Native - Experiência Nativa para o usuário e experiência Web para o des...
React Native - Experiência Nativa para o usuário e experiência Web para o des...
Emiliano Barbosa
 
Integração do Zabbix com Testes Automatizados
Integração do Zabbix com Testes Automatizados
Robert Silva
 
Testes com TestLink e Selenium
Testes com TestLink e Selenium
André Thiago
 
Javascript levado a sério
Javascript levado a sério
saspi2
 
Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013
André Borgonovo
 
TDC SP 2016 - Construindo um microserviço Java 100% funcional em 30 minutos
TDC SP 2016 - Construindo um microserviço Java 100% funcional em 30 minutos
Rafael Chaves
 
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Felipe Nascimento
 
Intodução ao React
Intodução ao React
Dev PP
 
[TDC - Testes] Estratégia de automação dos testes em microserviços
[TDC - Testes] Estratégia de automação dos testes em microserviços
Rodrigo Stefani Domingues
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhos
Felipe Gadelha Ruoso
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
Julia469065
 
Palestra ror edted
Palestra ror edted
brunoaalves
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
Jessica Zanelato Soares
 
Testes E2E em Cypress com JS
Testes E2E em Cypress com JS
Nàtali Cabral
 
Anúncio

Último (12)

Capítulo 7 - Redes de computadores multimídia.ppt
Capítulo 7 - Redes de computadores multimídia.ppt
ssuser0a4331
 
POAN-1 trabalho de antena de microfita.pptx
POAN-1 trabalho de antena de microfita.pptx
joaquimpaulo2306
 
Certified SAFe 6 Lean Portfolio Manager
Certified SAFe 6 Lean Portfolio Manager
Adail Viana Neto
 
Breve Histórico do Computador [2 de 2].pdf
Breve Histórico do Computador [2 de 2].pdf
jarlisonsantos1985
 
Joao Claudio Nunes Carvalho-Classificacao de filmes do Netflix.docx
Joao Claudio Nunes Carvalho-Classificacao de filmes do Netflix.docx
ssuser1712ed
 
G.6 Avarias Mais Comuns em Computadores TIC2.pptx
G.6 Avarias Mais Comuns em Computadores TIC2.pptx
vieirapatricio94
 
Certified SAFe 6 Agilist
Certified SAFe 6 Agilist
Adail Viana Neto
 
A-Historia-da-Programacao-Orientada-a-Objetos.pptx
A-Historia-da-Programacao-Orientada-a-Objetos.pptx
destruidorschirmer
 
PPT - Capítulo 6 - Redes sem fio e redes móveis.ppt
PPT - Capítulo 6 - Redes sem fio e redes móveis.ppt
ssuser0a4331
 
A-Historia-do-Java-Uma-Linguagem-que-Transformou-o-Cenario-da-Programacao.pptx
A-Historia-do-Java-Uma-Linguagem-que-Transformou-o-Cenario-da-Programacao.pptx
destruidorschirmer
 
Como Criar uma Partição Bootável no HD Interno.pptx
Como Criar uma Partição Bootável no HD Interno.pptx
vieirapatricio94
 
SISTEMAS OPERACIONAIS DE COMPUTADORES PARTE 1
SISTEMAS OPERACIONAIS DE COMPUTADORES PARTE 1
jarlisonsantos1985
 
Capítulo 7 - Redes de computadores multimídia.ppt
Capítulo 7 - Redes de computadores multimídia.ppt
ssuser0a4331
 
POAN-1 trabalho de antena de microfita.pptx
POAN-1 trabalho de antena de microfita.pptx
joaquimpaulo2306
 
Certified SAFe 6 Lean Portfolio Manager
Certified SAFe 6 Lean Portfolio Manager
Adail Viana Neto
 
Breve Histórico do Computador [2 de 2].pdf
Breve Histórico do Computador [2 de 2].pdf
jarlisonsantos1985
 
Joao Claudio Nunes Carvalho-Classificacao de filmes do Netflix.docx
Joao Claudio Nunes Carvalho-Classificacao de filmes do Netflix.docx
ssuser1712ed
 
G.6 Avarias Mais Comuns em Computadores TIC2.pptx
G.6 Avarias Mais Comuns em Computadores TIC2.pptx
vieirapatricio94
 
A-Historia-da-Programacao-Orientada-a-Objetos.pptx
A-Historia-da-Programacao-Orientada-a-Objetos.pptx
destruidorschirmer
 
PPT - Capítulo 6 - Redes sem fio e redes móveis.ppt
PPT - Capítulo 6 - Redes sem fio e redes móveis.ppt
ssuser0a4331
 
A-Historia-do-Java-Uma-Linguagem-que-Transformou-o-Cenario-da-Programacao.pptx
A-Historia-do-Java-Uma-Linguagem-que-Transformou-o-Cenario-da-Programacao.pptx
destruidorschirmer
 
Como Criar uma Partição Bootável no HD Interno.pptx
Como Criar uma Partição Bootável no HD Interno.pptx
vieirapatricio94
 
SISTEMAS OPERACIONAIS DE COMPUTADORES PARTE 1
SISTEMAS OPERACIONAIS DE COMPUTADORES PARTE 1
jarlisonsantos1985
 
Anúncio

Comparando as Hypes - React & Vue