<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Trupti</title>
    <description>The latest articles on DEV Community by Trupti (@truptihosmani).</description>
    <link>https://dev.to/truptihosmani</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1135260%2Fabfe3cab-f954-4a11-97cd-50305d98909c.jpeg</url>
      <title>DEV Community: Trupti</title>
      <link>https://dev.to/truptihosmani</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/truptihosmani"/>
    <language>en</language>
    <item>
      <title>N+1 Queries Problem in Rails</title>
      <dc:creator>Trupti</dc:creator>
      <pubDate>Sun, 11 Feb 2024 09:04:52 +0000</pubDate>
      <link>https://dev.to/truptihosmani/n1-queries-problem-in-rails-3mag</link>
      <guid>https://dev.to/truptihosmani/n1-queries-problem-in-rails-3mag</guid>
      <description>&lt;p&gt;In Ruby on Rails applications, the N+1 query problem often sneaks in during the development of ActiveRecord associations. This issue can drastically affect the performance of your application by making an excessive number of database queries, which can slow down your application. But what exactly are N+1 queries, and how can you solve them? Let's break it down.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are N+1 Queries?
&lt;/h2&gt;

&lt;p&gt;The N+1 query problem occurs when your application makes 1 query to retrieve the primary objects, and then N additional queries to fetch associated objects for each primary object. Here, "N" represents the number of primary objects retrieved by the initial query, and "1" signifies the initial query itself.&lt;/p&gt;

&lt;h3&gt;
  
  
  Example of N+1 Queries
&lt;/h3&gt;

&lt;p&gt;Consider a blogging platform where each Post has many Comments. If you want to display all posts along with their comments, you might do something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@posts = Post.limit(10)
@posts do |post|
  puts post.comments.text
end

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And in your view:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;% @posts.each do |post| %&amp;gt;
  &amp;lt;h2&amp;gt;&amp;lt;%= post.title %&amp;gt;&amp;lt;/h2&amp;gt;
  &amp;lt;% post.comments.each do |comment| %&amp;gt;
    &amp;lt;p&amp;gt;&amp;lt;%= comment.body %&amp;gt;&amp;lt;/p&amp;gt;
  &amp;lt;% end %&amp;gt;
&amp;lt;% end %&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This innocent-looking code leads to the N+1 query problem. Here's why:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1 query is made to fetch all posts.&lt;/li&gt;
&lt;li&gt;N queries are made to fetch comments for each post (if there are 10 posts, 10 additional queries are made to fetch comments for each post).&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How to Fix N+1 Queries
&lt;/h2&gt;

&lt;p&gt;Active Record lets you specify in advance all the associations that are going to be loaded.&lt;/p&gt;

&lt;p&gt;The methods are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;includes&lt;/code&gt;: With includes, Active Record ensures that all of the specified associations are loaded using the minimum possible number of queries.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;preload&lt;/code&gt;: With preload, Active Record loads each specified association using one query per association.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;eager_load&lt;/code&gt;: With eager_load, Active Record loads all specified associations using a LEFT OUTER JOIN.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Use Join
&lt;/h3&gt;

&lt;p&gt;Ruby on Rails ActiveRecord provides a &lt;code&gt;.joins&lt;/code&gt; method that can be used to address N+1 query problems in certain situations, particularly when you want to filter or sort by fields on associated tables. Unlike &lt;code&gt;includes&lt;/code&gt;, which is designed for preloading related records to avoid N+1 queries, .joins performs an SQL JOIN operation. This can be more efficient in cases where you don't need to access all the attributes of the related records, but rather need to query based on them or include them in the select statement.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@posts_with_comments = Post.joins(:comments).distinct
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This query fetches posts that have at least one comment by performing an INNER JOIN between posts and comments. The distinct method is used to ensure each post is listed only once, even if it has multiple comments.&lt;/p&gt;

&lt;h3&gt;
  
  
  When to Use &lt;code&gt;.joins&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Use &lt;code&gt;.joins&lt;/code&gt; when you need to filter or sort queries based on associated records' attributes.&lt;br&gt;
It's also useful for aggregations or when counting related records.&lt;/p&gt;
&lt;h3&gt;
  
  
  Limitations
&lt;/h3&gt;

&lt;p&gt;While &lt;code&gt;.joins&lt;/code&gt; can help avoid N+1 queries by allowing you to filter or aggregate data based on associated records, it doesn't automatically preload these associated records for later use. Accessing unloaded associations will trigger separate queries, potentially leading to N+1 issues if not managed carefully.&lt;/p&gt;
&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;For scenarios where you need to both join and preload associated records to avoid N+1 queries while also using the data for filtering or sorting, you can combine .joins with .includes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@posts = Post.joins(:comments).includes(:comments).distinct
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This approach leverages &lt;code&gt;.joins&lt;/code&gt; to filter or sort based on the associated table and &lt;code&gt;.includes&lt;/code&gt; to preload the associated records, ensuring efficient data access and avoiding N+1 queries.&lt;/p&gt;

&lt;p&gt;Understanding when and how to use .joins, .includes, and other ActiveRecord query methods like .preload and .eager_load is essential for optimizing database queries in Ruby on Rails applications. Each method serves different purposes, and choosing the right one depends on your specific requirements for querying and accessing associated records.&lt;/p&gt;

</description>
      <category>rails</category>
    </item>
    <item>
      <title>Scope vs Class Methods</title>
      <dc:creator>Trupti</dc:creator>
      <pubDate>Sat, 10 Feb 2024 12:23:59 +0000</pubDate>
      <link>https://dev.to/truptihosmani/scope-vs-class-methods-2jee</link>
      <guid>https://dev.to/truptihosmani/scope-vs-class-methods-2jee</guid>
      <description>&lt;p&gt;Recently in one of interviews, I was asked about this and that led me to revisit these concepts again.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Scope in Ruby on Rails?
