کتابخانه | آرین سلیمان‌زاده

پایه‌ی زبان۴ تا ۶ جلسه‌ی آرام مطالعه

هسته‌ی JavaScript — بفهم زبان دقیقاً چه می‌کند

قبل از اضافه‌شدن پیچیدگی فریم‌ورک، یک مدل ذهنی قابل‌اعتماد از value، scope، function، object، prototype، coercion و module بساز.

چرا این مرحله اینجاست

React و Next.js دائماً روی رفتار JavaScript سوار هستند. اگر این لایه مبهم باشد، قوانین فریم‌ورک تصادفی و حفظی به نظر می‌رسند.

با این ترتیب بخوان

01Scope، محیط Lexical و Closureهسته↗02this، call/apply/bind و شکل‌های Function↗03Object، Prototype و Inheritance↗04Type، Equality، Coercion و Immutability↗05Module، Destructuring و سینتکس مدرن↗

وقتی این مرحله برایت روشن شد

می‌توانی توضیح بدهی چرا یک قطعه JavaScript آن رفتار را دارد، نه فقط اینکه چه خروجی می‌دهد.

کد ناآشنا را بدون حدس‌زدن درباره Scope، Reference یا Object lookup می‌خوانی.

باز کردن کتابخانه JavaScript →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

Runtime و مرورگر۳ تا ۵ جلسه‌ی آرام مطالعه

JavaScript ناهمگام — زمان، Task و مرورگر را بفهم

از سینتکس وارد رفتار Runtime شو: Event Loop، Promise، async/await، شبکه، DOM، Storage، Error و Performance.

چرا این مرحله اینجاست

بخش زیادی از باگ‌های سخت فرانت‌اند مربوط به Timing، Lifecycle، Network یا state مرورگر است، نه سینتکس.

با این ترتیب بخوان

01Event Loop، Call Stack و Queueهاضروری↗02Promise، Microtask و async/await↗03Fetch، AbortController و Error Handling↗04DOM، Event و Browser Storage↗05Performance، Memory و Debounce↗

وقتی این مرحله برایت روشن شد

می‌توانی ترتیب اجرای کد Async را دنبال کنی و Microtask را از Task تشخیص بدهی.

مفاهیم مرورگری مثل Cancellation، Cleanup، Storage، Event propagation و هزینه‌ی Performance را تشخیص می‌دهی.

↳

مسیر اختیاری: یادداشت‌های Code Reading

وقتی بین پاسخ‌های بلند مخزن به توضیح‌های کوتاه و انتخاب‌شده نیاز داری، از یادداشت‌های JavaScript استفاده کن.

مطالعه‌ی Async و Browser →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

مدل ذهنی React۴ تا ۶ جلسه‌ی آرام مطالعه

مبانی React — با Render، State و Composition فکر کن

React را به‌عنوان یک مدل Rendering یاد بگیر، نه مجموعه‌ای از Hookها. از Component، State، Identity، Render/Commit، Event و Composition شروع کن.

چرا این مرحله اینجاست

وقتی مدل Render روشن باشد، Hookها دیگر مجموعه‌ای از قوانین جداگانه نیستند و تبدیل به ابزارهای قابل‌پیش‌بینی می‌شوند.

با این ترتیب بخوان

01Component، JSX، Props و Stateپایه↗02Render، Commit، Identity و Key↗03Event، ورودی Controlled و Lifting State↗04Composition، Children و UI قابل‌استفاده‌مجدد↗05Virtual DOM، Reconciliation و Fiber↗

وقتی این مرحله برایت روشن شد

می‌توانی توضیح بدهی چه چیزی Render ایجاد می‌کند و React بین Renderها چه چیزی را حفظ یا Reset می‌کند.

مرز Component و محل نگهداری State را براساس Data Flow انتخاب می‌کنی، نه عادت.

باز کردن کتابخانه React →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

معماری React۵ تا ۷ جلسه‌ی آرام مطالعه

