ব্লক ১ — Reactivity · দিন ০০১–০১৮ · component · exports
উৎসের সেকশন ৩ (Component and Reactivity Optimization) — ১৭টা rule, দিনে একটা; শেষ দিনে ⚑। Glimmer component, tracked state, getter আর component-এর গড়ন। brainstorming/application-to-offer.md-এর ইন্টারভিউ-বিষয়গুলোর প্রথমটা — autotracking বনাম re-render — এই ব্লকের, তাই এটা সবার আগে। 🧠 (Trunk based knowledge)
Avoid Constructors in Components
এই দিনের কাজ · মোট ১০′০/১ (০%)
- Avoid Constructors in Components — নিচের Incorrect কোড পড়ে, না দেখে ঠিক সংস্করণটা লিখুন; তারপর "কেন" ইংরেজিতে ২–৩ বাক্যে জোরে বলুন, আর খাতায় এক লাইন: নিজের কাজে এটা কোথায় দেখেছেন
Incorrect (using constructor):
// app/components/user-profile.gjs import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { service } from '@ember/service'; class UserProfile extends Component { constructor() { super(...arguments); // Anti-pattern: Manual service lookup this.store = this.owner.lookup('service:store'); this.router = this.owner.lookup('service:router'); // Anti-pattern: Imperative initialization this.data = null; this.isLoading = false; this.error = null; // Anti-pattern: Side effects in constructor this.loadUserData(); } async loadUserData() { this.isLoading = true; try { this.data = await this.store.request({ url: `/users/${this.args.userId}`, }); } catch (e) { this.error = e; } finally { this.isLoading = false; } } <template> {{#if this.isLoading}} <div>Loading...</div> {{else if this.error}} <div>Error: {{this.error.message}}</div> {{else if this.data}} <h1>{{this.data.name}}</h1> {{/if}} </template> }১০′🔁 ঝালাই হবেimpact · HIGHCorrect: আগে নিজে লিখুন
দিন শেষে — নিজেকে যাচাই
না দেখে ঠিকটা লেখা, আর "কেন" ইংরেজিতে জোরে বলা হয়েছে?
উত্তরের আগে উপরের কাজ না দেখে মনে করুন এই দিনে কী কী করেছেন। 🧠 Test yourself