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

Mais conteúdo relacionado

Mais procurados

.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?.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 mobileXamarin + 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 - JenkinsIntegração Continua - Jenkins
Integração Continua - Jenkins
João Carlos Ottobboni
 
Jenkins integrando e estendendo.
Jenkins integrando e estendendo.Jenkins integrando e estendendo.
Jenkins integrando e estendendo.
Leonardo Kobus
 
Jenkins, o CI ao seu dispor
Jenkins, o CI ao seu disporJenkins, 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ínuaJenkins 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 testesBotando 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 jenkinsDev 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 MinimalAPIsDevPira 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 DojoTestes 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 JenkinsIntegraçã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 TestesProgramaçã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 JavaJenkins - 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 cometem9 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 frontendAutomação de build para frontend
Automação de build para frontend
Vanessa Me Tonini
 
Jenkins
JenkinsJenkins
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 )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 JenkinsAutomatizaçã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 desenvolvimentoDevops 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 minutosXamarin em 7 minutos
Xamarin em 7 minutos
akamud
 

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?.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?
 
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobileXamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
 
Integração Continua - Jenkins
Integração Continua - JenkinsIntegração Continua - Jenkins
Integração Continua - Jenkins
 
Jenkins integrando e estendendo.
Jenkins integrando e estendendo.Jenkins integrando e estendendo.
Jenkins integrando e estendendo.
 
Jenkins, o CI ao seu dispor
Jenkins, o CI ao seu disporJenkins, o CI ao seu dispor
Jenkins, o CI ao seu dispor
 
Jenkins e a Integração Contínua
Jenkins e a Integração ContínuaJenkins e a Integração Contínua
Jenkins e a Integração Contínua
 
Botando o Jenkins para rodar seus testes
Botando o Jenkins para rodar seus testesBotando o Jenkins para rodar seus testes
Botando o Jenkins para rodar seus testes
 
Dev ops integração contínua com jenkins
Dev ops integração contínua com jenkinsDev ops integração contínua com jenkins
Dev ops integração contínua com jenkins
 
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIsDevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
 
Testes com xUnit + Coding Dojo
Testes com xUnit + Coding DojoTestes com xUnit + Coding Dojo
Testes com xUnit + Coding Dojo
 
Integração contínua em PHP com Jenkins
Integração contínua em PHP com JenkinsIntegração contínua em PHP com Jenkins
Integração contínua em PHP com Jenkins
 
Programação Orientada a Testes
Programação Orientada a TestesProgramação Orientada a Testes
Programação Orientada a Testes
 
Jenkins - livre-se da parte chata do Java
Jenkins - livre-se da parte chata do JavaJenkins - livre-se da parte chata do Java
Jenkins - livre-se da parte chata do Java
 
9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem
 
Automação de build para frontend
Automação de build para frontendAutomação de build para frontend
Automação de build para frontend
 
Jenkins
JenkinsJenkins
Jenkins
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
 
Automatização de Infraestrutura com Jenkins
Automatização de Infraestrutura com JenkinsAutomatização de Infraestrutura com Jenkins
Automatização de Infraestrutura com Jenkins
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimentoDevops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
 
Xamarin em 7 minutos
Xamarin em 7 minutosXamarin em 7 minutos
Xamarin em 7 minutos
 

Semelhante a Comparando as Hypes - React & Vue

Tendências e Dicas para o Desenvolvimento de Software
Tendências e Dicas para o Desenvolvimento de SoftwareTendências e Dicas para o Desenvolvimento de Software
Tendências e Dicas para o Desenvolvimento de Software
Norberto Santos
 
Hello ReactJs
Hello ReactJsHello ReactJs
Hello ReactJs
Nathália Lourenção
 
TDC 2015 Floripa - Testes de Unidade com Robolectric
TDC 2015 Floripa - Testes de Unidade com RobolectricTDC 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 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...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 AutomatizadosIntegração do Zabbix com Testes Automatizados
Integração do Zabbix com Testes Automatizados
Robert Silva
 
Testes com TestLink e Selenium
Testes com TestLink e SeleniumTestes com TestLink e Selenium
Testes com TestLink e Selenium
André Thiago
 
Javascript levado a sério
Javascript levado a sérioJavascript levado a sério
Javascript levado a sério
saspi2
 
Growing oos guided_by_tests entire
Growing oos guided_by_tests entireGrowing 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 DNAD2013Arquitetura 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 minutosTDC 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 ...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 ReactIntoduçã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 [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 trilhosRubyConf 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.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
Julia469065
 
Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edted
brunoaalves
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando 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 azureFalando sobre DevOps no azure
Falando sobre DevOps no azure
Ricardo Martins ☁
 
Testes E2E em Cypress com JS
Testes E2E em Cypress com JSTestes E2E em Cypress com JS
Testes E2E em Cypress com JS
Nàtali Cabral
 

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 SoftwareTendências e Dicas para o Desenvolvimento de Software
Tendências e Dicas para o Desenvolvimento de Software
 
Hello ReactJs
Hello ReactJsHello ReactJs
Hello ReactJs
 
TDC 2015 Floripa - Testes de Unidade com Robolectric
TDC 2015 Floripa - Testes de Unidade com RobolectricTDC 2015 Floripa - Testes de Unidade com Robolectric
TDC 2015 Floripa - Testes de Unidade com Robolectric
 
TDC 2015 - Testes de Unidade com Robolectric
TDC 2015 - Testes de Unidade com Robolectric TDC 2015 - Testes de Unidade com Robolectric
TDC 2015 - Testes de Unidade com Robolectric
 
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...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...
 
Integração do Zabbix com Testes Automatizados
Integração do Zabbix com Testes AutomatizadosIntegração do Zabbix com Testes Automatizados
Integração do Zabbix com Testes Automatizados
 
Testes com TestLink e Selenium
Testes com TestLink e SeleniumTestes com TestLink e Selenium
Testes com TestLink e Selenium
 
Javascript levado a sério
Javascript levado a sérioJavascript levado a sério
Javascript levado a sério
 
Growing oos guided_by_tests entire
Growing oos guided_by_tests entireGrowing oos guided_by_tests entire
Growing oos guided_by_tests entire
 
Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013
 
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 minutosTDC 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
 
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 ...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 ...
 
Intodução ao React
Intodução ao ReactIntodução ao React
Intodução ao React
 
[TDC - Testes] Estratégia de automação dos testes em microserviços
[TDC - Testes] Estratégia de automação dos testes em microserviços [TDC - Testes] Estratégia de automação dos testes em microserviços
[TDC - Testes] Estratégia de automação dos testes em microserviços
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosRubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhos
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
 
Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edted
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
 
Falando sobre DevOps no azure
Falando sobre DevOps no azureFalando sobre DevOps no azure
Falando sobre DevOps no azure
 
Testes E2E em Cypress com JS
Testes E2E em Cypress com JSTestes E2E em Cypress com JS
Testes E2E em Cypress com JS
 

Comparando as Hypes - React & Vue