Skip to content

Commit c7e9bee

Browse files
misostackmisostack
committed
DI and IOC
1 parent e9131b2 commit c7e9bee

File tree

156 files changed

+2470
-944
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

156 files changed

+2470
-944
lines changed

‎content/post/6minutes-tech-dependency-injection-and-ioc.md‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
---
2+
title: "6 minutes tech - Dependency Injection and IOC"
3+
type: "post"
4+
date: 2025-10-11T13:11:49+07:00
5+
description: "In this article, you will learn about dependency injection and Inversion of Control, this knowledge can be apply in any language and framework."
6+
keywords: ["Dependency Injection and Ioc"]
7+
categories: ["cheatsheet", "6minutes-tech"]
8+
tags: []
9+
image: /articles/6minutes/001.png
10+
---
11+
12+
## Dependency injection
13+
14+
Let's take a look at this example
15+
16+
```ts
17+
class Club {
18+
constructor(private name: string) {}
19+
toString() {
20+
return `Club: ${this.name}`;
21+
}
22+
}
23+
class User {
24+
constructor(private name: string, private club: Club) {}
25+
26+
toString() {
27+
return `User: ${this.name}.\nClub info: ${this.club.toString()}`;
28+
}
29+
}
30+
31+
// demo
32+
33+
const club = new Club("Football");
34+
const user = new User("Alice", club);
35+
36+
console.log(user.toString());
37+
```
38+
39+
The User class constructor depends on Club. In this case Club must be passed during initial phase of the User. Imagination, in your projects, you will have a tons of dependencies like this. What should you do?
40+
41+
## IOC - Inversion of Control
42+
43+
Developer should keep their **business logic clean** by **externalizing** complicated and complex configuration, life cycle management and system interactions.
44+
45+
Complex tasks should be handled by **IoC framework**
46+
47+
```ts
48+
import { Container, inject, injectable } from "inversify";
49+
import "reflect-metadata";
50+
51+
// Define symbols for dependency injection
52+
const TYPES = {
53+
Club: Symbol.for("Club"),
54+
User: Symbol.for("User"),
55+
ClubName: Symbol.for("ClubName"),
56+
UserName: Symbol.for("UserName"),
57+
};
58+
59+
@injectable()
60+
class IoCClub {
61+
constructor(@inject(TYPES.ClubName) private name: string) {}
62+
63+
toString() {
64+
return `Club: ${this.name}`;
65+
}
66+
67+
setName(name: string) {
68+
this.name = name;
69+
}
70+
}
71+
72+
@injectable()
73+
class IoCUser {
74+
constructor(
75+
@inject(TYPES.UserName) private name: string,
76+
@inject(TYPES.Club) public readonly club: IoCClub
77+
) {}
78+
79+
toString() {
80+
return `User: ${this.name}.\nClub info: ${this.club.toString()}`;
81+
}
82+
}
83+
84+
const container: Container = new Container();
85+
86+
// Bind the dependencies
87+
container.bind<string>(TYPES.ClubName).toConstantValue("Football");
88+
container.bind<string>(TYPES.UserName).toConstantValue("Alice");
89+
container.bind<IoCClub>(TYPES.Club).to(IoCClub);
90+
container.bind<IoCUser>(TYPES.User).to(IoCUser);
91+
92+
// Get instances from container
93+
const club = container.get<IoCClub>(TYPES.Club);
94+
console.log(club.toString());
95+
96+
const user = container.get<IoCUser>(TYPES.User);
97+
user.club.setName("Football Club");
98+
console.log(user.toString());
99+
```
100+
101+
But, the code looks more complex right?
102+
103+
### When the complexity pays off:
104+
105+
> The InversifyJS complexity becomes worthwhile in larger applications because:
106+
107+
- Configuration centralization - All dependencies configured in one place
108+
- Lifecycle management - Singletons, transients, per-request instances
109+
- Testing - Easy to mock dependencies
110+
- Modularity - Different implementations for different environments
111+
112+
## Conclustion
113+
114+
### Simple manual DI
115+
116+
- Small projects
117+
- Few dependencies
118+
- Prototype/demo code
119+
120+
### Service Locator
121+
122+
- Medium projects
123+
- Need some configuration management
124+
- Want testability without decorator complexity
125+
126+
```ts
127+
// 1. Simple Service Locator Pattern
128+
class ServiceContainer {
129+
private services = new Map<string, any>();
130+
131+
register<T>(name: string, factory: () => T): void {
132+
this.services.set(name, factory);
133+
}
134+
135+
get<T>(name: string): T {
136+
const factory = this.services.get(name);
137+
if (!factory) throw new Error(`Service ${name} not found`);
138+
return factory();
139+
}
140+
}
141+
142+
// Usage - much simpler!
143+
const container = new ServiceContainer();
144+
145+
container.register("clubName", () => "Football");
146+
container.register("userName", () => "Alice");
147+
container.register("club", () => new Club(container.get("clubName")));
148+
container.register(
149+
"user",
150+
() => new User(container.get("userName"), container.get("club"))
151+
);
152+
153+
const user = container.get<User>("user");
154+
console.log(user.toString());
155+
```
156+
157+
### Factory Pattern
158+
159+
- Complex object creation
160+
- Need environment-specific configurations
161+
- Clear separation of concerns
162+
163+
```ts
164+
// 2. Factory Pattern with Configuration
165+
interface AppConfig {
166+
clubName: string;
167+
userName: string;
168+
}
169+
170+
class AppFactory {
171+
constructor(private config: AppConfig) {}
172+
173+
createClub(): Club {
174+
return new Club(this.config.clubName);
175+
}
176+
177+
createUser(): User {
178+
return new User(this.config.userName, this.createClub());
179+
}
180+
}
181+
182+
// Usage
183+
const factory = new AppFactory({ clubName: "Football", userName: "Alice" });
184+
const user2 = factory.createUser();
185+
console.log(user2.toString());
186+
```
187+
188+
### Full IoC Framework
189+
190+
- Large enterprise applications
191+
- Complex dependency graphs
192+
- Need advanced features (decorators, modules, middleware)
193+
- Team development with strict patterns
194+
195+
## TradeOffs
196+
197+
```ts
198+
// Simple but rigid
199+
const user = new User("Alice", new Club("Football"));
200+
201+
// Complex but flexible
202+
const user = container.get<IoCUser>(TYPES.User);
203+
```

