JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvimento front-end
0 gostou197 visualizações
Charles Carrari apresenta ferramentas de virtualização como Vagrant e Docker para simplificar o desenvolvimento front-end. Ele discute os principais problemas enfrentados por desenvolvedores front-end e como essas ferramentas podem ajudar a resolver problemas de compatibilidade, replicação de ambientes e diferenças entre desenvolvimento e produção. Carrari também fornece exemplos e links para aprender mais sobre Vagrant e Docker.
JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvimento front-end
- 1. São Paulo Rua Fidêncio Ramos, 308, 10º andar, Vila Olímpia CEP: 04551-902 Rio de Janeiro Av. General Justo, 375, 9º andar, Centro CEP: 20021-130 www.mundipagg.com Utilizando a virtualização para simplificar o desenvolvimento front-end Charles Carrari
- 2. Charles Carrari Front-End Developer - https://about.me/charlescarrari
- 4. Uma plataforma que gera negócios através da tecnologia em pagamentos 4
- 5. Falaremos sobre: 1. Disclaimers 2. Retrospectiva 3. Evolução 4. Principais problemas 5. Soluções parciais e “individuais” 6. Virtualizar 7. Vagrant 8. Docker 9. O que usar e quando usar? 10. Dúvidas?
- 7. Disclaimer I 1. Não é um curso de virtualização. 2. Não é um curso de Vagrant. 3. Não é um curso de Docker. 4. É uma proposta de utilização dessas ferramentas. 5. Não sou especialista em nenhuma dessas soluções! Sou apenas um “frontzinho”, buscando menos trabalho e ganhos na minha produtividade.
- 10. Disclaimer II 1. Atualmente a MundiPagg possui muitas soluções que utilizam ferramentas da Microsoft. Logo é natural que a maioria das máquinas tenha o Windows instalado. Por isso, os exemplos serão sempre no Windows. 2. Além disso, utilizar Windows torna o cenário do que falaremos ainda mais difícil, tornando nossos exemplos mais ricos.
- 11. Portanto... 11
- 14. 2. Retrospectiva Do sobrinho ao WebMaster
- 15. O que fazíamos? 1. Não existia muita coisa além do HTML, de “folhas de estilo” e bem pouco de javascript. 2. table, table, table... 3. Páginas com visuais problemáticos e péssima usabilidade 4. Versionamento? Ah sim... bkp-1, bkp-novo, bkp- ultimo... 5. FTP
- 16. 16 + + = O que usávamos?
- 17. Conclusão 1. O mercado web estava nascendo ainda 2. Naturalmente éramos sobrinhos 3. E no fim tudo era simples! Ou não...
- 18. 3. Evolução Do “HTMELER” ao FullStack
- 19. O que fazemos? 1. Sites responsivos 2. SPAs (#old) 3. PWAs (#gold) 4. CMSs (Hehehe) 5. Acessibilidade, Usabilidade 6. Versionamento 7. CI/CD (ou pelo menos deveríamos...)
- 20. 20 O que usamos?
- 21. 21
- 22. Hoje somos muito profissionais, mas o desenvolvimento front-end se tornou confuso demais para os não iniciados 22 Conclusão
- 28. E o que torna a vida do front-end ainda mais penosa, é montar um ambiente completo para desenvolvimento 28
- 29. 29 + + =
- 30. Podemos categorizar os “front-enders” em basicamente 4 tipos: 30
- 31. Front-end: Web Designer • Photoshop • Editor de Texto ou IDE (Dreamweaver é você?! ) • Browsers diversos (mentira, só o Chrome mesmo ;) ) • Bibliotecas (lê-se jQuery e associados)
- 32. Front-end: CMS (MENTIRA, WORDPRESS!!! ) • Photoshop • Editor de Texto ou IDE (Dreamweaver é você?! ) • Browsers diversos (mentira, só o Chrome mesmo ;) ) • Bibliotecas (lê-se jQuery e associados) • Normalmente PHP • Servidores: Apache, NGINX, IIS • Banco de dados: MySql, MongoDB
- 33. Front-end: SPA • Photoshop • Editor de Texto ou IDE • Browsers diversos (mentira, só o Chrome mesmo ;) ) • Libs e frameworks (AngularJS, React, SASS) • NodeJS • As vezes Ruby, Python • As vezes MongoDB
- 34. Front-end: TUDÃO
- 35. 4. Principais problemas do Mundo Moderno Ou do mundinho front-end mesmo...
- 36. Principais problemas 1. Linha de comando: a famosa tela preta. 2. Dificuldades para reinstalação ou replicação de máquinas. 3. Compatibilidade entre libs e projetos. 4. Lentidão para iniciar um novo projeto. 5. Diferenças entre o ambiente de desenvolvimento e produção.
- 37. 5. Soluções parciais e “individuais”
- 38. 1. Não ter um bash decente no ambiente de desenvolvimento limita o “front-ender”
- 39. Quem usa Linux, MacOS ou UNIX, tira de letra esse ponto. Mas a galera de Windows...
- 40. 40
- 41. Contudo, porém, todavia, não obstante...
- 45. 2. A instalação e a replicação do ambiente não deve tomar todo seu tempo e atenção
- 46. Facilidades do mundo open source: GERENCIADORES DE PACOTES • APT: Debian, Ubuntu, Mint • RPM: RedHat, Fedora, CentOS • PACMAN: Arch Linux Mas o Windows não tem nada disso nativamente...
- 47. Contudo, porém, todavia, não obstante...
- 49. 49
- 50. 50
- 51. 3. Manter a compatibilidade entre as linguagens e libs utilizadas é fundamental!
- 52. Facilidades do mundo open source: GERENCIADORES DE VERSÃO • phpenv • rbenv • rvm • pyenv • nvm Mas o Windows não tem nada disso...
- 53. É MENTIRA!!! Tem sim... ;)
- 54. 54
- 55. 55
- 56. Mas isso traz mais coisas para instalar...
- 57. 57
- 58. 58
- 59. 4. Iniciar um novo projeto não pode ser só o momento de experimentar, temos que manter a solidez e a velocidade
- 62. 62
- 63. 63
- 64. 5. Temos que erradicar a expressão: “na minha máquina funciona!”
- 65. Vamos montar uma máquina local “idêntica” em Hardware e Software ao ambiente de produção?
- 66. 66
- 67. 6. Virtualizar É a solução... Será?
- 69. Windows 10 trouxe a possibilidade de rodar o Ubuntu Server nativamente lxrun /install /y Nada como o bash original!
- 72. E se você combinar todas as soluções anteriores + a possibilidade de rodar o Ubuntu no Windows, você já será bem mais feliz! Apesar de nada prático... O problema 5 praticamente continua...
- 73. 7. Vagrant
- 74. O Vagrant é uma ferramenta que permite que criemos rapidamente ambientes virtuais para fazermos testes, desenvolvimento ou provisionamento de ambientes utilizando as soluções de virtualização mais comuns como o Virtualbox e o VMWare, sendo também compatível com os principais provedores cloud como AWS, Rackspace e Digitalocean. Além disto, tem suporte a várias tecnologias de provisionamento como Puppet, Chef, Salt, Ansible e CFEngine, com isto, você já cria e configura o ambiente em um único processo, é realmente mágico. http://gutocarvalho.net/octopress/2014/05/09/entenda-o-vagrant/
- 75. Algumas terminologias importantes: • Box - É um pacote que contém a base da sua VM. Basicamente é uma imagem do S.O. Se você não sabe o que é uma imagem é como se fosse um clone do seu Sistema Operacional que pode ser executado pra subir exatamente a mesma configuração em outro computador. :) • Vagrantfile - arquivo que contém as definições para executar a Box. Como serviços que serão executados, arquivos compartilhados, programas que serão instalados, etc. • Guest - É a máquina que foi levantada. Em meios menos técnicos é sua VM. • Provider - O Software de virtualização(Virtualbox ou VMWare). • Provisioner - É o software que vai configurar a máquina na hora em que você ligar ela pela primeira vez e ele também vai verificar se está tudo OK quando iniciar ela de novo. As opções mais comuns são: Shell Script, Puppet e Chef.
- 76. Depêndencias: • VirtualBox ou VMware (pago ) • Vagrant
- 77. Exemplos
- 78. Escolha um box e seja feliz! Se não encontrar um que te atenda, CRIE! https://atlas.hashicorp.com/boxes/search?_ga=2.130519375.177686634.1497 330572-684445749.1497330572
- 81. Mas nada é perfeito! O Vagrant “levanta” todo o sistema operacional. E apesar de mais fácil para configurar e mais leve que simplesmente virtualizar, pode ser um problema em alguns casos.
- 82. Links • http://gutocarvalho.net/octopress/2014/05/09/entenda-o-vagrant/ • https://nandovieira.com.br/usando-o-vagrant-como-ambiente-de- desenvolvimento-no-windows • https://woliveiras.com.br/posts/vagrant-introducao-instalacao/ • https://woliveiras.com.br/posts/configurar-vagrant/ • http://www.akitaonrails.com/2013/10/25/iniciante-criando-um-ambiente-de- desenvolvimento-com-vagrant-e-chef-solo#.U-_1H_ldX2M • http://www.erikaheidi.com/vagrant-cookbook/ • https://imasters.com.br/front-end/front-end-ops- vagrant/?trace=1519021197&source=single • http://php-pb.net/2014/06/04/vagrant-e-provisionadores/
- 83. 8. Docker
- 84. Primeiro temos que definir o que não é Docker. Docker não é um sistema de virtualização tradicional. Enquanto em um ambiente de virtualização tradicional nós temos um S.O. completo e isolado, dentro do Docker nós temos recursos isolados que utilizam bibliotecas de kernel em comum (entre host e container). http://www.mundodocker.com.br/o-que-e-docker/
- 86. Algumas terminologias importantes: • Images - Base para os containers. Como se fossem os “boxes” do Vagrant. • Dockerfile - Arquivo que contém as definições para automatizar a criação de images. • Containers - São criados por Docker Images e rodam as aplicações. • Docker Daemon - Serviço em background que roda no host e gerencia a construção, execução e distribuição. • Docker Client - Linha de comando que permite que o usuário interaja com o Daemon. • Docker Compose - Ferramenta para definir e rodar múltiplos containers. • Docker Hub - Repositório para docker images.
- 88. Exemplos
- 89. Escolha uma imagem e seja feliz! Se não encontrar uma que te atenda, CRIE! https://hub.docker.com/explore/
- 91. Mas nada é perfeito! Gerenciar vários containers pode tornar sua vida um “Deus nos acuda”.
- 92. Links • https://www.docker.com/products/docker-toolbox • http://www.mundodocker.com.br/o-que-e-docker/ • https://woliveiras.com.br/posts/uma-rapida-introducao-ao-docker-e-instalacao- no-ubuntu/ • https://woliveiras.com.br/posts/imagem-docker-ou-um-container-docker/ • https://woliveiras.com.br/posts/comandos-mais-utilizados-no-docker/ • http://stefanteixeira.com.br/2015/03/17/comandos-essenciais-docker- monitoramento-containers/ • http://trodrigues.net/articles/2015/02/front-end-development-with-docker.html • https://www.bryanbraun.com/2014/07/15/the-frontend-developers-guide-to- docker/ • https://fjorgemota.com/docker-containers-para-a-vida-ou-nao/
- 93. 9. Quando virtualizar, quando usar Vagrant e quando usar Docker?
- 95. 10. Dúvidas Ajuda o tio Charles vai. Pergunta não... Tô com fome e sede... Bora aplaudir e tá de boa...
- 97. São Paulo Rua Fidêncio Ramos, 308, 10º andar, Vila Olímpia CEP: 04551-902 Rio de Janeiro Av. General Justo, 375, 9º andar, Centro CEP: 20021-130 www.mundipagg.com Charles Carrari ccarrari@mundipagg.com