SlideShare uma empresa Scribd logo
Colocando sua aplicação
Vue nos Trilhos
Felipe Gadelha Ruoso
Pós graduando em des. Web e Aplicativos móveis
Desenvolvedor Ruby - 5 anos
Time de Desenvolvimento no Yapay
felipe.ruoso@yapay.com.br
/in/felipegruoso
Danilo Fernando Deverso
Graduado em Sistemas de Informação
Desenvolvedor - Ruby 2 anos / PHP 9 anos
Líder de Desenvolvimento na Yapay
danilo.deverso@yapay.com.br
/in/danilodeverso
● Yapay
● Problemas
● Solução
● Dificuldades
● Resultado
● Conclusão
Agenda
Proposta
Gateway Intermediador
+ =
700miltransações mensais transacionados em 2016
trilhão 3.300clientes ativos
1,1R$
Inicialmente
● Compartilhar experiência
● O que é nossa aplicação
● Integração entre aplicações API e Front
● Quebrando barreiras
● Evoluindo
Problemas a resolver
Pontos Críticos
Problemas a resolver
Usabilidade
Usabilidade
Problemas a resolver
Pontos Críticos
Problemas a resolver
Usabilidade Interatividade
Interatividade
Problemas a resolver
Pontos Críticos
Problemas a resolver
Usabilidade Interatividade Código legado
Código Legado
Problemas a resolver
Proposta
● Melhorar a renderização das views
● Adotar um framework front-end
● Nova arquitetura de aplicações
Analisando alternativas
Proposta
● Organização de código
● Separação de responsabilidade
● APIs, maior controle de dados
Benefícios
● Arquitetura física
● Backend em Ruby
● Nova stack
Proposta
Definição de tecnologia
Frameworks
Definição de tecnologia
Rails Hanami Vue.js Angular Ember.js
Sinatra Phoenix Meteor React
● Know-how da equipe
● Suporte da Comunidade
● Disponibilidade (tempo)
● Dedicação da equipe
Escolhendo o framework frontend
● Benchmarks
● Influências
● Sintaxe
Definição de tecnologia
Por que Vue.JS?
Definição de tecnologia
Vue.js Angular React
Benchmark
Definição de tecnologia
http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html
Empresas que usam Vue.JS
Slack Gitlab Codeship Holistics
Definição de tecnologia
Sintaxe - Single File Component
Definição de tecnologia
Implementação
Análise de implementação
Implementação
Sprockets
● Vuex
● Atualização Vue.js
● Criação de componentes
● Rotinas de deploy
Dificuldades
Implementação
● Código bem mais limpo e organizado
● Fácil manutenção
● Independência da camada de front
Visão do desenvolvedor - Organização
Implementação
● Serializer
Visão do desenvolvedor - API
Implementação
Visão do desenvolvedor - API
Implementação
● Serializer
● Swagger
Visão do desenvolvedor - API
Implementação
Visão do desenvolvedor - API
Implementação
● Serializer
● Swagger
Visão do desenvolvedor - API
Implementação
● Rubocop
Visão do desenvolvedor - API
Implementação
● Serializer
● Swagger
● REST
Visão do desenvolvedor - API
Implementação
● Rubocop
● Precommit
● Prepush
● vuex
● vue-router
● axios
● lodash
Visão do desenvolvedor - Vue.js
Implementação
● Javascript
● JSLinter
● Velocidade
● Usabilidade
● Interatividade
● SPA
● Feedbacks positivos
Visão do usuário
Implementação
Conclusão
● Adote novas tecnologias
● Experiência positiva
● Pesquise outras opções
Experimente!
Conclusão
Perguntas?
Obrigado!
danilo.deverso@yapay.com.br
/in/danilodeverso
felipe.ruoso@yapay.com.br
/in/felipegruoso
Vamos seguir e curtir a Yapay!
@yapay.br
@yapay.br
@yapay_br
Yapay Brasil
Yapay.br
formasdepagamento.com
www.yapay.com.br

Mais conteúdo relacionado

Mais procurados

T@rget trust asp.net avançado
T@rget trust   asp.net avançadoT@rget trust   asp.net avançado
T@rget trust asp.net avançado
Targettrust
 
O comparativo de arquiteturas de software monolíticas em relação a arquitetur...
O comparativo de arquiteturas de software monolíticas em relação a arquitetur...O comparativo de arquiteturas de software monolíticas em relação a arquitetur...
O comparativo de arquiteturas de software monolíticas em relação a arquitetur...
Emmanuel Neri
 
Django: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento webDjango: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento web
Miguel Galves
 
Web 2.0 e AJAX - Parte 3 / 3
Web 2.0 e AJAX - Parte 3 / 3Web 2.0 e AJAX - Parte 3 / 3
Web 2.0 e AJAX - Parte 3 / 3
David Ruiz
 

Mais procurados (20)

O novo ASP.NET - Campinas .NET - Março/2017
O novo ASP.NET - Campinas .NET - Março/2017O novo ASP.NET - Campinas .NET - Março/2017
O novo ASP.NET - Campinas .NET - Março/2017
 
T@rget trust asp.net avançado
T@rget trust   asp.net avançadoT@rget trust   asp.net avançado
T@rget trust asp.net avançado
 
O comparativo de arquiteturas de software monolíticas em relação a arquitetur...
O comparativo de arquiteturas de software monolíticas em relação a arquitetur...O comparativo de arquiteturas de software monolíticas em relação a arquitetur...
O comparativo de arquiteturas de software monolíticas em relação a arquitetur...
 
