Comparando as
Hypes
Herbert
Henrique
Developer at Love
Mondays

❤ JS

Tento escrever código
para humanos 
Contexto
Problema
🔥Nuclear option
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
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.
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
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
Render
React
React
Vue
Vue
Styled Components
CSS Modules
CSS Modules
PropTypes
Conditional Rendering
React
Vue
List Rendering
React
Vue
State Management
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
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
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

Comparando as Hypes - React & Vue