‎public/articles/6minutes/001.png‎

1.25 MB
Loading

‎public/categories/6minutes-tech/index.html‎

Lines changed: 62 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -251,15 +251,67 @@ <h1 class="hero-section-heading">
251251
</section>
252252
<section class="container section grid md:grid-cols-4 gap-8">
253253

254+
<div class="card card-post-default">
255+
<a href="http://localhost:1313/post/6minutes-tech-dependency-injection-and-ioc/"
256+
><img
257+
class="card-post-image"
258+
src="http://localhost:1313/articles/6minutes/001.png%22"
259+
alt="6 minutes tech - Dependency Injection and IOC"
260+
/></a>
261+
<div class="px-6 py-4">
262+
<h2 class="card-post-title"><a href="http://localhost:1313/post/6minutes-tech-dependency-injection-and-ioc/">6 minutes tech - Dependency Injection and IOC</a></h2>
263+
<div>
264+
265+
<a class="category-tag category-cheatsheet" href="http://localhost:1313/categories/cheatsheet">cheatsheet</a>
266+
267+
<a class="category-tag category-6minutes-tech" href="http://localhost:1313/categories/6minutes-tech">6minutes-tech</a>
268+
269+
</div>
270+
<div>
271+
<span class="card-post-date"
272+
>11 Oct, 2025</span
273+
>
274+
</div>
275+
<div class="card-post-description">In this article, you will learn about dependency injection and Inversion of Control, this knowledge can be apply in any language and framework.</div>
276+
</div>
277+
</div>
278+
279+
280+
<div class="card card-post-default">
281+
<a href="http://localhost:1313/post/6minutes-tech-n8n/"
282+
><img
283+
class="card-post-image"
284+
src="https://gist.github.com/user-attachments/assets/20e4cc26-db55-49d8-ac5e-47bdf107bd26"
285+
alt="6minutes Tech Automation Flow with N8N"
286+
/></a>
287+
<div class="px-6 py-4">
288+
<h2 class="card-post-title"><a href="http://localhost:1313/post/6minutes-tech-n8n/">6minutes Tech Automation Flow with N8N</a></h2>
289+
<div>
290+
291+
<a class="category-tag category-cheatsheet" href="http://localhost:1313/categories/cheatsheet">cheatsheet</a>
292+
293+
<a class="category-tag category-6minutes-tech" href="http://localhost:1313/categories/6minutes-tech">6minutes-tech</a>
294+
295+
</div>
296+
<div>
297+
<span class="card-post-date"
298+
>19 Aug, 2025</span
299+
>
300+
</div>
301+
<div class="card-post-description">n8n is a workflow automation platform that uniquely combines AI capabilities with business process automation, giving technical teams the flexibility of code with the speed of no-code.</div>
302+
</div>
303+
</div>
304+
305+
254306
<div class="card card-post-default">
255307
<a href="http://localhost:1313/post/6minutes-tech-rag/"
256308
><img
257309
class="card-post-image"
258-
src="http://localhost:1313/common/no-image.png"
259-
alt="6minutes Tech Rag"
310+
src="https://gist.github.com/user-attachments/assets/f381b263-1055-42e6-883d-049db387f411"
311+
alt="6minutes Tech RAG"
260312
/></a>
261313
<div class="px-6 py-4">
262-
<h2 class="card-post-title"><a href="http://localhost:1313/post/6minutes-tech-rag/">6minutes Tech Rag</a></h2>
314+
<h2 class="card-post-title"><a href="http://localhost:1313/post/6minutes-tech-rag/">6minutes Tech RAG</a></h2>
263315
<div>
264316

