Programming

Ruby on Rails 8 - Frontend Rápido Usando Tailwind como um Frameworks CSS Classless

Este artigo é intencionalmente muito semelhante aos anteriores desta série, mas desta vez usaremos o framework Tailwind como um framework css classless. Inicie um novo aplicativo Rails O time antes do comando rails serve para exibir no final da execução do comando o seu tempo de execução. No exemplo abaixo, levou 47 segundos. $ rails -v Rails 8.0.0 $ time rails new classless-css-tailwind ... real 0m47.500s user 0m33.052s sys 0m4.249s O Rails 8, dentro de sua filosofia No Build, utilizará por padrão o Propshaft como biblioteca de pipeline de assets e o Importmap como biblioteca para JavaScript. O Importmap não realiza nenhum tipo de processamento do JavaScript. Abra o projeto com o VSCode ou seu editor preferido $ cd classless-css-tailwind && code .   Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb. Exibir mais … Por Convenção sobre Configuração (CoC - Convention over Configuration), o Rails utiliza o application.html.erb como layout padrão para renderizar todas as páginas; O Arquivo original no Rails 8 deve ter um conteúdo igual ou parecido com o copiado abaixo: A parte superior dentro da tag … possuem os elementos estruturais importantes para que a página seja renderizada e funcione corretamente. A tag headé usada para incluir metadados e recursos importantes que ajudam a configurar o comportamento da página (com javascript), sua aparência (com CSS), sua relação com outros sistemas e serviços e configurações de segurança como a proteção para CSRF e CSP ; O conteúdo principal das páginas será renderizado dentro de , através da tag ERB . Esta tag serve como ponto de integração para incluir o conteúdo de uma view renderizada dinamicamente pelo Rails;   Gere as páginas de teste, com um controller pages e as actions html_test_1, html_test_2, html_test_3 e html_test_4 Exibir mais … $ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 create app/controllers/pages_controller.rb route get "pages/html_test_1" get "pages/html_test_2" get "pages/html_test_3" get "pages/html_test_4" invoke erb create app/views/pages create app/views/pages/html_test_1.html.erb create app/views/pages/html_test_2.html.erb create app/views/pages/html_test_3.html.erb create app/views/pages/html_test_4.html.erb invoke helper create app/helpers/pages_helper.rb Como durante a criação do controller e das actions acima as rotas também foram adicionadas, podendo acessar qualquer action criada a partir dos links localhost:3000/pages/html_test_1 localhost:3000/pages/html_test_2 localhost:3000/pages/html_test_3 localhost:3000/pages/html_test_4   Abra o arquivo config/routes.rb pelo VSCode Inclua a linha abaixo no final do arquivo para direcionar a raiz da página para o controller pages e action html_test_1 criados anteriormente. Assim, a primeira página a ser exibida ao acessar seu site ou sistema será a página html_test_1, do controller pages. Caso contrário, iria exibir a página padrão do rails. root "pages#html_test_1" Você poderia ter ignorada a adição das rotas para as actions criadas de tivesse passado o parâmetro --skip-routes ao criar o controller. O comando completo passaria a ser rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes   Exibindo as rotas do Rails Exibir mais … Usando o terminal, você pode exibir as rotas especificando um controller (com -c), por exemplo, do controller pages $ rails routes -c pages Prefix Verb URI Pattern Controller#Action pages_html_test_1 GET /pages/html_test_1(.:format) pages#html_test_1 pages_html_test_2 GET /pages/html_test_2(.:format) pages#html_test_2 pages_html_test_3 GET /pages/html_test_3(.:format) pages#html_test_3 pages_html_test_4 GET /pages/html_test_4(.:format) pages#html_test_4 Ou pode exibir todas as rotas com $ rails routes Prefix Verb URI Pattern Controller#Action /assets Propshaft::Server pages_html_test_1 GET /pages/html_test_1(.:format) pages#html_test_1 pages_html_test_2 GET /pages/html_test_2(.:format) pages#html_test_2 pages_html_test_3 GET /pages/html_test_3(.:format) pages#html_test_3 pages_html_test_4 GET /pages/html_test_4(.:format) pages#html_test_4 rails_health_check GET /up(.:format) rails/health#show (...) Também é possível acessar as rotas pelo navegador usando o endereço http://127.0.0.1:3000/rails/info/routes. Não esqueça de iniciar o servidor de desenvolvimento com bin/dev ou o servidor rails padrão com rails server do diretório

