RubyConf 17 - Colocando sua aplicação vue nos trilhos
- 1. Colocando sua aplicação Vue nos Trilhos
- 2. 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
- 3. 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
- 4. ● Yapay ● Problemas ● Solução ● Dificuldades ● Resultado ● Conclusão Agenda Proposta
- 6. + =
- 7. 700miltransações mensais transacionados em 2016 trilhão 3.300clientes ativos 1,1R$
- 8. Inicialmente ● Compartilhar experiência ● O que é nossa aplicação ● Integração entre aplicações API e Front ● Quebrando barreiras ● Evoluindo
- 10. Pontos Críticos Problemas a resolver Usabilidade
- 12. Pontos Críticos Problemas a resolver Usabilidade Interatividade
- 14. Pontos Críticos Problemas a resolver Usabilidade Interatividade Código legado
- 15. Código Legado Problemas a resolver
- 16. Proposta
- 17. ● Melhorar a renderização das views ● Adotar um framework front-end ● Nova arquitetura de aplicações Analisando alternativas Proposta
- 18. ● 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
- 20. Frameworks Definição de tecnologia Rails Hanami Vue.js Angular Ember.js Sinatra Phoenix Meteor React
- 21. ● 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
- 22. Por que Vue.JS? Definição de tecnologia Vue.js Angular React
- 24. Empresas que usam Vue.JS Slack Gitlab Codeship Holistics Definição de tecnologia
- 25. Sintaxe - Single File Component Definição de tecnologia
- 26. Implementação
- 28. ● Vuex ● Atualização Vue.js ● Criação de componentes ● Rotinas de deploy Dificuldades Implementação
- 29. ● 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
- 30. ● Serializer Visão do desenvolvedor - API Implementação
- 31. Visão do desenvolvedor - API Implementação
- 32. ● Serializer ● Swagger Visão do desenvolvedor - API Implementação
- 33. Visão do desenvolvedor - API Implementação
- 34. ● Serializer ● Swagger Visão do desenvolvedor - API Implementação ● Rubocop
- 35. Visão do desenvolvedor - API Implementação
- 36. ● Serializer ● Swagger ● REST Visão do desenvolvedor - API Implementação ● Rubocop ● Precommit ● Prepush
- 37. ● vuex ● vue-router ● axios ● lodash Visão do desenvolvedor - Vue.js Implementação ● Javascript ● JSLinter
- 38. ● Velocidade ● Usabilidade ● Interatividade ● SPA ● Feedbacks positivos Visão do usuário Implementação
- 39. Conclusão
- 40. ● Adote novas tecnologias ● Experiência positiva ● Pesquise outras opções Experimente! Conclusão
- 41. Perguntas?
- 42. Obrigado! danilo.deverso@yapay.com.br /in/danilodeverso felipe.ruoso@yapay.com.br /in/felipegruoso
- 43. Vamos seguir e curtir a Yapay! @yapay.br @yapay.br @yapay_br Yapay Brasil Yapay.br formasdepagamento.com www.yapay.com.br