265317
<a class="category-tag category-cheatsheet" href="http://localhost:1313/categories/cheatsheet">cheatsheet</a>
@@ -272,7 +324,7 @@ <h2 class="card-post-title"><a href="http://localhost:1313/post/6minutes-tech-ra
272324
>16 Aug, 2025</span
273325
>
274326
</div>
275-
<div class="card-post-description">Without RAG, the LLM takes the user input and creates a response based on information it was trained on—or what it already knows. With RAG, an information retrieval component is introduced that utilizes the user input to first pull information from a new data source</div>
327+
<div class="card-post-description">Without RAG, the LLM takes the user input and creates a response based on information it was trained on—or what it already knows. With RAG, an information retrieval component is introduced that utilizes the user input to first pull information from a new data source.</div>
276328
</div>
277329
</div>
278330

@@ -397,15 +449,15 @@ <h4 class="footer-heading">Cheatsheet</h4>
397449
<ul class="footer-section-navigation-menu-links">
398450

399451

400-
<li><a href="http://localhost:1313/post/6minutes-tech-rag/">6minutes Tech Rag</a></li>
452+
<li><a href="http://localhost:1313/post/6minutes-tech-dependency-injection-and-ioc/">6 minutes tech - Dependency Injection and IOC</a></li>
401453

402-
<li><a href="http://localhost:1313/post/6minutes-tech-graphql/">6minutes Tech Graphql</a></li>
454+
<li><a href="http://localhost:1313/post/6minutes-tech-n8n/">6minutes Tech Automation Flow with N8N</a></li>
403455

404-
<li><a href="http://localhost:1313/post/6minutes-tech-progressive-web-app/">6minutes Tech Progressive Web App</a></li>
456+
<li><a href="http://localhost:1313/post/6minutes-tech-rag/">6minutes Tech RAG</a></li>
405457

406-
<li><a href="http://localhost:1313/post/flexbox-and-real-world-examples/">Flexbox and Real World Examples</a></li>
458+
<li><a href="http://localhost:1313/post/6minutes-tech-graphql/">6minutes Tech Graphql</a></li>
407459

408-
<li><a href="http://localhost:1313/post/react-native-examples-setup-working-place-for-react-native-developer/">[React Native Examples] Setup Working Place for React Native Developer</a></li>
460+
<li><a href="http://localhost:1313/post/6minutes-tech-progressive-web-app/">6minutes Tech Progressive Web App</a></li>
409461

410462
</ul>
411463
</div>
@@ -422,7 +474,7 @@ <h4 class="footer-heading">Cheatsheet</h4>
422474
Powered by <a class="font-bold text-primary" href="https://gohugo.io/">Go Hugo</a> - Made
423475
with love from <a class="font-bold text-primary" href="http://localhost:1313/">NextJSVietNam</a> -
424476
Build
425-
Version 2025-08-16 21:34:58 &#43;0700 &#43;07
477+
Version 2025-10-11 13:11:49 &#43;0700 &#43;07
426478
</div>
427479
</div>
428480
</footer>