React در عمل — Effect، Ref، Context، Performance و مرزهای مدرن

وارد Synchronization، Escape Hatch، Shared State، Memoization، Suspense، Server Component، Routing، Testing و Context قدیمی شو.

چرا این مرحله اینجاست

در این مرحله React تولیدی تبدیل به مسئله‌ی معماری می‌شود: انتخاب مرز درست معمولاً مهم‌تر از دانستن یک API دیگر است.

با این ترتیب بخوان

01Effect به‌عنوان Synchronization، نه Event Handlerمهم↗02Ref، Reducer و Custom Hook↗03Context، State Library و مالکیت Data↗04Memoization و Trade-offهای Performance↗05Suspense، Server Component و React مدرن↗06Testing، Accessibility و Error Boundary↗

وقتی این مرحله برایت روشن شد

می‌توانی تشخیص بدهی چه زمانی Effect لازم است و چه زمانی Derived State یا Event Handler انتخاب بهتری است.

درباره Performance و State Management با Trade-off حرف می‌زنی، نه با شعار و نسخه‌ی ثابت.

↳

مطالعه‌ی Hook و الگوهای پروژه

داخل کتابخانه React به Custom Hooks یا Project Patterns برو تا ببینی مفاهیم چگونه در کد کنار هم قرار می‌گیرند.

مطالعه‌ی React پیشرفته →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

معماری Next.js۴ تا ۶ جلسه‌ی آرام مطالعه

Next.js — قبل از حفظ APIها، مرز Server/Client را بفهم

App Router را از زاویه معماری بخوان: Layout، React Server Component، Client Boundary، Route Handler، Server Action، Cache، Streaming، Metadata و انتخاب Rendering.

چرا این مرحله اینجاست

بیشتر سردرگمی Next.js از قاطی‌شدن Browser، React، Server، Cache و Request-time می‌آید. این مرحله این لایه‌ها را از هم جدا می‌کند.

با این ترتیب بخوان

01App Router، Layout، Template و Route Groupمعماری↗02RSC و مرز Client↗03Server Action در برابر Route Handler↗04Caching، Revalidation و تازگی Data↗05Streaming، Suspense و استراتژی Rendering↗06Metadata، Security و مسائل Production↗

وقتی این مرحله برایت روشن شد

می‌توانی تصمیم بگیری کد کجا اجرا شود و توضیح بدهی چرا آن مرز اهمیت دارد.

Static، Dynamic، Cached، Streamed و Mutation flow را به‌عنوان بخش‌های یک معماری واحد مقایسه می‌کنی.

باز کردن یادداشت‌های Next.js →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

پایه‌ی DSA — مسیر موازیمطالعه‌ی موازی و بدون ضرب‌العجل

ساختمان داده و الگوریتم‌های پایه — جعبه‌ابزار را بساز

وقتی پایه‌های JavaScript راحت شد، این مسیر را به‌صورت موازی شروع کن. از ساختمان داده، Search، Sorting، Recursion، Hashing و Complexity آغاز کن.

چرا این مرحله اینجاست

الگوریتم وقتی ساده‌تر می‌شود که آن را انتخاب Representation و Trade-off ببینی، نه معمایی برای حفظ‌کردن.

با این ترتیب بخوان

01Big-O و Complexity کاربردیپایه↗02Array، Linked List، Stack و Queue↗03Hash Table، Set و ساختارهای Cache↗04Binary Search و الگوهای Search↗05خانواده‌های Sorting و Trade-offها↗06Recursion، Divide-and-Conquer و Tree پایه↗

وقتی این مرحله برایت روشن شد

ساختمان داده را براساس Access، Insert، Ordering و نیاز حافظه انتخاب می‌کنی.

الگوریتم را با Invariant، مراحل و Complexity توضیح می‌دهی، نه کد حفظ‌شده.

باز کردن کتابخانه الگوریتم →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

الگوهای عمیق‌تر DSAتدریجی جلو برو و مرتب برگرد