Jan 15, 2025 - 02:11
Ruby on Rails 8 - Frontend Rápido Usando Tailwind como um Frameworks CSS Classless

Este artigo é intencionalmente muito semelhante aos anteriores desta série, mas desta vez usaremos o framework Tailwind como um framework css classless.

Inicie um novo aplicativo Rails

  • O time antes do comando rails serve para exibir no final da execução do comando o seu tempo de execução. No exemplo abaixo, levou 47 segundos. 
$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

O Rails 8, dentro de sua filosofia No Build, utilizará por padrão o Propshaft como biblioteca de pipeline de assets e o Importmap como biblioteca para JavaScript. O Importmap não realiza nenhum tipo de processamento do JavaScript.

Abra o projeto com o VSCode ou seu editor preferido 

$ cd classless-css-tailwind && code .

 

Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb.

Exibir mais …

  • Por Convenção sobre Configuração (CoC - Convention over Configuration), o Rails utiliza o application.html.erb como layout padrão para renderizar todas as páginas;
  • O Arquivo original no Rails 8 deve ter um conteúdo igual ou parecido com o copiado abaixo: 


  
    <</span><span class="err">%=</span> <span class="na">content_for</span><span class="err">(</span><span class="na">:title</span><span class="err">)</span> <span class="err">||</span> <span class="err">"</span><span class="na">Classless</span> <span class="na">Css</span><span class="err">"</span> <span class="err">%</span><span class="nt">>
     name="viewport" content="width=device-width,initial-scale=1">
     name="apple-mobile-web-app-capable" content="yes">
     name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

     rel="icon" href="/icon.png" type="image/png">
     rel="icon" href="/icon.svg" type="image/svg+xml">
     rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  

  
    <%= yield %>
  • A parte superior dentro da tag … possuem os elementos estruturais importantes para que a página seja renderizada e funcione corretamente. A tag headé usada para incluir metadados e recursos importantes que ajudam a configurar o comportamento da página (com javascript), sua aparência (com CSS), sua relação com outros sistemas e serviços e configurações de segurança como a proteção para CSRF e CSP ;
  • O conteúdo principal das páginas será renderizado dentro de , através da tag ERB <%= yield %>. Esta tag serve como ponto de integração para incluir o conteúdo de uma view renderizada dinamicamente pelo Rails;

 

Gere as páginas de teste, com um controller pages e as actions html_test_1, html_test_2, html_test_3 e html_test_4

Exibir mais … 

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb
  • Como durante a criação do controller e das actions acima as rotas também foram adicionadas, podendo acessar qualquer action criada a partir dos links
    • localhost:3000/pages/html_test_1
    • localhost:3000/pages/html_test_2
    • localhost:3000/pages/html_test_3
    • localhost:3000/pages/html_test_4

 

Abra o arquivo config/routes.rb pelo VSCode

  • Inclua a linha abaixo no final do arquivo para direcionar a raiz da página para o controller pages e action html_test_1 criados anteriormente. Assim, a primeira página a ser exibida ao acessar seu site ou sistema será a página html_test_1, do controller pages. Caso contrário, iria exibir a página padrão do rails. 
root "pages#html_test_1"
  • Você poderia ter ignorada a adição das rotas para as actions criadas de tivesse passado o parâmetro --skip-routes ao criar o controller. O comando completo passaria a ser rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

 

Exibindo as rotas do Rails

Exibir mais …

Usando o terminal, você pode exibir as rotas especificando um controller (com -c), por exemplo, do controller pages

$ rails routes -c pages
           Prefix Verb URI Pattern                  Controller#Action
pages_html_test_1 GET  /pages/html_test_1(.:format) pages#html_test_1
pages_html_test_2 GET  /pages/html_test_2(.:format) pages#html_test_2
pages_html_test_3 GET  /pages/html_test_3(.:format) pages#html_test_3
pages_html_test_4 GET  /pages/html_test_4(.:format) pages#html_test_4

Ou pode exibir todas as rotas com