‎public/categories/6minutes-tech/index.xml‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,28 @@
66
<description>Recent content in 6minutes-Tech on Useful NodeJS Tricks, JavaScript Tips, Tricks and Best Practices</description>
77
<generator>Hugo</generator>
88
<language>en-us</language>
9-
<lastBuildDate>Sat, 16 Aug 2025 21:34:58 +0700</lastBuildDate>
9+
<lastBuildDate>Sat, 11 Oct 2025 13:11:49 +0700</lastBuildDate>
1010
<atom:link href="http://localhost:1313/categories/6minutes-tech/index.xml" rel="self" type="application/rss+xml" />
1111
<item>
12-
<title>6minutes Tech Rag</title>
12+
<title>6 minutes tech - Dependency Injection and IOC</title>
13+
<link>http://localhost:1313/post/6minutes-tech-dependency-injection-and-ioc/</link>
14+
<pubDate>Sat, 11 Oct 2025 13:11:49 +0700</pubDate>
15+
<guid>http://localhost:1313/post/6minutes-tech-dependency-injection-and-ioc/</guid>
16+
<description></description>
17+
</item>
18+
<item>
19+
<title>6minutes Tech Automation Flow with N8N</title>
20+
<link>http://localhost:1313/post/6minutes-tech-n8n/</link>
21+
<pubDate>Tue, 19 Aug 2025 09:09:58 +0700</pubDate>
22+
<guid>http://localhost:1313/post/6minutes-tech-n8n/</guid>
23+
<description>&lt;p&gt;&lt;strong&gt;Definition&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;blockquote&gt;&#xA;&lt;p&gt;n8n is a workflow automation platform that uniquely combines AI capabilities with business process automation, giving technical teams the flexibility of code with the speed of no-code.&lt;/p&gt;&lt;/blockquote&gt;&#xA;&lt;h2 id=&#34;references&#34;&gt;References&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&lt;a href=&#34;https://n8n.io/&#34;&gt;N8N&lt;/a&gt;&lt;/li&gt;&#xA;&lt;/ul&gt;</description>
24+
</item>
25+
<item>
26+
<title>6minutes Tech RAG</title>
1327
<link>http://localhost:1313/post/6minutes-tech-rag/</link>
1428
<pubDate>Sat, 16 Aug 2025 21:34:58 +0700</pubDate>
1529
<guid>http://localhost:1313/post/6minutes-tech-rag/</guid>
16-
<description>&lt;p&gt;&lt;img src=&#34;image-2.png&#34; alt=&#34;alt text&#34;&gt;&lt;/p&gt;&#xA;&lt;h2 id=&#34;references&#34;&gt;References&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&lt;a href=&#34;https://aws.amazon.com/what-is/retrieval-augmented-generation/&#34;&gt;https://aws.amazon.com/what-is/retrieval-augmented-generation/&lt;/a&gt;&lt;/li&gt;&#xA;&lt;li&gt;&lt;a href=&#34;https://cloud.google.com/use-cases/retrieval-augmented-generation?hl=en&#34;&gt;https://cloud.google.com/use-cases/retrieval-augmented-generation?hl=en&lt;/a&gt;&lt;/li&gt;&#xA;&lt;li&gt;&lt;a href=&#34;https://aws.amazon.com/blogs/machine-learning/from-concept-to-reality-navigating-the-journey-of-rag-from-proof-of-concept-to-production/&#34;&gt;https://aws.amazon.com/blogs/machine-learning/from-concept-to-reality-navigating-the-journey-of-rag-from-proof-of-concept-to-production/&lt;/a&gt;&lt;/li&gt;&#xA;&lt;/ul&gt;</description>
30+
<description>&lt;h2 id=&#34;llm&#34;&gt;LLM&lt;/h2&gt;&#xA;&lt;p&gt;Let&amp;rsquo;s take a look at these 2 questions and how ChatGPT (LLM) answers those.&lt;/p&gt;&#xA;&lt;blockquote&gt;&#xA;&lt;p&gt;1st question: What is LLM ?&lt;/p&gt;&lt;/blockquote&gt;&#xA;&lt;p&gt;&lt;img src=&#34;https://gist.github.com/user-attachments/assets/f3b6059b-f5f0-4c51-b6f2-4eb61eb4adee&#34; alt=&#34;LLM&#34;&gt;&lt;/p&gt;&#xA;&lt;p&gt;&lt;img src=&#34;https://gist.github.com/user-attachments/assets/5fd2a28c-f282-4d52-b250-2e85d3c2bc1c&#34; alt=&#34;LLM&#34;&gt;&lt;/p&gt;&#xA;&lt;blockquote&gt;&#xA;&lt;p&gt;2nd question: What is our company onboarding process ?&lt;/p&gt;&lt;/blockquote&gt;&#xA;&lt;p&gt;&lt;img src=&#34;https://gist.github.com/user-attachments/assets/55e82e5c-6b2e-42f8-ae86-fd767d23e302&#34; alt=&#34;LLM&#34;&gt;&lt;/p&gt;&#xA;&lt;p&gt;&lt;img src=&#34;https://gist.github.com/user-attachments/assets/d50b53e5-3575-438c-9844-356fb8181631&#34; alt=&#34;LLM&#34;&gt;&lt;/p&gt;&#xA;&lt;p&gt;What we can see is, in the 1st question, ChatGPT can answer your question, because there are answers in its knowledge base, so it just picks one them and the answer is more precised to your question.&lt;/p&gt;</description>
1731
</item>
1832
<item>
1933
<title>6minutes Tech Graphql</title>