Tree، Graph، Dynamic Programming و خانواده‌های مسئله

از الگوریتم‌های منفرد به الگوهای قابل‌استفاده‌مجدد برو: Traversal، Shortest Path، Connectivity، Greedy، Backtracking، Memoization و Dynamic Programming.

چرا این مرحله اینجاست

مسائل پیشرفته وقتی قابل‌کنترل می‌شوند که اول خانواده‌ی مسئله را تشخیص بدهی و بعد الگوریتم مشخص را انتخاب کنی.

با این ترتیب بخوان

01DFS، BFS و الگوهای Traversal↗02Dijkstra، Bellman-Ford و Shortest Pathگراف↗03Union-Find، MST و Connectivity↗04Backtracking و فضای Search↗05Dynamic Programming و Memoization↗06مسائل کلاسیک: LCS، Knapsack و Max Subarray↗

وقتی این مرحله برایت روشن شد

قبل از نوشتن کد، شکل مسائل Graph، Greedy، Backtracking و DP را تشخیص می‌دهی.

چند راه‌حل معتبر را مقایسه می‌کنی و توضیح می‌دهی چرا یکی برای Constraint مشخص مناسب‌تر است.

مطالعه‌ی الگوریتم‌های پیشرفته →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

یکپارچه‌سازیهر وقت خواستی تصویر بزرگ‌تر را ببینی برگرد

لایه‌ها را به هم وصل کن — مفاهیم را در تصمیم‌های واقعی فرانت‌اند دوباره ببین

آزمون نهایی وجود ندارد. در این مرحله به موضوعاتی برگرد که حالا به هم متصل شده‌اند: Closure با Hook، Event Loop با Effect، Cache با Next.js، Tree با UI و Complexity با Performance.

چرا این مرحله اینجاست

تسلط از اتصال مفاهیم می‌آید. یک مفهوم وقتی ماندگار می‌شود که آن را از زاویه زبان، فریم‌ورک، معماری و الگوریتم ببینی.

با این ترتیب بخوان

01Closure ↔ Hook و Callback↗02Event Loop ↔ Effect و زمان‌بندی UI↗03Caching ↔ تازگی Data و Next.js↗04Tree ↔ ساختار Component و UI↗05Complexity ↔ Performance فرانت‌اند↗

وقتی این مرحله برایت روشن شد

می‌توانی بین رفتار سطح پایین JavaScript و معماری سطح بالای Application حرکت کنی.

یک نقشه داری که بدون شروع دوباره‌ی کل مسیر، به بخش‌های ضعیف یا جذاب برگردی.

مرور همه یادداشت‌های فرانت‌اند →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

پایه‌ی زبان۴ تا ۶ جلسه‌ی آرام مطالعه

هسته‌ی JavaScript — بفهم زبان دقیقاً چه می‌کند

قبل از اضافه‌شدن پیچیدگی فریم‌ورک، یک مدل ذهنی قابل‌اعتماد از value، scope، function، object، prototype، coercion و module بساز.

چرا این مرحله اینجاست

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

می‌توانی توضیح بدهی چرا یک قطعه JavaScript آن رفتار را دارد، نه فقط اینکه چه خروجی می‌دهد.

کد ناآشنا را بدون حدس‌زدن درباره Scope، Reference یا Object lookup می‌خوانی.

باز کردن کتابخانه JavaScript →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

Runtime و مرورگر۳ تا ۵ جلسه‌ی آرام مطالعه

JavaScript ناهمگام — زمان، Task و مرورگر را بفهم

از سینتکس وارد رفتار Runtime شو: Event Loop، Promise، async/await، شبکه، DOM، Storage، Error و Performance.

چرا این مرحله اینجاست

بخش زیادی از باگ‌های سخت فرانت‌اند مربوط به Timing، Lifecycle، Network یا state مرورگر است، نه سینتکس.

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

می‌توانی ترتیب اجرای کد Async را دنبال کنی و Microtask را از Task تشخیص بدهی.

