I'll try to talk in english for the mayority of the time but might switch back to german in case i need to explain certain more complex details + +--- + +## Try It Yourself Right Now! + +**Basic Example - Get started in 2 minutes:** + +```bash +npx degit 7frank/tdi2/examples/tdi2-basic-example di-react-example +cd di-react-example +npm i +npm run dev +``` + +**Enterprise Example:** +https://github.com/7frank/tdi2/tree/main/examples/tdi2-enterprise-forms-example + +**Features advanced patterns:** + +- Services for business logic +- Controllers for view state logic +- Real-world enterprise forms + +**Try these examples after the presentation - we'll do live coding together!** + +Note: I'll show you how to get started, and after the presentation we can do some live coding together. The basic example shows the core concepts, while the enterprise example demonstrates how this scales to complex business applications with proper separation between business logic and view state. + +--- + +## Agenda + +**Tonight's Journey:** + +1. **The Problem** - React's scaling challenges +2. **Proven Solutions** - How backend & Angular solved this +3. **Service Injection** - The React solution +4. **Benefits** - Testing, architecture, SOLID principles +5. **Getting Started** - Migration & examples +6. **Live Coding** - After the presentation + +Note: This is our roadmap for tonight. We'll start with the fundamental problems, show proven solutions from other frameworks, then demonstrate how to bring those patterns to React. + +--- + +## The Problem: React at Scale + +**6 years of React development led to this realization:** + +_Hooks and props are fundamentally incompatible with enterprise architecture_ + +- 🔥 **Component complexity** grows exponentially +- 🔥 **Testing becomes nightmare** with mixed concerns +- 🔥 **Team coordination** breaks down due to coupling + +**Tonight's thesis:** _Coupling is the root cause, dependency injection is the proven solution_ + +Note: (show of hands) Who likes react hooks. Let's start with the core problem. After years of React development, the same patterns keep breaking down at scale. + +--- + +## Example: The UserProfile Problem +## Example: The UserProfile Problem + +```typescript +// Typical React component - looks simple at first +// Typical React component - looks simple at first +function UserProfile({ userId }) { + const [user, setUser] = useState(null); + const [loading, setLoading] = useState(false); + const [notifications, setNotifications] = useState([]); + + useEffect(() => { + setLoading(true); + fetchUser(userId).then(user => { + setUser(user); + setLoading(false); + // Load related data + fetchNotifications(user.id).then(setNotifications); + }); + setLoading(true); + fetchUser(userId).then(user => { + setUser(user); + setLoading(false); + // Load related data + fetchNotifications(user.id).then(setNotifications); + }); + }, [userId]); + + // Component handles UI AND business logic + return ( +
+ {loading ?
+ );
+}
+```
+
+**Problems:** Mixed concerns, testing complexity, coupling
+
+Note: This looks innocent, but it's where the problems start. The component handles both UI rendering and business logic, making it hard to test and maintain.
+
+---
+
+## As It Grows: Hooks and Props
+
+```typescript
+// Real-world component after 6 months
+function UserProfile({
+ userId,
+ theme,
+ permissions,
+ onUserUpdate,
+ onNotificationDismiss,
+ showEditButton,
+ editMode,
+ // ... 20+ more props
+}) {
+ const { user, loading, error } = useUser(userId);
+ const { notifications } = useNotifications(userId);
+ const { themeClass } = useTheme(theme);
+ const { canEdit } = usePermissions(permissions, user);
+ const [editing, setEditing] = useState(editMode);
+
+ // Component coordinates multiple custom hooks
+ // Still tightly coupled to all these concerns
+}
+```
+
+**Result:** Everytime someone touches the code base either your view or one of your hooks imports another hook
+
+> Because we are only using the mechanism react introduced for a problem react created in the first place
+
+Note: This is the inevitable evolution. Every new requirement adds more props, more hooks, more complexity.
+
+---
+
+## Backend Solved This: Spring Boot
+## Backend Solved This: Spring Boot
+
+```java
+// Clean separation of concerns
+// Clean separation of concerns
+@RestController
+public class UserController {
+ @Autowired
+ private UserService userService;
+
+ @GetMapping("/users/{id}")
+ public User getUser(@PathVariable String id) {
+ public User getUser(@PathVariable String id) {
+ return userService.findById(id); // Pure delegation
+ }
+}
+
+@Service
+public class UserService {
+ @Autowired
+ private UserRepository repository;
+
+ public User findById(String id) {
+ return repository.findById(id); // Pure business logic
+ return repository.findById(id); // Pure business logic
+ }
+}
+```
+
+**Benefits:** Single responsibility, easy testing, loose coupling
+
+Note: Backend development solved this decades ago with dependency injection. Controllers handle HTTP, services handle business logic. Although Type erasure requires @Qualifier Annotation
+**Benefits:** Single responsibility, easy testing, loose coupling
+
+Note: Backend development solved this decades ago with dependency injection. Controllers handle HTTP, services handle business logic. Although Type erasure requires @Qualifier Annotation
+
+---
+
+## Angular Also Solved This: Dependency Injection
+## Angular Also Solved This: Dependency Injection
+
+```typescript
+// Angular service
+@Injectable({ providedIn: "root" })
+export class UserService {
+ constructor(private http: HttpClient) {}
+
+ getUser(id: string): Observable{user?.name}
}
+ {{ (user$ | async)?.name }}
`,
+})
+export class UserProfileComponent {
+ user$: Observable{user?.name}
;
+}
+
+// 3. Service handles all business logic
+@Service()
+class UserService implements UserServiceInterface {
+ state = { user: null, loading: false };
+
+ async loadUser(id: string): Promise{userService.state.user?.name}
;
+}
+```
+
+**TDI2 transforms it to this:**
+
+```typescript
+function UserProfile() {
+ const userService = useService('UserService'); // Auto-injected
+ const userSnap = useSnapshot(userService.state); // Reactive state
+ return {userSnap.user?.name}
;
+}
+```
+
+**Result:** Less props, automatic reactivity, surgical re-rendering
+
+Note: The transformation happens at build time. You write clean code, the framework handles the plumbing.
+
+---
+
+## Testing Becomes Trivial
+
+**Service Testing:** Pure business logic
+
+```typescript
+it("should load user correctly", async () => {
+ const mockRepo = { getUser: jest.fn().mockResolvedValue(mockUser) };
+ const userService = new UserService(mockRepo);
+
+ await userService.loadUser("123");
+
+ expect(userService.state.user).toBe(mockUser);
+ expect(mockRepo.getUser).toHaveBeenCalledWith("123");
+});
+```
+
+**Component Testing:** Pure UI
+
+```typescript
+it('should render user name', () => {
+ const mockService = { state: { user: { name: 'John' }, loading: false } };
+
+ render(Loading...
;
+ if (error) return {error.message}
;
+
+ return (
+
+
+ );
+}
+```
+
+Note: This shows the reality - complex props management, multiple hooks coordination, and business logic mixed with UI rendering.
+
+---
+
+## After: Service Injection UserProfile
+
+**Service Injection:**
+
+```typescript
+function UserProfile({
+ userService,
+ notificationService,
+ themeService,
+ permissionService
+}: {
+ userService: Inject{user?.name}
+{user?.email}
+ {canEdit && showEditButton && ( + + )} +Loading...
;
+ if (error) return {error}
;
+
+ return (
+
+ notificationService.dismiss(id)}
+ />
+
+ );
+}
+```
+
+Note: Same UI, but now the component is a pure template. Services handle all coordination and business logic. The component just renders what services provide.
+
+---
+
+## How TDI2 Works
+
+**Built on proven technologies:**
+
+- **Vite Plugin** - Compile-time code transformation
+- **Valtio** - Reactive state (2.9kb, faster than Redux)
+- **TypeScript** - Interface-based dependency resolution
+- **Decorators** - Familiar Spring Boot patterns
+
+**Zero runtime overhead** - transformation happens at build time
+
+Note: TDI2 combines mature technologies in a new way to solve React's architectural problems.
+
+---
+
+## Getting Started
+
+> Already setup for you in the code examples mentioned earlier
+
+**1. Install TDI2**
+
+```bash
+npm install @tdi2/di-core @tdi2/vite-plugin-di valtio
+```
+
+**2. Configure Vite**
+
+```typescript
+import { diEnhancedPlugin } from "@tdi2/vite-plugin-di";
+
+export default defineConfig({
+ plugins: [diEnhancedPlugin(), react()],
+});
+```
+
+**3. Create your first service**
+
+```typescript
+interface MyServiceInterface {
+ state: { count: number };
+ increment(): void;
+}
+
+@Service()
+class MyService implements MyServiceInterface {
+ state = { count: 0 };
+
+ increment() {
+ this.state.count++;
+ }
+}
+```
+
+**4. Use it in components**
+
+```typescript
+function MyComponent({ myService }: { myService: Inject{user?.name}
+{user?.email}
+ {canEdit && ( + + )} +
+ Count: {myService.state.count}
+
+
+ );
+}
+```
+
+Note: Getting started is straightforward. Add the plugin, create services, use them in components. You don't need to rewrite your entire app. Start with your most painful component, extract one service, see the benefits immediately. Then gradually expand the pattern.
+
+---
+
+## Ready to Try?
+
+**🚀 Resources:**
+
+- **GitHub:** github.com/7frank/tdi2
+- **Examples:** Working demos you can run today
+- **Documentation:** Step-by-step guides
+
+**🎯 Next Steps:**
+
+1. Try the basic example
+2. Extract one service from your most complex component
+3. Experience the difference
+
+Note: The framework is ready for experimentation. Start small, see the benefits, then expand usage.
+
+---
+
+## Q&A: Your React Challenges
+
+
+
+**Common questions:**
+
+- "How does this work with our existing state management?"
+- "Can we migrate incrementally?"
+- "What about server-side rendering?"
+- "How do we convince the team?"
+
+**Let's discuss your specific React pain points and how service injection could help**
+
+**After Q&A: Live coding session**
+
+**Contact:** github.com/7frank - Questions and collaboration welcome!
+
+Note: I want to hear about your React challenges and discuss how service injection could solve them.
+
+---
+
+## Thank You Leipzig.js!
+
+### Ready to Escape Props Hell?
+### Ready to Escape Props Hell?
+
+**The future of React architecture starts with conversations like this**
+**The future of React architecture starts with conversations like this**
+
+_Let's make React truly enterprise-ready together!_
+
+**🔗 github.com/7frank/tdi2**
+
+**Next: Live coding session**
+
+Note: Thank you for your attention. I'm excited to discuss this further and hear your thoughts on bringing enterprise architecture patterns to React.
+**🔗 github.com/7frank/tdi2**
+
+**Next: Live coding session**
+
+Note: Thank you for your attention. I'm excited to discuss this further and hear your thoughts on bringing enterprise architecture patterns to React.