‎public/categories/aws-labs/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -371,15 +371,15 @@ <h4 class="footer-heading">Cheatsheet</h4>
371371
<ul class="footer-section-navigation-menu-links">
372372

373373

374-
<li><a href="http://localhost:1313/post/6minutes-tech-rag/">6minutes Tech Rag</a></li>
374+
<li><a href="http://localhost:1313/post/6minutes-tech-dependency-injection-and-ioc/">6 minutes tech - Dependency Injection and IOC</a></li>
375375

376-
<li><a href="http://localhost:1313/post/6minutes-tech-graphql/">6minutes Tech Graphql</a></li>
376+
<li><a href="http://localhost:1313/post/6minutes-tech-n8n/">6minutes Tech Automation Flow with N8N</a></li>
377377

378-
<li><a href="http://localhost:1313/post/6minutes-tech-progressive-web-app/">6minutes Tech Progressive Web App</a></li>
378+
<li><a href="http://localhost:1313/post/6minutes-tech-rag/">6minutes Tech RAG</a></li>
379379

380-
<li><a href="http://localhost:1313/post/flexbox-and-real-world-examples/">Flexbox and Real World Examples</a></li>
380+
<li><a href="http://localhost:1313/post/6minutes-tech-graphql/">6minutes Tech Graphql</a></li>
381381

382-
<li><a href="http://localhost:1313/post/react-native-examples-setup-working-place-for-react-native-developer/">[React Native Examples] Setup Working Place for React Native Developer</a></li>
382+
<li><a href="http://localhost:1313/post/6minutes-tech-progressive-web-app/">6minutes Tech Progressive Web App</a></li>
383383

384384
</ul>
385385
</div>

‎public/categories/aws/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -761,15 +761,15 @@ <h4 class="footer-heading">Cheatsheet</h4>
761761
<ul class="footer-section-navigation-menu-links">
762762

763763

764-
<li><a href="http://localhost:1313/post/6minutes-tech-rag/">6minutes Tech Rag</a></li>
764+
<li><a href="http://localhost:1313/post/6minutes-tech-dependency-injection-and-ioc/">6 minutes tech - Dependency Injection and IOC</a></li>
765765

766-
<li><a href="http://localhost:1313/post/6minutes-tech-graphql/">6minutes Tech Graphql</a></li>
766+
<li><a href="http://localhost:1313/post/6minutes-tech-n8n/">6minutes Tech Automation Flow with N8N</a></li>
767767

768-
<li><a href="http://localhost:1313/post/6minutes-tech-progressive-web-app/">6minutes Tech Progressive Web App</a></li>
768+
<li><a href="http://localhost:1313/post/6minutes-tech-rag/">6minutes Tech RAG</a></li>
769769

770-
<li><a href="http://localhost:1313/post/flexbox-and-real-world-examples/">Flexbox and Real World Examples</a></li>
770+
<li><a href="http://localhost:1313/post/6minutes-tech-graphql/">6minutes Tech Graphql</a></li>
771771

772-
<li><a href="http://localhost:1313/post/react-native-examples-setup-working-place-for-react-native-developer/">[React Native Examples] Setup Working Place for React Native Developer</a></li>
772+
<li><a href="http://localhost:1313/post/6minutes-tech-progressive-web-app/">6minutes Tech Progressive Web App</a></li>
773773

774774
</ul>
775775
</div>

0 commit comments

Comments
 (0)