O que vamos aprender?
- O que é o Yarn
- Como o Yarn funciona
- Como instalar o Yarn
- Como instalar o Jquery com Yarn
- Como instalar o Bootstrap com Yarn
- Como instalar o Materialize com Yarn
Screencast
O que é o Yarn
O Yarn é um gerenciador de pacotes javascript rápido, seguro e confiável que foi integrado no rails >= 5.1 para facilitar ainda mais a gestão das dependências. (agora você usa o Bundler para bibliotecas ruby e o Yarn para bibliotecas javascript, simples assim)
Ele é uma alternativa mais robusta ao NPM e ao bower e permite inclusive a instalação de todas as bibliotecas disponíveis destes outros dois gerenciadores.
Além disso com ele você pode instalar bibliotecas offline (se você instalou uma vez ele deixa “cacheado” na sua máquina para que você instale em outros projetos de forma offline).
Como o Yarn funciona
Assim como o Bundler o Yarn possui um arquivo onde as dependências são declaradas chamado package.json (o mesmo do NPM), um exemplo do arquivo:
|
1 2 3 4 5 6 7 8 9 10 |
{ "name": "yarn", "private": true, "dependencies": { "bootstrap": "^3.3.7", "jquery": "^3.2.1", "materialize-css": "^0.100.2" }, "devDependencies": {} } |
Para instalar as dependências listadas no package.json você pode rodar:
|
1 |
yarn install |
Ele também possui um arquivo chamado yarn.lock para garantir que a mesma versão da biblioteca seja instalada em outras máquinas, um exemplo do arquivo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. # yarn lockfile v1 bootstrap@^3.3.7: version "3.3.7" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71" hammerjs@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1" "jquery@^3.0.0 || ^2.1.4", jquery@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787" materialize-css@^0.100.2: version "0.100.2" resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.100.2.tgz#9ca32b24904c9a04491fc7d0a2e9402e7b1dae07" dependencies: hammerjs "^2.0.8" jquery "^3.0.0 || ^2.1.4" |
No Yarn é possível instalar uma nova biblioteca rodando (as bibliotecas instaladas assim são adicionadas no package.json):
|
1 |
yarn add your_package |
Para retirar uma biblioteca você pode rodar (as bibliotecas removidas assim são removidas no package.json):
|
1 |
yarn remove your_package |
Para saber mais sobre ele: Documentação do Yarn
Como instalar
Para instalar basta acessar esse guia do Yarn, selecionar o seu sistema Operacional e seguir o passo a passo.
Vamos aos códigos \o/
Nós vamos criar um pequeno projeto para demonstrar como instalar o Jquery, Boostrap e Materialize usando o Yarn, as dependências para seguir o exemplo são:
Preparando o Projeto
0 – Instale uma versão > 5.1 do rails:
|
1 |
gem install -v 5.1.4 |
1 – Gere o projeto rodando:
|
1 |
rails new example |
2 – Entre no projeto:
|
1 |
cd example |
3 – Crie o banco de dados e rode as migrations:
|
1 |
rails db:create db:migrate |
4 – Crie uma página rodando:
|
1 |
rails g controller Page home |
Como instalar o Jquery com Yarn
1 – Coloque em app/javascripts/page.coffee
|
1 2 |
$(document).on 'turbolinks:load', -> $('h1').html('We changed the title using JS') |
2 – Vai apareceu o erro no console:
“Uncaught ReferenceError: $ is not defined”
3 – Rode no console:
|
1 |
yarn add jquery |
4 – Acrescente ao inicio dos require em app/assets/javascripts/application.js
|
1 |
//= require jquery |
5 – Atualize o servidor e veja o resultado no browser \o/
Como instalar o Bootstrap com Yarn
1 – Atualize o app/views/page/home.html.erb colocando:
|
1 2 3 |
<p>Bootstrap Button</p> <button type="button" class="btn btn-primary">Button</button> |
2 – Veja no browser que o estilo não foi aplicado
3 – Role no console para instalar:
|
1 |
yarn add bootstrap |
4 – Acrescente após no inicio dos require em app/assets/stylesheets/application.css
|
1 |
*= require bootstrap/dist/css/bootstrap |
5 – Vejo no browser que o estilo foi aplicado \o/
Como instalar o Materialize com Yarn
1 – Atualize o app/views/page/home.html.erb colocando:
|
1 2 3 |
<p>Materialize Button</p> <a class="waves-effect waves-light btn">button</a> |
2 – Veja no browser que o estilo não foi aplicado
3 – Role no console para instalar:
|
1 |
yarn add materialize-css |
4 – Acrescente após no inicio dos require em app/assets/stylesheets/application.css (e remova o boostrap):
|
1 |
*= require materialize-css/dist/css/materialize |
5 – Vejo no browser que o estilo foi aplicado
Extra: Deploy no heroku com Yarn
Com a utilzação das dependencias Js sendo gerenciadas pelo Yarn o deploy no heroku fica um pouco diferente, então achei válido compartilhar o passo a passo com você também 🙂
1 – Primeiro (via heroku Cli) vamos criar nosso APP no heroku (rode no console na pasta do seu projeto):
|
1 |
heroku create myexample |
2 – Agora vamos incluir os buildpacks (que são os pacotes que vão ajudar o heroku a instalar nossas dependências), rode no console:
|
1 |
heroku buildpacks:add --index 1 heroku/nodejs |
|
1 |
heroku buildpacks:add heroku/ruby |
*Se você fizer o deploy sem ‘setar’ o buildpack o heroku vai detectar qual é o seu framework principal e vai ‘setar’ para você (no caso do buildpack do ruby), mas como vamos usar também o buildpack nodejs para instalar os pacotes do yarn então já aproveitamos e ‘setamos’ tudo na mão.
3 – Para finalizar basta rodar os comandos para subir o código:
|
1 |
git add . |
|
1 |
git commit -m 'My commit message' |
|
1 |
git push heroku master |
4 – Pronto \o/
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
Conclusão
O Yarn é incrível e veio para nos ajudar a gerenciar as dependências javascript no Rails, então vale a pena integra-lo a suas ferramentas do dia a dia 🙂
Aproveite para conhecer o Active Storage também no nosso post “Usando na prática a nova ferramenta de upload do Rails“, assim como o Yarn ele está sendo inserido nessa nova fase do Rails (>= 5).
Obrigado por acompanhar o OneBitCode,
Estamos nos esforçando muito criar conteúdos que expandam seus conhecimentos como programador, conte com a gente 🙂
Grande abraço,
Leonardo Scorza
Você é novo por aqui?
Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!
O OneBitCode trás conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.
Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no https://onebitcode.com/backpage-women-seeking-men-fort-myers-fl/, ouça os date blink social relationship single dating site usa e faça parte de nossa Newsletter.
Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):
- https://onebitcode.com/50-cent-is-dating-my-mom/
- Desenvolvendo seus projetos como um profissional
- Guia do Freelancer
- PDF com links fundamentais para quem quer ser um freelancer de sucesso
- Guia One Bit Code de Gems
- Baixe gratuitamente seu e-Book com 60 Gems separadas por categorias
Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente!
Seja por Facebook ou e-mail, estamos aqui para você 🙂
Bem-vindo à família OneBitCode \o/
Excelente post, parabéns!!
Como posso mudar as cores padrão do materialize?
Obrigado