مفاهیم مرورگری مثل Cancellation، Cleanup، Storage، Event propagation و هزینه‌ی Performance را تشخیص می‌دهی.

↳

مسیر اختیاری: یادداشت‌های Code Reading

وقتی بین پاسخ‌های بلند مخزن به توضیح‌های کوتاه و انتخاب‌شده نیاز داری، از یادداشت‌های JavaScript استفاده کن.

مطالعه‌ی Async و Browser →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

مدل ذهنی React۴ تا ۶ جلسه‌ی آرام مطالعه

مبانی React — با Render، State و Composition فکر کن

React را به‌عنوان یک مدل Rendering یاد بگیر، نه مجموعه‌ای از Hookها. از Component، State، Identity، Render/Commit، Event و Composition شروع کن.

چرا این مرحله اینجاست

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

می‌توانی توضیح بدهی چه چیزی Render ایجاد می‌کند و React بین Renderها چه چیزی را حفظ یا Reset می‌کند.

مرز Component و محل نگهداری State را براساس Data Flow انتخاب می‌کنی، نه عادت.

باز کردن کتابخانه React →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

معماری React۵ تا ۷ جلسه‌ی آرام مطالعه

React در عمل — Effect، Ref، Context، Performance و مرزهای مدرن

وارد Synchronization، Escape Hatch، Shared State، Memoization، Suspense، Server Component، Routing، Testing و Context قدیمی شو.

چرا این مرحله اینجاست

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

می‌توانی تشخیص بدهی چه زمانی Effect لازم است و چه زمانی Derived State یا Event Handler انتخاب بهتری است.

درباره Performance و State Management با Trade-off حرف می‌زنی، نه با شعار و نسخه‌ی ثابت.

↳

مطالعه‌ی Hook و الگوهای پروژه

داخل کتابخانه React به Custom Hooks یا Project Patterns برو تا ببینی مفاهیم چگونه در کد کنار هم قرار می‌گیرند.

مطالعه‌ی React پیشرفته →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

معماری Next.js۴ تا ۶ جلسه‌ی آرام مطالعه

Next.js — قبل از حفظ APIها، مرز Server/Client را بفهم

App Router را از زاویه معماری بخوان: Layout، React Server Component، Client Boundary، Route Handler، Server Action، Cache، Streaming، Metadata و انتخاب Rendering.

چرا این مرحله اینجاست

بیشتر سردرگمی Next.js از قاطی‌شدن Browser، React، Server، Cache و Request-time می‌آید. این مرحله این لایه‌ها را از هم جدا می‌کند.

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

می‌توانی تصمیم بگیری کد کجا اجرا شود و توضیح بدهی چرا آن مرز اهمیت دارد.

Static، Dynamic، Cached، Streamed و Mutation flow را به‌عنوان بخش‌های یک معماری واحد مقایسه می‌کنی.

باز کردن یادداشت‌های Next.js →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

پایه‌ی DSA — مسیر موازیمطالعه‌ی موازی و بدون ضرب‌العجل

ساختمان داده و الگوریتم‌های پایه — جعبه‌ابزار را بساز

چرا این مرحله اینجاست

الگوریتم وقتی ساده‌تر می‌شود که آن را انتخاب Representation و Trade-off ببینی، نه معمایی برای حفظ‌کردن.

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

ساختمان داده را براساس Access، Insert، Ordering و نیاز حافظه انتخاب می‌کنی.

الگوریتم را با Invariant، مراحل و Complexity توضیح می‌دهی، نه کد حفظ‌شده.

باز کردن کتابخانه الگوریتم →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

الگوهای عمیق‌تر DSAتدریجی جلو برو و مرتب برگرد

Tree، Graph، Dynamic Programming و خانواده‌های مسئله

چرا این مرحله اینجاست

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

قبل از نوشتن کد، شکل مسائل Graph، Greedy، Backtracking و DP را تشخیص می‌دهی.

