Resumo da Aula sobre Primer View Component em Ruby on Rails

Olá pessoal, esta aula será uma breve introdução ao primer review component. Então, para começar isso, vamos falar de Ruby on Rails. Existe um framework de web chamado Ruby on Rails, criado pelo DHH, que é um framework web escrito na linguagem Ruby. Então, no Ruby on Rails, existem templates, rb. Nesses templates nós podemos usar o primer review component para de certa maneira para espelhar o comportamento de componentes como, por exemplo, do WBioteca React. React é uma biblioteca de front-end, JavaScript, que você escreve componentes de interface de usuário. Então, o view component, sem o primer, só falar de view component, view component foi influenciado pelo React para fazer uma espécie de sistema similar de componentes no Ruby on Rails, com HTML e Rb. E, desses view components, você pode criar vários tipos de componentes que nada mais, nada é que uma classe de Ruby, acompanhado de um arquivo HTML e Rb, certo? Então, o GitHub, que criou essa biblioteca, agora o GitHub também tem um framework de CSS chamado primer, que é a definição de várias classes que você pode usar para poder obter o mesmo estilo usado pelo GitHub, com as classes com os estilos já definidos. Então, o primer view component é a combinação, o uso de view component mais com as classes do sistema primer do GitHub. Com isso, você pode instanciar esses objetos, que são componentes apenas a classes de Ruby, que são objetos que são objetos que são objetos que são objetos que são objetos que são objetos que são objetos que são objetos, e esses objetos geram um template. E esse template já automaticamente usa as classes do primer para você não ter que escrever os elementos de HTML e ter que escrever a classe na mão. Basicamente, é isso. Tem também outras implicações como a presença de acessibilidade por padrão. Tá bom? Então, você vai ver aqui no site primer.style, clicar em build, CSS, você já viu o sistema de design. O GitHub, isso que tudo é open source, tá pessoal? Tudo é open source. E tem também para react e tem o view component que é mais para Ruby on Rails. Então, vamos ver aqui. Eu vou demonstrar o view component no contexto usando as classes do primer, que é o primer view component. Tá bom? E o Ruby on Rails. Eu já tenho aqui em de lado. Eu gerei um aplicativo de Ruby on Rails, versão 7. Tá? Então, você vai lá no... Para poder instalar, tem aqui a mesma coisa do tutorial. Vai no seu gem file. Tá? E adiciona a... A linha como gems, passos, abre aspas. Na verdade, o primeiro seria o view component, tá? Na verdade, eu acho que o gem... Primeiro, o view component já requer isso, não precisa. Deixa eu ver aqui no lock que eu já tinha instalado antes. View component. Então, já tinha aqui, tá? Então, não precisa requerer explicitamente o view underscore component. O primer view component já faz isso. Então, eu posso tirar. Então, você adiciona essa entrada de gem, primer, underline view, underline components. Vígula versão. Nesse caso, eu vou explicitamente adicionar a versão mais atual. Note que esse primer view component ainda está em desenvolvimento muito ativo. Então, cada versão de patch, existem... Quebra o código. Pode quebrar o código da versão anterior, tá bom? Então, por isso que eu estou usando a específica versão específica aqui. Se você não quiser usar a versão específica, só deve estar isso. Para ser mais atual. Mas eu acho que pode quebrar o código, porque está sempre mudando essa biblioteca, tá? Então, essa é a aula só para demonstrar o uso de geral. Quando você coloca isso no seu gem, você pode dar o bundle install. Bundle install. Ele vai instalar, eu já tinha instalado. Depois do bundle install, vamos fazer a configuração aqui. Você vai no config, na pasta config, apliquei trrb. Depois dessa declaração da classe, depois de tudo isso você pode dar o require view component, que vai requerir a funcionalidade de view components. E dar o require primer, barra view components, bar, engine, que é mais específico do primer, para ter aqueles componentes já definidos. Você tem que ter que manualmente criar os seus próprios view componentes. Para adicionar o JavaScript, ou você instala pelo npm-yarn, qualquer sistema que você usa, o atprima, barra view, traça o component, ou você pode usar também lá, já do Rails mesmo, se você não tiver sistema separado aqui de JavaScript. Eu posso ir lá no meu layout app, views, layouts, application. Antes do fechamento do head, eu vou incluir, vou colocar o quebra de texto, eu vou incluir essa, a menor que o Centro Igual, JavaScript, include underline tag, e coloca aqui primer underscore view underscore component. Essa documentação aqui diz só primer, mas está errado, acho que tem um bug que eles não concertaram. Tem um eixo lá no GitHub, que você pode encontrar, que vai dar a mensagem de erro, e ele diz que para concertar, você põe underscore view component. Então vou colocar isso para funcionar. E com isso vai adicionar configurar o primer. Agora, ele depende do CSS do primer CSS. Se você colocar sem o CSS, ele vai funcionar mais as classes, o estilo do negócio não vai funcionar. Você tem que adicionar o primer CSS, vai lançar de build CSS as instruções. Pode instalar via npm, ou yarn, ou eu já coloquei aqui o cdn só para estar mais rápido. Então coloquei esse cdn de link do primer, que você pode ver lá no build CSS, get in starter, tem aqui lá no final o link do cdn, se não quiser usar o cdn, é só instalar pelo npm install, arrua, primer, barra, css. Então está aqui no antefechamento red. Vamos testar isso como fazer. Eu criei um controller aqui, um controller aqui chamado make controller, que não tem nada, e ele criou um, eu criei um avio chamado index.html só para testar. Vou colocar uma coisa aqui, aqui eu coloquei um exemplo de um botão, e também mudei a rota para root ser o controller main, eu criei a ação index, que automaticamente vai renderizar o main bar, o views barra main bar index. Vou sorrar o servidor aqui, bin, real, vou acessar isso aqui, o link. Tá bom, então parece aqui testar o palavra que eu coloquei, e seguindo o botão. Então você note que o botão parece aqui, e esse botão usa a classe btn, que você não precisou digitar, que é o primer view components, o primer view components já adiciona a classe para você. Então como é que instancia qualquer view component, é só colocar o menor que, percentual igual, render, chamada da função render, passa o nome do component nesse caso primer, 2.2.botn component, como é que acha isso, você vai na documentação, uma estação view components, click in buttons, ele te mostra oh, nessa aqui é o CSS, tem que clicar em view components, build view components e você pode clicar em button, ele te mostra aqui se você, ela é embaixo os exemplos, render, primer,RightPrimer, botacomponent.new e tem um bloco aqui com o texto dentro deste bloco de, né? Agora um detalhe aqui que eu quero te mostrar, se você remover o parentes, a gente sabe que no Ruby não precisa ter parentes na chamada de função, né? Se você precisar exer que não vai funcionar, né? Apareceu nada no teste do botão. Por que? Porque esse aqui o bloco tá sendo passado para o Neo, mas tá incorreto. O bloco do teste tem que ser passado para o bloco da função chamado do render, para poder fazer isso daqui para o parentes. Eu não considero sempre que o parentes aqui para não ter esse problema, tá? Eu passo o bloco para o render com o texto do botão. O conteúdo que aparecer dentro do template aqui, do botão component. Se você quiser passar parâmetro, é só abrir aqui no Neo, né? E no Ruby também não precisa ter parentes na chamada de função. Aí você pode passar os parâmetros aqui, por exemplo. Você olha aqui na argumentos, aí tem scheme. Se você passar scheme, dois pontos, símbolo, né? Dois pontos primary, ele vai botar o botão verde. Tá? Aí você pode mudar esse para, sei lá, qual é o outro símbolo. Pode falar mais opções, outros argumentos, vírgula... Pelo lá, o type que ele tem do botão. Esse type vai ser aplicado ao... Aprendendo esse type, parece que vai mudar para o botão type button, o type submit. E assim por diante. Então, é aquele attribute type do HTML. Tem vários argumentos, seis argumentos, você pode usar esses aqui, que adiciona classes utilitárias, por exemplo. Se eu quiser adicionar uma margem à esquerda do botão, eu posso dizer que ML, dois pontos, sei lá, nível 4. O que adiciona o nível 4, que corresponde, eu acho, a 4 vezes 4, 16, 24. 24px, né? Pixels. Então, esse argumento ML, 4, significa margem, left, né? Margem à esquerda. E o nível 4, que significa 24px. Você olha lá na sistema argumentos, qual é a correspondência. Vem tudo do primer CSS, né? E ele adiciona essa classe ml, traço 4, que vem do primer CSS. Tá bom, então esse é um exemplo aí, eu vou dar só mais um exemplo. Vamos ver. Um label, vamos fazer um label. Essa etiqueta aqui. Vamos fazer uma dev aqui. Deve ser dev, eu vou colocar. Quero criar esse label, sei lá, azul aqui. Para criar isso, vamos lá de novo, para poder renderizar um view component. Vai, menor que é percentual igual, fecha percentual maior que. E dentro disso, você tem uma função render. Dentro da função render, passa a instância da classe do objeto. Então, o nome é primer, 2.2.0 label component. Continuo para criar um novo objeto. Se quiser passar argumentos, abre parênteses, a gente cola scheme. Nesse caso, a gente quer o azul, quer o accent. Accent, né? Passa um símbolo, né? 2.0 accents, como esse argumento nomeado. E o conteúdo, passa como o bloco para o render. Se você quiser, multipla linhas, você pode fazer do. Assim, e ponha um percentual, and, percentual. Dessa maneira aqui, por exemplo. Etiqueta. Vamos olhar. Então, o conteúdo da etiqueta. E pode ser qualquer coisa, né? Você até um... Outra coisa que você quiser. Um link, né? Ah, agarra alguma coisa. Acho que também funciona. Barra. E agora etiqueta é um link. O cenote que você vai inspecionar, é o... A anchor, tag anchor, ah. Dentro do container do label component, que nesse caso é o span, né? Se você não adicionar, você não precisa escrever essas classes, né? Esse é um dos pontos mais principais do uso do primer view component, que ele já aplica as classes do sistema primer automaticamente, sem você ter que escrever. Né? Então, aqui é múltiplas linhas com o do e end, e aqui é uma linha própria, só com as chaves. Tá bom? Acho que o bloco é passado pro render, não é pro new. Tá bom? Então essa é uma breve introdução ao primer view component, vamos revisar tudo de novo. Então o primer view component, a gente pode usar o sistema de design, de CSS do GitHub, que é open source, tudo isso aqui é open source, você pode usar no seu projeto. Então o primer CSS fornece as classes CSS, você pode escrever manualmente. Para de escrever manualmente no Ruben Rails, no template de HTML e ARB, você pode usar os chamados view component. Agora, view component pro CISO é uma coisa. Primer view component é outra. Primer view component é uma implementação de criação de vários componentes novos usando o sistema view component. Para view component, o sistema foi criado pelo GitHub também, para você poder fazer uma espécie de componentes no estilo do React, no Ruben Rails. Nessa mesma maneira aqui, você fala render o nome do componente, ponto new, para estanciar, e ele vai aparecer lá o template para ser substituído nesse template aqui. Agora, o primer é uma implementação, uma criação de vários componentes já pré definidos que você pode reutilizar. Então ele cria esses vários componentes como o primer button component e o label component. Você pode ver no documentação aqui, na primer.style, build view component. Clic aqui, tem vários exemplos, counter, não sei o que, a gente view button, e a gente view label. Tem que usar os exemplos e o código para você ver. A gente view a configuração, só olhar aqui de novo, gem file, adiciona gem, primer view component. Not here, está em desenvolvimento, então a versão pode quebrar várias coisas, então fique sempre atento às novas mudanças. O que fazer um divi aqui para você ver? GitHub, para adicionar aquela gem. Lá no apliqueiro de html adicionaoned include para JavaScript se você não já tiver usado pelo NPM. Tem que ter o CSS, então adiciona edcedn mesmo e veja o NPM. No arquivo, o apliqueiro de exemplo da parte de config, você tem que adicionar o require view component e o require primer, barra view, underline components, barra engine. Depois lá da definição daquela classe, apliqueir. que foi a minha rota aqui em Tornado a ver com o pirocinato? Obrigado por assistir, deus like que você gostou dessa novidade, desse vídeo e até a próxima.