Vraptor Overview
Vraptor OverviewVraptor Overview
Vraptor Overview
 
Testes Automatizados
Testes AutomatizadosTestes Automatizados
Testes Automatizados
 
Visual Regression Tests - Dando um Upload nos seus testes de UI!
Visual Regression Tests - Dando um Upload nos seus testes de UI!Visual Regression Tests - Dando um Upload nos seus testes de UI!
Visual Regression Tests - Dando um Upload nos seus testes de UI!
 
Introdução ao LiveOak
Introdução ao LiveOakIntrodução ao LiveOak
Introdução ao LiveOak
 
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todos
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para TodosTDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todos
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todos
 
Conectando jBPM com o mundo - TDC 2014 SP
Conectando jBPM com o mundo - TDC 2014 SPConectando jBPM com o mundo - TDC 2014 SP
Conectando jBPM com o mundo - TDC 2014 SP
 
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
 
Django: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento webDjango: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento web
 
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...
 
Times plataforma-tdc2020
Times plataforma-tdc2020Times plataforma-tdc2020
Times plataforma-tdc2020
 
Do commit à produção: integração contínua e entrega contínua no pipeline de i...
Do commit à produção: integração contínua e entrega contínua no pipeline de i...Do commit à produção: integração contínua e entrega contínua no pipeline de i...
Do commit à produção: integração contínua e entrega contínua no pipeline de i...
 
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine  KarmaTest-Driven Development com JavaScript, Jasmine  Karma
Test-Driven Development com JavaScript, Jasmine Karma
 
Refactoring
RefactoringRefactoring
Refactoring
 
Web 2.0 e AJAX - Parte 3 / 3
Web 2.0 e AJAX - Parte 3 / 3Web 2.0 e AJAX - Parte 3 / 3
Web 2.0 e AJAX - Parte 3 / 3
 
Web Tools Pt B R
Web Tools Pt  B RWeb Tools Pt  B R
Web Tools Pt B R
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
TDC2016SP - TypeScript em aplicações modernas
TDC2016SP - TypeScript em aplicações modernasTDC2016SP - TypeScript em aplicações modernas
TDC2016SP - TypeScript em aplicações modernas
 

Semelhante a RubyConf 17 - Colocando sua aplicação vue nos trilhos

TDC 2013 SP | Trilha ALM: Construindo uma solução de ponta a ponta com ferram...
TDC 2013 SP | Trilha ALM: Construindo uma solução de ponta a ponta com ferram...TDC 2013 SP | Trilha ALM: Construindo uma solução de ponta a ponta com ferram...
TDC 2013 SP | Trilha ALM: Construindo uma solução de ponta a ponta com ferram...
tdc-globalcode
 

Semelhante a RubyConf 17 - Colocando sua aplicação vue nos trilhos (20)

Angular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoAngular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativo
 
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
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 
Academia do Arquiteto Globalcode
Academia do Arquiteto GlobalcodeAcademia do Arquiteto Globalcode
Academia do Arquiteto Globalcode
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
 
BDD (Behavior-Driven Development) - GDG-SP - Julho/2016
BDD (Behavior-Driven Development) - GDG-SP - Julho/2016BDD (Behavior-Driven Development) - GDG-SP - Julho/2016
BDD (Behavior-Driven Development) - GDG-SP - Julho/2016
 
Microsoft ALM = Produtividade
Microsoft ALM = ProdutividadeMicrosoft ALM = Produtividade
Microsoft ALM = Produtividade
 
Behavior-Driven Development (BDD) - Abril/2017
Behavior-Driven Development (BDD) - Abril/2017Behavior-Driven Development (BDD) - Abril/2017
Behavior-Driven Development (BDD) - Abril/2017
 
A framework for collaborative applications en
A framework for collaborative applications enA framework for collaborative applications en
A framework for collaborative applications en
 
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122
ALM Open Source Ponta a Ponta - Minicurso Globalcode MC-122
 
Tópicos Emergentes - DevOps
Tópicos Emergentes - DevOpsTópicos Emergentes - DevOps
Tópicos Emergentes - DevOps
 
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
 
Introdução a Application Life-cycle Management Open Source
Introdução a Application Life-cycle Management Open SourceIntrodução a Application Life-cycle Management Open Source
Introdução a Application Life-cycle Management Open Source
 
TDC 2013 SP | Trilha ALM: Construindo uma solução de ponta a ponta com ferram...
TDC 2013 SP | Trilha ALM: Construindo uma solução de ponta a ponta com ferram...TDC 2013 SP | Trilha ALM: Construindo uma solução de ponta a ponta com ferram...
TDC 2013 SP | Trilha ALM: Construindo uma solução de ponta a ponta com ferram...
 
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ...
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ....NET Core + Docker: containers e seus benefícios no deployment de aplicações ...
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ...
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Integração Continua - Jenkins
Integração Continua - JenkinsIntegração Continua - Jenkins
Integração Continua - Jenkins
 
JEE6 - Introdução
JEE6 - IntroduçãoJEE6 - Introdução
JEE6 - Introdução
 
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 )
 
Behavior-Driven Development (BDD) - QA Ninja Conf 2016
Behavior-Driven Development (BDD) - QA Ninja Conf 2016Behavior-Driven Development (BDD) - QA Ninja Conf 2016
Behavior-Driven Development (BDD) - QA Ninja Conf 2016
 

RubyConf 17 - Colocando sua aplicação vue nos trilhos