چند راه‌حل معتبر را مقایسه می‌کنی و توضیح می‌دهی چرا یکی برای Constraint مشخص مناسب‌تر است.

مطالعه‌ی الگوریتم‌های پیشرفته →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

یکپارچه‌سازیهر وقت خواستی تصویر بزرگ‌تر را ببینی برگرد

لایه‌ها را به هم وصل کن — مفاهیم را در تصمیم‌های واقعی فرانت‌اند دوباره ببین

چرا این مرحله اینجاست

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

می‌توانی بین رفتار سطح پایین JavaScript و معماری سطح بالای Application حرکت کنی.

یک نقشه داری که بدون شروع دوباره‌ی کل مسیر، به بخش‌های ضعیف یا جذاب برگردی.

مرور همه یادداشت‌های فرانت‌اند →آرام بخوان. وقتی مفهوم برایت متصل و روشن شد، جلو برو.

یک مسیر حرفه‌ای برای مهندسی فرانت‌اند؛ بدون اینکه مطالعه تبدیل به مسابقه شود.

از جایی شروع کن که واقعاً در آن سطح هستی

از هسته‌ی JavaScript شروع کن

از مدل ذهنی React وارد شو

برو سراغ معماری و Next.js

این بخش‌ها چطور به هم وابسته‌اند

هشت مرحله؛ هر کدام با یک دلیل مشخص

هسته‌ی JavaScript — بفهم زبان دقیقاً چه می‌کند

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

JavaScript ناهمگام — زمان، Task و مرورگر را بفهم

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

مبانی React — با Render، State و Composition فکر کن

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

React در عمل — Effect، Ref، Context، Performance و مرزهای مدرن

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

Next.js — قبل از حفظ APIها، مرز Server/Client را بفهم

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

ساختمان داده و الگوریتم‌های پایه — جعبه‌ابزار را بساز

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

Tree، Graph، Dynamic Programming و خانواده‌های مسئله

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

لایه‌ها را به هم وصل کن — مفاهیم را در تصمیم‌های واقعی فرانت‌اند دوباره ببین

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

یک ریتم مفید برای هر موضوع

مدل ذهنی را بخوان

کد را ببین

یک مفهوم نزدیک را وصل کن

بعداً برگرد

هر موضوع را تا چه عمقی بخوانی؟

هدف تمام‌کردن مسیر نیست؛ هدف این است که لایه‌ها برایت به هم متصل شوند.

یک مسیر حرفه‌ای برای مهندسی فرانت‌اند؛ بدون اینکه مطالعه تبدیل به مسابقه شود.

از جایی شروع کن که واقعاً در آن سطح هستی

از هسته‌ی JavaScript شروع کن

از مدل ذهنی React وارد شو

برو سراغ معماری و Next.js

این بخش‌ها چطور به هم وابسته‌اند

هشت مرحله؛ هر کدام با یک دلیل مشخص

هسته‌ی JavaScript — بفهم زبان دقیقاً چه می‌کند

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

JavaScript ناهمگام — زمان، Task و مرورگر را بفهم

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

مبانی React — با Render، State و Composition فکر کن

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

React در عمل — Effect، Ref، Context، Performance و مرزهای مدرن

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

Next.js — قبل از حفظ APIها، مرز Server/Client را بفهم

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

ساختمان داده و الگوریتم‌های پایه — جعبه‌ابزار را بساز

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

Tree، Graph، Dynamic Programming و خانواده‌های مسئله

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

لایه‌ها را به هم وصل کن — مفاهیم را در تصمیم‌های واقعی فرانت‌اند دوباره ببین

با این ترتیب بخوان

وقتی این مرحله برایت روشن شد

یک ریتم مفید برای هر موضوع

مدل ذهنی را بخوان

کد را ببین

یک مفهوم نزدیک را وصل کن

بعداً برگرد

هر موضوع را تا چه عمقی بخوانی؟

هدف تمام‌کردن مسیر نیست؛ هدف این است که لایه‌ها برایت به هم متصل شوند.