$ rails routes
             Prefix Verb URI Pattern                   Controller#Action
                         /assets                       Propshaft::Server
  pages_html_test_1 GET  /pages/html_test_1(.:format)  pages#html_test_1
  pages_html_test_2 GET  /pages/html_test_2(.:format)  pages#html_test_2
  pages_html_test_3 GET  /pages/html_test_3(.:format)  pages#html_test_3
  pages_html_test_4 GET  /pages/html_test_4(.:format)  pages#html_test_4
 rails_health_check GET  /up(.:format)                 rails/health#show
              (...)
  • Também é possível acessar as rotas pelo navegador usando o endereço http://127.0.0.1:3000/rails/info/routes. Não esqueça de iniciar o servidor de desenvolvimento com bin/dev ou o servidor rails padrão com rails server do diretório raíz do seu projeto. O servidor de desenvolvimento fica “escutando” alterações nos arquivos de javascript e nos arquivos de css para realizar o processamento necessário para disponibilizá-los aos usuários.
  • Para que as alterações nestes arquivos sejam realizadas e visualizadas instantaneamente no navegador, é necessário instalar uma gema como a Rails Livre Reload.

Vamos criar quatro páginas com conteúdo HTML para testar os estilos CSS.

O Ruby on Rails utiliza a arquitetura MVC (Model-View-Controller) por padrão para iniciar a organização de seu projeto. Boa parte do seu código está organizado nas seguintes pastas:

  • Quando o código estiver relacionado à lógica de domínio/negócio e dados, mantenha na pasta app/models;
  • O código relacionado à exibição (HTML, JSON, XML, etc...) ficará em app/views;
  • Código elacionado ao ciclo de vida da requisição, ficará em app/controllers;

 

Insira o conteúdo da página html_test_1

Exibir mais … 

  

     id="content" class="container">
      

        
Lorem ipsum dolor sit amet

        
Element demos

        

          This is supposed to be a demo page so we need more elements!
        

        
Form elements

        

          

             for="email">Email
             type="email" name="email" id="email" placeholder="john.doe@gmail.com">
          


          

             for="id">User id (read only)
             readonly name="id" id="id" value="04D6H89Z">
          


          

             for="disabled">Random disabled input
             disabled name="disabled" id="disabled" placeholder="Because why not?">
          


          

             for="about">About me
             name="about" id="about" placeholder="I am a textarea...">
          


          

             type="checkbox" name="remember" id="remember">
             for="remember">Remember me
          


          

            
               type="checkbox" name="in-label" id="in-label" checked>
              Is this checkbox inside a <label> element?
            
          


          

            

              Choose a cardinal direction:

              

                 type="radio" id="north" name="direction" value="north" checked>
                 for="north">North
              


              

                 type="radio" id="east" name="direction" value="east">
                 for="east">East
              


              

                 type="radio" id="south" name="direction" value="south">
                 for="south">South
              


              

                 type="radio" id="west" name="direction" value="west">
                 for="west">West
              


            

          


           type="submit">
        

        
Code

        

          Below is some code, you can copy it with Ctrl-C.
          Did you know, alert(1) can show an alert in JavaScript!
        
        
// This logs a message to the console
console.log('Hello, world!')


        
Other

        
Here's a horizontal rule and image because I don't know where else to put them.
         src="http://via.placeholder.com/408x287" alt="Example image">
        


        
And here's a nicely marked up table!
        

          
            

              Name
              Quantity
              Price
            

          
          
            

              Godzilla
              2
              $299.99
            

            

              Mozilla
              10
              $100,000.00
            

            

              Quesadilla
              1
              $2.22
            

          
        


        
Typography

        

          This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.
        

        

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          This is strong, this is normal, this is just bold, and this is emphasized! And heck,  href="/">here's a link.
        
        
    
          
  • Unordered list item 1
    • 
          
  • Unordered list item 2
    • 
          
  • Unordered list item 3
    • 
        

        
    
          
  1. Ordered list item 1
    2. 
          
  2. Ordered list item 2
    3. 
          
  3. Ordered list item 3
    4. 
        

        
Heading 1

        
Heading 2

        
Heading 3

        
Heading 4

        
Heading 5

        
Heading 6