هدف از نوشتن این مطلب دادن ایده و یاری به افرادی است که نمی‌دانند چه چیزهایی را در این مسیر یاد بگیرند و برای بروز بودن در بین این همه ابزار مختلف گیج شده‌اند. شما باید این مسئله که چرا یک ابزار از ابزاری دیگر برای حالت‌هایی مناسب‌تر است را درک کنید. البته این موضوع را هم در نظر بگیرید که همیشه ابزارهای محبوب، بهترین گزینه برای همه کارها نیستند.
بنابراین بیایید شروع کنیم - می‌توانید مسیر مطالعاتی را براساس تصویر زیر دنبال کنید، اما برای اینکه بهتر هر مرحله توضیح داده شود، من در زیر تصویر نکاتی را می‌نویسیم:
اولین چیزی که باید به آن توجه داشته باشید یادگیری موارد پایه‌ای است، یادگیری HTML و CSS جزو اولین موارد مهم در این زمینه است، همچنین آشنایی با سینتکس جاوااسکریپت نیز مهم است.
یادگیری پایه‌های HTML
HTML چیزی‌ست که به صفحات شما ساختار می‌دهد. این مورد مانند اسکلت‌بندی انسان‌هاست که باعث می‌شود آن‌ها بتوانند بایستند. اولین چیزی که در این مسیر باید یاد بگیرید، یادگیری سینتکس و تمام ویژگی‌های HTML است. شما باید در ابتدای این مسیر روی این دو موضوع تمرکز کنید:
- یادگیری پایه‌ها و شیوه نوشتن HTML مفهومی
- درک شیوه تقسیم برگه به قسمت‌های مختلف و چگونگی ساختاربندی DOM به صورت مناسبت
تمرین - بعد از اینکه HTML را یاد گرفتید، سعی کنید ۵ برگه HTML را بسازید. می‌توانید از وبسایت‌های دیگر الهام بگیرید، اما تمرکز شما تنها باید روی ساختار باشد، وبسایت شما یقینا زیبا نخواهد بود، اما ساختاربندی و درک این موضوع در ابتدا بسیار مهم است.
یادگیری CSS
حال که شیوه اسکلت‌سازی برای برگه‌ها را یاد گرفتیم، وقت آن است که به برگه‌ها پوسته‌ای اضافه کنیم و آن را با ظاهری زیبا تحویل دهیم. CSS - شیوه‌نامه آبشاری است که برای آرایش برگه‌های وب استفاده می‌شود.
- اولین کاری که باید انجام دهید آشنایی با سینتکس کلی و خاصیت‌های مرسوم آن است.
- در رابطه با مدل جعبه‌ای اطلاعاتی و شیوه آماده‌سازی لایه‌بندی وبسایت با استفاده از Grid و Flexbox اطلاعاتی بدست بیاورید.
- وقتی که این کارها را انجام دادید، شیوه واکنشگرا ساختن وبسایت با استفاده از مدیا کوئری‌ها را یاد بگیرید.
تمرین - پس از اینکه قدم‌های اول را برداشتید، باید به برگه HTML که در قسمت قبل ایجاد کرده‌اید، استایل بدهید. برای مثال، اگر صفحه‌ای مانند صفحه پروفایل وبسایت گیت‌هاب ایجاد کرده‌اید، حال با استفاده از CSS سعی در زیبا و مشابه ساختن آن کنید. این کار را برای تمام ۵ برگه‌ای که نوشتید انجام دهید.
یادگیری پایه‌های جاوااسکریپت
جاوااسکریپت چیزی‌ست که باعث می‌شود صفحات HTML شما پویاتر باشند. برای مثال، تمام اسلایدر‌ها، پاپ‌آپ‌ها و رویدادها که شما در وبسایت‌ها می‌بینید و قسمت‌هایی که بدون نیاز به نوسازی، محتوای جدیدی را دریافت می‌کنند، با استفاده از جاوااسکریپت پیاده‌سازی شده است. در این مرحله شما باید مقدمات و پایه‌های جاوااسکریپت را به خوبی یاد بگیرید:
- سینتکس و مفاهیم اولیه جاوااسکریپت را یاد بگیرید.
- شیوه کار با DOM را یاد بگیرید. برای مثال شیوه حذف کردن یک المان از صفحه، اضافه کردن آن، اضافه/حذف کردن کلاس از یک المان، اعمال کردن استایل CSS و... .
- مفاهیمی مانند scopeها، closureها، hoisiting و... را یاد بگیرید.
- شیوه ساخت فراخوانی‌های HTTP را با استفاده از XHR و Ajax را یاد بگیرید.
- بعد از یادگیری این موارد حال نوبت به فراگیری ویژگی‌های جدید در اکمااسکریپت ۶+ می‌شود. اکمااسکریپت ۶ یک نسخه استاندارد از جاوااسکریپت است که امکانات جدیدی را به جاوااسکریپت معرفی کرده است.
آیا باید جی‌کوئری را یاد بگیرم؟
زمانی همه افراد در رابطه با یادگیری جی‌کوئری و استفاده از آن بسیار مشتاق بودند و این موضوع دلایل بسیار خوبی داشت؛ جی‌کوئری کتابخانه قدرتمندی است که براساس جاوااسکریپت نوشته شده و به شما قابلیت انجام هر کاری را به صورت سازگار با مرورگر می‌دهد. اما با بوجود آمدن تکنولوژی‌های جدید، ویژگی‌های جی‌کوئری تا حدی قدیمی شده است، اما در حال حاضر باز هم افرادی وجود دارد که از آن استفاده می‌کنند. شما مجبور به یادگیری آن نیستید اما می‌تواند برای ظاهر وبسایت‌تان بسیار مفید باشد.
تمرین
این موضوع را قبلا گفته‌ام و چندین بار دیگر نیز تکرار می‌کنم، شما بدون تمرین کردن نمی‌توانید چیزی را یاد بگیرید. ممکن است احساس کنید که چیزی را یاد گرفته‌اید، اما بدانید که بدون تمرین کردن میزان ماندگاری آن در حافظه‌تان بسیار کم خواهد بود. مطمئن شوید که تا جایی می‌توانید تمرین و همچنین از مسیر دنباله‌روی می‌کنید.
شروع به ساختن وبسایتی واکنشگرا کنید و تعاملاتی را با استفاده از جاوااسکریپت به آن اضافه نمایید. می‌توانید از منابع دیگر کپی کنید، اما به یاد داشته باشید که فقط از مواردی استفاده کنید که تا به حال آن‌ها را یاد گرفته‌اید.
بعد از اینکه وبسایت‌هایی را ایجاد کردید، زمان آن است که پروژه‌های واقعی‌تری را بسازید. وارد وبسایت github.com شوید و پروژه‌های متن بازی را که علاقه‌مند هستید پیدا کرده و در آن‌ها تغییر ایجاد کنید:
- رابط کاربری را بهتر نمایید، صفحات را واکنشگرا کنید و در طراحی کلی بهبودهایی را اعمال نمایید.
- به مشکلاتی که در گیت‌هاب گزارش شده نگاه کنید و سعی در حل آن‌ها داشته باشید.
- هر کدی را که فکر می‌کنید قابلیت بهبود دارد را بازسازی کنید.
در حالی که به شما گیت‌هاب را پیشنهاد می‌دهم، باید بدانید که داشتن دانش پایه از گیت هم مهم است، البته این موضوع اختیاری است اما اگر بتوانید آن را یاد بگیرید، مطمئنا کارایی بیشتری خواهید داشت و می‌توانید بهتر با پروژه‌ها کار کنید.
نکته جالب: خیلی از افراد در حال حاضر تنها با داشتن این دانش‌ها تا این نقطه از کار توانسته‌اند شغل تمام وقت یا فریلنسری داشته باشند. هر چند که شما هم می‌توانید به این مسیر برسید، اما ادامه یادگیری را فراموش نکنید.
پکیج منیجرها
قبل از اینکه این قسمت را توضیح دهم؛ اگر قبلا از یک کتابخانه خارجی CSS و یا جاوااسکریپت استفاده کرده باشید، نیاز دارید که آن را از وبسایت اصلی دانلود کرده و به صورت دستی آن را به پروژه‌تان اضافه کنید، وقتی که یک نسخه جدید از آن کتابخانه عرضه می‌شود، باز هم مجبور هستید که این روند را تکرار کنید. به نظر زمان هدر دادن است. پکیج منیجرها این زمان هدر رفته را برای شما جبران می‌کنند. آن‌ها به شما اجازه می‌دهند که کتابخانه‌ها و پلاگین‌های خارجی را به پروژه‌های‌تان اضافه کنید، بنابراین دیگر نگران افزودن آن به صورت دستی نخواهید بود. همچنین وقتی نسخه جدیدی عرضه می‌شود، تمام کارها تنها با یک دستور بروزرسانی انجام می‌شود. دو نسخه پکیج منیجر برای افرادی که با جاوااسکریپت کار می‌کنند وجود دارد، یکی yarn نام دارد و دیگری npm. تقریبا هر دوی این موارد به یک شکل هستند و ویژگی‌های یکسانی ارائه می‌دهند، اما من پیشنهاد می‌کنم که به سمت npm بروید.
تمرین
بعد از اینکه پکیج منیجرها را یاد گرفتید، سراغ یک وبسایت بروید و چندین کتابخانه خارجی را از طریق آن به پروژه اضافه نمایید.
پیش‌پردازنده‌های CSS
پیش‌پردازنده‌ها امکانات بیشتری را به شما در نوشتن کدهای CSS می‌دهند. گزینه‌های مختلفی مانند Sass, Less, Stylus و... وجود دارد. اما اگر من یک مورد را انتخاب می‌کردم حتما به سراغ Sass می‌رفتم. با این حال PostCSS نیز گزینه دیگری است که اخیرا توجهات بسیاری را به خود جلب کرده است.
فریمورک‌های CSS
یادگیری فریمورک اجباری نیست، اما با استفاده از آن می‌توانید پروژه‌های‌تان را با سرعت بیشتری راه‌اندازی کنید. در بین فریمورک‌های CSS می‌تواند Bootstrap, Materialize و foundation را نام برد. اما در حال حاضر محبوب‌ترین این موارد همان گزینه اول یعنی بوت‌استرپ است.
ساختاردهی به CSS
همانطور که اپلیکیشن‌تان پیشرفت می‌کند، قسمت CSS شما عظیم‌تر و ناپایدارتر می‌شود. بنابراین باید راهی را برای ساختاردهی به فایل‌های CSS در نظر بگیرید. OOCSS, SMACSS, SUITCSS و... راهکارهایی برای ساختاردهی هستند. باید در رابطه با تفاوت‌های آن‌ها مطالعه کنید اما به صورت کلی من BEM را ترجیح می‌دهم.
ابزارهای ساخت
ابزارهایی در جاوااسکریپت وجود دارند که به شما در ایجاد و باندل کردن اپلیکیشن‌تان کمک می‌کنند. این دسته‌بندی شامل linterها، اجرا کننده‌های دستورات و باندلر‌ها می‌شود.
برای اجراکننده‌های دستورات، گزینه‌های مختلفی وجود دارد که می‌شود به npm scripts، gulp، grunt و... اشاره کرد. در حال حاضر بسیاری از افراد شروع به یادگیری npm scripts می‌کنند و از آنجایی که می‌توان بسیاری از ویژگی‌های Gulp را در ابزاری مانند وب‌پک مشاهده کرد، بنابراین یادگیری آن چندان الزامی نیست.
برای قسمت مربوط به linterها، گزینه‌های مختلفی برای استفاده وجود دارد که شامل ESLint، JSLint، JShint و JSCS می‌شود. اما در حال حاضر پر استفاده‌ترین مورد در این بین ESLint است.
برای باندلرهای ماژول، باز هم گزینه‌های مختلفی مانند Parcel, Webpack, Rollup و... وجود دارد. در حال حاضر از گزینه Webpack می‌توان بیشترین استفاده را مشاهده کرد.
تمرین
تبریک می‌گویم! شما ۷۵درصد مسیر را طی کردید. حال بسیار خوب است که بتوانید اپلیکیشنی را با استفاده از مواردی که یاد گرفته‌اید ایجاد کنید. نظرتان در رابطه با یک کتابخانه که در آن از Sass و جاوااسکریپت استفاده کرده‌اید چیست؟
انتخاب یک فریمورک
به نظر می‌رسد حال نوبت آن رسیده که به سراغ فریمورک‌های جاوااسکریپت بروید. در حوضه مربوط به فریمورک‌ها، گزینه‌های متفاوتی وجود دارد. ری‌اکت، ویو، انگولار و... . اما این سه مورد محبوب‌ترین موارد در این بین هستند.
امروزه تقاضای بیشتری برای ری‌اکت وجود دارد، اما هر سه این موارد می‌توانند به خوبی برای شما کار بکنند. از آنجایی که ویوجی‌اس در این بین وابستگی کمتری نسبت به موارد مختلف دارد، ممکن است یادگیری ویو برای‌تا بسیار آسان‌تر باشد. اما این موضوع را بهتر است به اختیار خودتان بگذاریم.
مسیر یادگیری مربوط به انگولار و ری‌اکت را می‌توانید در چارت زیر مشاهده کنید.
بعد از اینکه تصمیم به یادگیری یکی از این فریمورک‌ها گرفتید، موضوعات قابل توجه دیگری نیز وجود دارد که باید آن‌ها را نیز یاد بگیرید. برای مثال اگر تصمیم به یادگیری ری‌اکت گرفته‌اید، باید مواردی مانند Radux یا Mobx را برای مدیریت وضعیت نیز یاد بگیرید. البته این موارد بستگی به بزرگی اپلیکیشنی که در حال ایجاد آن هستید دارد.
اگر انگولار را انتخاب کنید، نیاز دارید که دانش خوبی در زمینه تایپ‌اسکریپت داشته باشید. همچنین یادگیری Rx.js فواید و کاربردهای زیادی را به اپلیکیشن انگولار شما می‌آورد.
اگر تصمیم به کار کردن روی ویوجی‌اس دارید، یادگیری Vuex که معادل Redux در ری‌اکت است، امری الزامی است.
تمرین
حال شما تمام چیزهایی که برای ایجاد یک اپلیکیشن مدرن جاوااسکریپتی نیاز دارید را در اختیار دارید. شروع به ایجاد اپلیکیشنی جدید با استفاده از فریمورک‌هایی که یاد گرفته‌اید بکنید.
بعد از اینکه چنین کاری کردید، در رابطه با اندازه‌گیری‌ها و بهبود‌های کارایی آن‌ها مطالعه کنید. برای مثال میزان زمان اجرای تعامل، سرعت ایندکس برگه و... را بررسی کنید.
وب اپلیکیشن‌های پیش‌رونده
بعد از یادگیری این موارد به شما پیشنهاد می‌شود که کار با سرویس ورکرها را یاد بگیرید و سعی در ایجاد یک اپلیکیشن پیش‌رونده داشته باشید.
اپلیکیشن‌تان را تست کنید
ابزارهای بسیار مختلفی برای تست کردن اپلیکیشن وجود دارد. هر کدام از این موارد هدف‌های متفاوتی را در نظر می‌گیرند. Jest, Mocha, Karma ابزارهایی برای انجام تست هستند.
Static Type Checkerها
Static Type Checker به شما قابلیت بررسی نوع داده‌ای را در جاوااسکریپت می‌دهند. یادگیری این موارد الزامی نیست، اما آن‌ها توانایی بیشتری را در نوشتن کدها می‌دهند و یادگیری‌شان تنها در چند ساعت انجام پذیر است. Typescript و Flow دو مورد از موارد اصلی برای این گزینه هستند. استفاده از Typescript پیشنهاد اصلی من است، اما می‌توانید گزینه‌های دیگر را نیز مشاهده کنید.
رندرینگ سمت سرور
اگر تا به اینجای کار آمده‌اید، پس بدانید که به خوبی توانسته‌اید به موقعیت مهندسی فرانت‌اند دست پیدا کنید. اما این بدان معنا نیست که دست از یادگیری بردارید.
براساس فریمورکی که آن را یاد گرفته‌اید، موضوع رندرینگ سمت سرور را یاد بگیرید. برای مثال در ری‌اکت شما گزینه‌هایی مانند Next.js و After.js را در اختیار دارید. برای انگولار Universal وجود دارد و برای ویوجی‌اس می‌توانید از Nuxt.js استفاده کنید.
در پایان
ممکن است در این نقشه کاری برخی از موارد را فراموش کرده باشیم، اما برای تبدیل شدن به یک توسعه‌دهنده فرانت‌اند این موارد بسیار مهم و ضروری هستند. جدای از یادگیری صرف، بخش مهم دیگر یادگیری از طریق تمرین کردن انجام می‌شود، در حین تمرین و انجام پروژه‌های مختلف شما با موضوعات مهمتری نیز آشنا خواهید شد که در یادگیری صرف آن‌ها را نمی‌بینید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید