<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Meet Bhalodi]]></title><description><![CDATA[Meet Bhalodi]]></description><link>https://yellowjacket.dev</link><generator>RSS for Node</generator><lastBuildDate>Thu, 04 Jun 2026 03:05:42 GMT</lastBuildDate><atom:link href="https://yellowjacket.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[ng-India 2025: Key Highlights and Events]]></title><description><![CDATA[Attending my first ng-conf was an overwhelming experience, filled with insightful talks from talented developers worldwide. I gained a wealth of knowledge and feel inspired to share this with other developers as a way of giving back to the community....]]></description><link>https://yellowjacket.dev/ng-india-2025</link><guid isPermaLink="true">https://yellowjacket.dev/ng-india-2025</guid><category><![CDATA[ng-india]]></category><category><![CDATA[Angular]]></category><category><![CDATA[Angular]]></category><category><![CDATA[Developer]]></category><category><![CDATA[events]]></category><category><![CDATA[conference]]></category><dc:creator><![CDATA[Meet Bhalodi]]></dc:creator><pubDate>Wed, 16 Apr 2025 04:30:30 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1744737211358/cfa0b45b-cb7e-4fdb-b820-076f053ea316.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Attending my first ng-conf was an overwhelming experience, filled with insightful talks from talented developers worldwide. I gained a wealth of knowledge and feel inspired to share this with other developers as a way of giving back to the community.</p>
<p><strong>The overall agenda of the ng-India 2025 conference was as following</strong></p>
<h2 id="heading-talk-1-intelligent-frontends-with-angular-and-transformersjs"><strong>Talk 1:</strong> Intelligent frontends with Angular and Transformers.js</h2>
<p>This talk was about was bout Intelligent Frontends with Angular and Transformers.js. It covered using ML models in the frontend with transformers.js and explained how to implement ML models in browsers without relying on servers, ensuring privacy, speed, and scalability</p>
<p>This is one of the best use cases for <strong>Web Workers</strong>—running ML models in the background without blocking the main thread.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744775443938/c54257bf-191a-410f-9786-63cd75576b06.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744735494923/f34fa47c-2b49-4ed4-ab83-050b8053c84a.jpeg" alt class="image--center mx-auto" /></p>
<hr />
<h2 id="heading-talk-2-hidden-gems-in-angular"><strong>Talk 2:</strong> Hidden gems in Angular</h2>
<p>This talk was about some of the hidden gems in Angular—and believe me, a few of these gems are hiding in plain sight. Often, they’re just a flag away from significantly improving your project's user experience. This was easily one of my favourite talks.</p>
<p>Here’s one example: as shown in the image below, simply enabling the <code>withViewTransitions</code> function provided by Angular in the app's routing file allows your application to have smooth transitions between route changes.<br />Alternatively, you can achieve the same effect by using:</p>
<pre><code class="lang-typescript">RouterModule.forRoot(routes, { useHash: <span class="hljs-literal">true</span>, enableViewTransitions: <span class="hljs-literal">true</span> })
</code></pre>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744736058767/6f277269-18b2-46d2-ad8a-e38d5395c0c9.jpeg" alt class="image--center mx-auto" /></p>
<hr />
<h2 id="heading-talk-3-micro-frontends-and-module-federation"><strong>Talk 3:</strong> Micro frontends and module federation</h2>
<p>This talk was about <strong>micro-frontends</strong> and <strong>module federation</strong>. It provided valuable insights into when micro-frontends should be used—and just as importantly, when they shouldn’t. One key takeaway was learning that Angular doesn’t natively support micro-frontend architecture out of the box.</p>
<p>The speaker also delved into the topic of <strong>module federation</strong>, comparing the impact on build times between <strong>native federation</strong> and <strong>remote federation</strong>, which added an interesting layer of technical depth to the discussion.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744736665642/9285179e-0b4c-4b67-a65e-e26dad98ee88.png" alt class="image--center mx-auto" /></p>
<hr />
<h2 id="heading-talk-4-build-on-top-of-signals">Talk 4: <strong>Build on top of Signals</strong></h2>
<p>This talk was about things we can build on top of signals. there are few in built things that angular provides that seemed interesting to me. here is couple of things I would like to show you</p>
<ol>
<li><strong>destroyRef</strong>: this allows us to define the things to do when component id getting destroyed in constructor itself. below is the image for the reference</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744737089892/7fb27201-3e71-40c4-b2cc-439163651021.png" alt class="image--center mx-auto" /></p>
<ol start="2">
<li><p><strong>injectLocalStorage</strong>: This utility is built on top of Angular <strong>signals</strong>, and it's a great example of how signals work in action.</p>
<p> Imagine you have two tabs open of the same application. If you switch to dark mode in one tab (assuming the dark mode state is being saved in local storage), the second tab will automatically reflect the change as well. This real-time synchronisation across tabs showcases the reactive power of signals combined with local storage.</p>
</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744737246947/b773c381-2b78-4e36-a9e5-09b02b24b861.png" alt class="image--center mx-auto" /></p>
<hr />
<h2 id="heading-talk-5-angular-projects-with-automated-architecture-validation">Talk 5: <strong>Angular projects with automated architecture validation</strong></h2>
<p>This talk focused on how to properly <strong>architect an Angular project</strong>, along with the tools that help ensure the architecture is followed and maintained. It emphasised how defining a few <strong>thumb rules</strong> early on can prevent the project from becoming a tangled mess over time—what the speaker humorously referred to as getting "spaghettified."</p>
<p>One example of such a thumb rule involves the structure of project libraries. Suppose your project has the following libraries: <code>Core</code>, <code>Feature1</code>, and <code>Feature2</code>.<br />In this setup, <code>Core</code> should <strong>not import</strong> anything from <code>Feature1</code> or <code>Feature2</code>. However, both <code>Feature1</code> and <code>Feature2</code> <strong>can import</strong> from <code>Core</code>. This directional dependency keeps the architecture clean and maintainable.</p>
<p>To enforce these boundaries at scale, there's an <strong>ESLint package</strong> that can help ensure these architectural rules are respected throughout the codebase.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744737778044/7085913a-1807-4002-84cd-92abc97f9743.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744737824870/0a0e3944-1c65-45ad-9947-fbb9eaa4d92b.png" alt class="image--center mx-auto" /></p>
<hr />
<h2 id="heading-talk-6-improving-web-performance-in-angular-applications"><strong>Talk 6: Improving Web Performance in Angular Applications</strong></h2>
<p>There are countless strategies to improve the performance of a web application, but one key area we often overlook is the <strong>weight of the DOM</strong>. A heavier DOM can slow down rendering and degrade user experience.</p>
<p>So how do we make the DOM lighter? One simple answer: <strong>"Keep fewer elements rendered in the DOM."</strong></p>
<p>A popular approach—especially well-known in the React community—is <strong>virtual scrolling</strong>, and yes, it can be implemented in Angular as well. This technique ensures that only the visible elements are rendered, and off-screen elements are either removed or replaced, improving performance significantly.</p>
<p>Another practical tip involves using certain <strong>CSS properties</strong> to reduce the DOM load. For example, applying the following styles can make a noticeable difference:</p>
<pre><code class="lang-scss"><span class="hljs-selector-class">.item</span> {
    <span class="hljs-attribute">content</span>-<span class="hljs-attribute">visibility</span>: auto;
    <span class="hljs-attribute">content</span>-intrinsic-size: auto; 
}
</code></pre>
<p>These properties help the browser skip rendering off-screen content until it comes into view, making initial load times and scrolling smoother.</p>
<p>Additionally, on the JavaScript side, you can <strong>replace off-screen elements with placeholder empty</strong> <code>&lt;div&gt;</code>s when they’re not in the viewport. This approach keeps the DOM lighter and improves scroll performance. The concept is visually demonstrated in the image below.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744739044921/3c70c786-a382-4290-ae2a-421c4a552289.png" alt class="image--center mx-auto" /></p>
<p>And as demonstrated, by implementing this approach—commonly referred to as <code>rxVirtualView</code>—you can significantly boost rendering efficiency. In fact, it can lead to <strong>green coloured performance metrics</strong> in Chrome DevTools, which indicates optimal frame rates and smooth scrolling.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744739222459/40d6c9a1-717f-48a9-a4c2-638770c982df.png" alt class="image--center mx-auto" /></p>
<hr />
<h2 id="heading-talk-7-local-and-zoneless-change-detection"><strong>Talk 7: Local and Zoneless Change Detection</strong></h2>
<p>This was one of the most interesting sessions, especially because it addressed a problem we often encounter in real-world scenarios—managing change detection across components, particularly in parent-child relationships.</p>
<p>The speaker discussed the well-known technique of <strong>removing</strong> <code>zone.js</code> to take full control over change detection. Instead of relying on Angular's default global mechanism, the approach uses <strong>Signals</strong> combined with <code>ChangeDetectionStrategy.OnPush</code> to enable <strong>local change detection</strong>. This means that when something changes inside a component, it doesn't trigger change detection for the entire component tree. Instead, only the component itself handles it—making updates more efficient and predictable.</p>
<p>There’s also a great <a target="_blank" href="https://medium.com/ngconf/local-change-detection-in-angular-410d82b38664"><strong>Medium article</strong></a> that goes deeper into this concept for those who want to explore it further.</p>
<p>One cool new trick I learned during this talk was how to <strong>monkey-patch Angular to display a counter</strong> showing how many times change detection has run at the application level. The speaker shared a code snippet (shown in the image below) that demonstrates this in action—a super handy tool for debugging and optimisation.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744739811559/fff92ca1-6a1b-421b-b32c-fda8ef45f1c4.jpeg" alt class="image--center mx-auto" /></p>
<p>There were so many new things to learn from this event, and I truly enjoyed putting my thoughts together and sharing them with you. I hope you liked my style of writing! If you have any questions, need clarifications, or even have some constructive criticism—I’m all ears and happy to hear it.</p>
<p>Until next time, see you around! 😊</p>
]]></content:encoded></item></channel></rss>