&lt;/h2&gt;

&lt;p&gt;In Ruby on Rails, scope refers to a way to define commonly used queries that can be referenced as method calls on ActiveRecord models. Scopes allow you to encapsulate query logic, making it reusable and easy to maintain.&lt;/p&gt;

&lt;p&gt;Example scope of Post model, in which we frequently need to fetch published posts, we can define a scope like so:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Post &amp;lt; ApplicationRecord
  scope :published, -&amp;gt; { where(published: true) }
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Characteristics of Scopes
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Chainable:&lt;/strong&gt; Since scopes always return an ActiveRecord::Relation, they're guaranteed to be chainable with other scopes or query methods.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Simplified Syntax:&lt;/strong&gt; Scopes provide a more succinct way to write reusable query logic with a clear intention.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Default Scope:&lt;/strong&gt; You can define a default scope that applies to all queries on the model.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What are Class Methods in Ruby on Rails?
&lt;/h2&gt;

&lt;p&gt;Class methods in Ruby on Rails serve a similar purpose as scopes, allowing you to define methods at the class level. These methods can perform operations or queries related to the class they are defined in.&lt;/p&gt;

&lt;p&gt;Example of class method on Post model, we can define a class method to achieve the same result as the scope:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Post &amp;lt; ApplicationRecord
  def self.published
    where(published: true)
  end
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Characteristics of Class Methods
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Flexibility:&lt;/strong&gt; Class methods can contain any Ruby code, which allows for complex logic that might be awkward or impossible to define in a scope.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Return Values:&lt;/strong&gt; While they can return an ActiveRecord::Relation to allow for chaining, they can also return any other type of object, depending on the method's internal logic.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Both of these methods can be called &lt;code&gt;Post. self.published&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  When to Use Each
&lt;/h2&gt;

&lt;p&gt;The choice between using a scope and a class method boils down to the complexity of the logic you need to implement and personal preference. Here are some guidelines:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Use scopes&lt;/strong&gt; for simple, straightforward query conditions that will always return an ActiveRecord::Relation. They're more readable and directly convey the intention of returning a query result.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use class methods&lt;/strong&gt; when your query logic is complex, requires conditional logic, or when you might need to return something other than an ActiveRecord::Relation. Class methods offer the full power of Ruby, making them suitable for scenarios where scopes might not be sufficient.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In practice, many Rails developers use a combination of both, leveraging scopes for the majority of straightforward query needs and reserving class methods for when those needs exceed the neat encapsulation scopes offer. This approach takes advantage of the strengths of both techniques, leading to more maintainable and understandable model code.&lt;/p&gt;

</description>
      <category>rails</category>
      <category>activerecord</category>
    </item>
    <item>
      <title>Using AI tools to build a React.js application - Part 1</title>
      <dc:creator>Trupti</dc:creator>
      <pubDate>Wed, 17 Jan 2024 13:08:09 +0000</pubDate>
      <link>https://dev.to/truptihosmani/using-ai-tools-to-build-a-reactjs-application-part-1-551c</link>
      <guid>https://dev.to/truptihosmani/using-ai-tools-to-build-a-reactjs-application-part-1-551c</guid>
      <description>&lt;p&gt;In this post I am going to leverage some AI tools available to help build an application. Let's start by asking ChatGPT to help us creating a twitter-clone app and use tailwind css. I gave the following input and this is the output I received:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--T-x66lhi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2yylp2d123602z4j6ti.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--T-x66lhi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2yylp2d123602z4j6ti.png" alt="step0" width="800" height="1209"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Q9kGWAM5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rvs2u8efbjv5kf6619f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Q9kGWAM5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rvs2u8efbjv5kf6619f.png" alt="step1" width="754" height="1614"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After following the steps given by ChatGPT and now start the server.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and here is the screenshot for the app that starts in the browser:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ESPPYjJA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09xery5mbryz254aloi0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ESPPYjJA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09xery5mbryz254aloi0.png" alt="step2" width="800" height="140"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So lets start by adding some steps that we are going todo later on:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;      &amp;lt;h1&amp;gt;Things to do&amp;lt;/h1&amp;gt;
      &amp;lt;ul&amp;gt;
        &amp;lt;li&amp;gt;Create a mock up of the UI you want&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;Make react components out of them&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;Use AI tools to build&amp;lt;/li&amp;gt;
      &amp;lt;/ul&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and here is how it looks after adding the things that we are going to do. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--X1P_xWL2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5svresb3leaj2zkvnw3r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--X1P_xWL2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5svresb3leaj2zkvnw3r.png" alt="step3" width="800" height="171"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;next step, is I would like to ask Github Inline Copilot to add in some classes to the header and list items and accept the changes provided by Copilot. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1Q8JjqHq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okfu7533gop2e22o6chc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1Q8JjqHq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okfu7533gop2e22o6chc.png" alt="step4" width="800" height="243"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The changes to the pages looks like this &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FQBkilhm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp4huzf0vsinz5cuz9ue.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FQBkilhm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp4huzf0vsinz5cuz9ue.png" alt="step5" width="800" height="101"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is not exactly the perfect looking application but still not bad if you can get this started.&lt;/p&gt;

</description>
      <category>react</category>
      <category>chatgpt</category>
      <category>githubcopilot</category>
    </item>
  </channel>
</rss>
